JavaScript 图表库

Posted 2023-02-16

【中文标题】JavaScript 图表库

【英文标题】：JavaScript Chart Library

【发布时间】：2010-09-12 07:24:10

【问题描述】：

有人会推荐一个特定的 - 特别是根本不使用 Flash 的吗？

【参考方案1】：

如果您使用 jQuery，我发现 flot 非常好 - 试试 examples 看看它们是否满足您的需求，但我发现它们可以满足我的大部分需求当前项目。

此外，ExtJS 4.0 引入了一组很棒的图表 - 非常强大，旨在处理实时数据。

【讨论】：

这与 Geoff Dalgas 用于在 *** 上创建信誉图的库相同。这确实是一个不错的工具包。

我对 flot 唯一真正的抱怨是，当在 IE 中渲染时，它在 100% 以外的任何缩放级别看起来都很糟糕（即所有的行/块不能一起缩放 - 这对那些人来说绝对是个问题我们的高分辨率显示器）。

它看起来比我看过的许多其他图表看起来更好。这是 20 个 javascript 图表库的链接：javascript.open-libraries.com/utilities/chart/…

我也喜欢flot，之前在不同的网络应用上用过很多次。

我喜欢 flot，但它希望所有数据都是数字，所以如果你想绘制每个客户（按名称）或每个产品的销售额之类的东西，它就行不通

【参考方案2】：

它可能不是您想要的，但 Google's Chart API 非常酷且易于使用。

【讨论】：

请记住，Google Chart 需要互联网连接，并且对允许的客户端请求数量也有一些限制

@user102008：现在是 :)（如果您愿意，您仍然可以访问旧的 image based API）

Google Chart API 不能离线使用，不利于移动开发。

我需要做一个水平型烛台，有人知道谷歌图表api是否可以吗？

【参考方案3】：

不是 Javascript 库，但它可能是一个合适的替代方案 - 查看 Google Charts，您可以通过将查询字符串数据传递给他们的网络服务来生成图表。

【参考方案4】：

试试可以做成图表的 MIT 明喻时间线 - http://simile.mit.edu/timeline/

或者最后一个，http://code.google.com/p/gchart/

【参考方案5】：

我最喜欢的（flot）已经被提及了。

但一定要调查Ortho。 它非常适合树形图和时间线。

【参考方案6】：

看看Bluff。它是用于 Ruby 的 Gruff 图形库的 JavaScript 端口。

【参考方案7】：

Flotr 是另一个基于 Prototype 的纯 Javascript 图表库，灵感来自 Flot

【参考方案8】：

dojo 图表库中有很多活动，很棒的是我在 AIR 应用程序中使用它也没有问题，非常酷！ 参见例如http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

【参考方案9】：

试试PlotKit

【参考方案10】：

查看Google Visualization API，这是对更简单的Chart API 的一种概括

【参考方案11】：

你只需要原型图

【参考方案12】：

我推荐 gRaphaël 用于纯 JavaScript 图表以及它所构建的纯 JavaScript 矢量图形库 (Raphaël)。

gRaphaël 目前支持 Firefox 3.0+、Safari 3.0+、Opera 9.5+ 和 Internet Explorer 6.0+。

【讨论】：

只是想提醒一下，这个库没有文档，尽管它非常好。

【参考方案13】：

查看http://www.highcharts.com！

Highcharts 是一个用纯 JavaScript 编写的图表库，提供了一种将交互式图表添加到您的网站或 Web 应用程序的简单方法。 Highcharts 目前支持折线、样条、面积、areaspline、柱形、条形、饼状和散点图类型。

【讨论】：

值得指出的是，这个库对于非商业用途是免费的，但对于单站点和多站点需要付费。然而，这似乎是一个相当合理的价格。

起初它是一个无耻的插件，但它们看起来真的很棒！虽然它不是免费的商业用途，但我没有参考定价是否合理，但它们看起来还不错！

这与 CloudFlare.com 中使用的图表库相同，看起来非常棒。当我偶然发现 highcharts 库时，我正要使用 DevExpress 图表库，它是 ASP.NET 并在服务器中呈现和图像。我立刻确信这是要走的路。当我发现 CloudFlare 拥有我见过的最引人注目的仪表板/分析器之一，它也使用它时，我被卖掉了！我目前正在尝试使用它，它在我第一次尝试在我的网页中嵌入图表时奏效了......所以它看起来也很容易使用！

再投一票给 Highcharts。我目前正在使用它，它很棒。支持jQuery、Mootools和Prototype，设置和使用非常简单。

*** 本身使用 highcharts ***.com/users/22656/jon-skeet?tab=reputation

【参考方案14】：

对于不需要 Flash 的纯 JavaScript 图表的开源和商业解决方案越来越多。在此回复中，我将仅介绍开源选项。

对于不需要 Flash 的图形，主要有 2 类 JavaScript 解决方案：

基于画布，使用 ExplorerCanvas 在 IE 中呈现，而 ExplorerCanvas 又依赖于 VML 基于标准的浏览器上的 SVG，在 IE 中呈现为 VML

这两种方法各有利弊，但对于图表库，我会推荐后者，因为它与 DOM 很好地集成，允许使用 DOM 操作图表元素，最重要的是设置 DOM 事件。相比之下，Canvas 图表库必须重新发明 DOM 轮来管理事件。因此，除非您打算构建没有事件处理的静态图，否则 SVG/VML 解决方案应该会更好。

对于 SVG/VML 解决方案，有很多选择，包括：

Dojox Charting，如果你已经使用 Dojo toolkit 就好了 基于Raphael的解决方案

Raphael 是一个非常活跃、维护良好、成熟的开源图形库，具有非常好的跨浏览器支持，包括 IE 6 到 8、Firefox、Opera、Safari、Chrome 和 Konqueror。 Raphael 不依赖于任何 JavaScript 框架，因此可以与 Prototype、jQuery、Dojo、Mootools 等一起使用...

有许多基于 Raphael 的图表库，包括（但不限于）：

gRaphael，Raphael 图形库的扩展 Ico，使用基于单个函数调用的直观 API 来创建复杂图表

披露：我是one of the Ico forks on github的开发者。

【讨论】：

Grafico 和 Ico 是 Alex Young 最初 Ico 的两个不兼容的分支。所以说 Ico 变成了 Grafico 是不准确的。 Grafico 只是其中之一。

需要注意的是，Raphael 似乎不再维护。最后一次提交是在 2010 年 7 月左右。

刚刚下载了拉斐尔图表，非常喜欢但没有文档，只是为了预警。

@Alastair：Raphael 现在由 Sencha 赞助和开发……或者他们是这么说的 :)

Honeycomb 之前的 android 不支持 SVG。如果要求能够在当前广泛的 Android 设备上查看图表，则必须选择基于 Canvas 的解决方案。 This article on Sencha Touch Charts 详细介绍了移动图表，以及 Sencha Touch 为何选择 Canvas 路线。

【参考方案15】：

jqPlot 很棒。如果您的要求相当“正常”并且您只想绘制一些图表，那么您可能会被 js 图表选项的数量所淹没。假设您不想进行数小时的研究，只需使用 jqPlot，因为它可能是您最好的选择。它很好地涵盖了大多数人的大多数用例。一些替代方案专门针对某种类型的图表或基于特定用例构建。

【讨论】：

在做了一些研究之后我也这么认为。现在它看起来是最好的免费 JS 图表库之一。

【参考方案16】：

一个框架：http://www.simile-widgets.org/

一个基本的：http://www.filamentgroup.com/examples/charting_v2/index_2.php

好看：http://www.highcharts.com/

【参考方案17】：

还有另一个基于 SVG 的 javascript 库。它被称为Protovis，来自斯坦福可视化组

它还允许制作漂亮的交互式图形和可视化。

http://vis.stanford.edu/protovis/ex/

虽然它只适用于现代网络浏览器

更新：正如他们所说，protovis 团队已转移到另一个名为 d3.js（数据驱动文档）的库：

“Protovis 团队现在正在开发一个新的可视化库 D3.js，改进了对动画和交互的支持。D3 建立在 Protovis 中的许多概念之上”

现在可以在以下位置找到新库：

http://mbostock.github.com/d3/

更新 2：

“Rickshaw”是一个用于创建交互式时间序列图的 JavaScript 工具包。基于 d3.js，它大大简化了 d3.js 的工作，虽然功能稍逊一筹。

http://code.shutterstock.com/rickshaw/

【讨论】：

快速浏览一下，我认为 D3 不会“取代”Protovis。我会说团队“继续前进”是因为他们认为它更有趣、更前沿。

【参考方案18】：

Sencha 收购了 Raphael，现在他们的图表从版本 4 开始是纯 javascript。上面提到的 Emprise 和 HighCharts 是我最喜欢的两个。

http://www.sencha.com/

【参考方案19】：

更多不寻常的图表：http://thejit.org/

【参考方案20】：

查看ZingChart html5 Canvas, SVG, VML and Flash Charts。非常强大且兼容的库。我是 Zing 团队的一员 - 在推特上提及我们 @zingchart 或向 [e-mail] 提出任何问题。

【参考方案21】：

我最近在寻找一个 javascript 图表库，我评估了一大堆，最后选择了非常符合我要求的 jqplot。正如让文森特的回答所提到的，您实际上是在基于画布和基于 svg 的解决方案之间进行选择。

在我看来，主要的优点和缺点如下。如果您想构建高度动态/交互式图表，基于 SVG 的解决方案，如 Raphael（和分支）非常棒。或者，如果您的图表要求非常超出规范（例如，您想创建某种混合图表，或者您想出了其他人还没有想到的新可视化）。缺点是学习曲线和您必须编写的代码量。你不会在几分钟内敲出图表，准备投入一些真正的学习时间，然后编写大量代码来生成一个相对简单的图表。

如果您的图表要求相当标准，例如您想要一些折线图或条形图，或者可能是一两个饼图，但交互性有限，那么值得研究基于画布的解决方案。几乎没有任何学习曲线，您将能够在几分钟内获得基本图表，您无需编写大量代码，只需几行基本的 javascript/jquery 即可。当然，您将只能生成该库支持的特定类型的图表，通常仅限于各种风格的折线、条形、饼形。交互性选择将非常有限，也就是说，对于那里的许多库来说不存在，尽管一些有限的悬停效果可能是更好的。

我选择了基于画布的解决方案 JQplot，因为我只需要一些标准类型的图表。根据我的研究和对各种选择的尝试，我发现它功能相当全面（如果您只追求标准图表）并且非常易于使用，因此如果您的要求相似，我会推荐它。

总结一下，现在简单又想要图表，那就用JQplot吧。复杂/不同，时间紧迫，然后与拉斐尔和朋友一起去。

【参考方案22】：

http://code.google.com/apis/visualization/documentation/gallery.html

具有非常酷的交互选项，包括地图、仪表和图表。

【参考方案23】：

另一个是 RGraph：Javascript 图表和图形库：

http://www.rgraph.net

基于画布，因此速度很快，并且大约有 20 种不同的图表类型。它也可免费用于非商业用途！

【参考方案24】：

我可以推荐ArcadiaCharts。适用于 JavaScript 和 GWT 的全新专业图表库。无需插件即可在所有浏览器中运行。使用简单快速：只需几行代码即可创建美观的图表。 免费用于非商业用途。

【讨论】：

我在玩这个，我注意到没有办法在网站上获得商业许可证。事实上，网站并不清楚这是否是免费的。

你是对的。该网站已更新，您现在可以轻松找到符合您要求的商业许可证：ArcadiaCharts。

【参考方案25】：

Fusion charts 有一个看起来很有前途的新 javascript/jquery 库。

【参考方案26】：

如果您只需要条形图。我发布了一些我在旧项目中使用的代码。有人告诉我，最近版本的 IE 上的 VML 实现被破坏了，但 SVG 应该可以正常工作。可能会回到项目并发布一些我已经拥有的服务器端渲染器，也许还有 WebGL 渲染层。有链接：http://blog.conquex.com/?p=64

【参考方案27】：

我们刚刚为我们的新创业公司购买了TechOctave Charts Suite 的许可证。我强烈推荐他们。许可很简单。图表看起来很棒！它很容易上手，并且在我们需要的时候有一个强大的 API。我对代码的简洁性和可扩展性感到震惊。对我们的选择感到非常满意。

【参考方案28】：

可能不是 OP 想要的，但由于这个问题已成为 JS 图表库选项列表：jQuery Sparklines 真的很酷。

【参考方案29】：

作为某种迟到的答案，试试 d3.jshttp://mbostock.github.com/d3/

是 protovis 的延续。 浮动的最大区别在于支持的功能数量。 虽然 flot 可能更简单，但 d3.js 肯定更强大。