JavaScript图表库

有人会推荐一个特定的JavaScript图表库 – 特别是一个根本不使用Flash?

纯JavaScript图表的开源和商业解决scheme越来越多,不需要Flash。 在这个回应中,我只会介绍开源的选项。

有两个不需要Flash的graphicsJavaScript解决scheme的主要类:

  • 使用ExplorerCanvas在IE中呈现,基于canvas,在IE中呈现依赖于VML
  • SVG在基于标准的浏览器上,在IE中呈现为VML

这两种方法都有优点和缺点,但是对于图表库我推荐以后,因为它与DOM很好地集成,允许使用DOM操作图表元素,最重要的是设置DOM事件。 相比之下,Canvas制图库必须重新发明DOM轮pipe理事件。 所以除非你打算在没有事件处理的情况下构build静态图,否则SVG / VML解决scheme应该更好。

对于SVG / VML解决scheme,有许多选项,包括:

  • Dojox图表 ,如果您已经使用了Dojo工具包,
  • Raphael为基础的解决scheme

Raphael是一款非常活跃,维护良好且成熟的开源graphics库,支持IE 6至8,Firefox,Opera,Safari,Chrome和Konqueror等跨浏览器。 Raphael不依赖于任何JavaScript框架,因此可以与Prototype,jQuery,Dojo,Mootools等一起使用。

有许多基于Raphael的图表库,包括(但不限于):

  • g Raphael,拉斐尔graphics库的扩展
  • Ico用一个基于单一函数调用的直观的API来创build复杂的图表

披露:我是一个在github上的Ico叉子的开发者。

如果您使用的是jQuery,我发现flot非常好 – 请尝试一下这些示例 ,看看它们是否适合您的需求,但是我发现它们可以完成我目前项目所需的大部分工作。

另外, ExtJS 4.0引入了一套很棒的图表 – function非常强大,可以和实时数据一起工作。

退房http://www.highcharts.com

Highcharts是一个用纯JavaScript编写的图表库,提供了一种向您的网站或Web应用程序添加交互式图表的简单方法。 Highcharts目前支持线,样条线,面积,面积,线条,栏,饼图和散点图types。

这可能不是你正在寻找的,但是
Google的Chart API非常酷且易于使用。

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

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

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

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

更新: protovis团队已经转移到另一个名为d3.js(数据驱动的文档)的库,因为他们说:

“Protovis团队现在正在开发一个新的可视化库D3.js,改进了对animation和交互的支持.D3基于Protovis的许多概念”

新图书馆现在可以在:

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

更新2:

“Rickshaw”是创build交互式时间序列图的JavaScript工具包。 基于d3.js,简化了很多与d3.js的工作,虽然有点不太强大。

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

我最近正在寻找一个JavaScript图表库,在评估了一大堆之后,终于find了符合我的要求的jqplot 。 正如让·文森特的答案中提到的,你真的可以select基于canvas和svg的解决scheme。

在我看来,主要的利弊如下。 如果你想构build高度dynamic/交互式的图表,像Raphael (和分支)的基于SVG的解决scheme是非常好的。 或者如果你的图表需求超出了常态(例如,你想创build某种混合图表,或者你想出了一个新的可视化图表,那么没有其他人想到了)。 缺点是学习曲线和你必须写的代码量。 你不会在几分钟之内甩掉图表,准备投入一些真正的学习时间,然后写出大量的代码来产生一个相对简单的图表。

如果您的制图要求是合理标准的,例如您需要一些线条或条形图,或者可能是一个或两个饼图,交互性有限,那么值得关注基于canvas的解决scheme。 几乎没有任何学习曲线,你可以在几分钟内得到基本的图表,你不需要写很多代码,只需要几行基本的javascript / jquery就可以了。 当然,你只能生成图书馆支持的特定types的图表,通常只限于各种风格的线条,条形,饼图。 交互性的select将是非常有限的,也就是说,在那里的许多图书馆是不存在的,虽然一些有限的hover效果是可能的,更好的。

我用JQplot这是一个基于canvas的解决scheme,因为我只真的需要一些标准types的图表。 从我的研究和玩的各种select,我发现它是相当全面的function(如果你只是在标准图表之后),非常容易使用,所以我会build议,如果你的要求是相似的。

总结一下,现在简单和想要图表,然后用JQplot去。 复杂/不同的时间没有按,然后去与拉斐尔和朋友。

jqPlot很棒。 如果你的要求相当“正常”,你只是想绘制一些图表,你可能会被js图表选项的数量所淹没。 假设你不想做几个小时的研究,只需要用jqPlot,因为这可能是你最好的select。 它涵盖了大多数人的大多数用例。 其中一些替代scheme专门针对某种types的图表,或者考虑到某个用例而构build的。

作为某种迟到的答案,请尝试d3.js
http://mbostock.github.com/d3/

这是protovis的延续。
flot的最大区别在于支持的function数量。
虽然flot可能更简单,d3.js肯定更强大。

Flotr是另一个基于Prototype的纯Javascript图表库,受Flot的启发

试试PlotKit

我build议使用gRaphaël来完成纯JavaScript图表,以及它所构build的纯JavaScriptvectorgraphics库( Raphaël )。

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

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

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

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

另一个是RGraph:Javascript图表和图表库:

http://www.rgraph.net

基于canvas的速度很快,大概有20种不同的图表types。 它也是免费的非商业用途!

我最喜欢的(flot)已经被提及。

但一定要调查Ortho 。 树图和时间表非常好。

在道场图表库中有很多活动,而且我在AIR应用程序中使用它,没有任何问题,太棒了! 请参阅http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/

查看Google可视化API ,这是简单的Chart API的一般化

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

有非常酷的互动选项,包括地图,仪表和图表。

我们刚刚为我们的新创业公司购买了TechOctave Charts套件的许可证。 我强烈推荐他们。 许可证很简单。 图表看起来不错! 在我们需要的时候很容易上手,并且有一个强大的API。 我感到震惊的代码是多么干净和可扩展。 真的很满意我们的select。

尝试麻省理工学院的明示时间表,可以将其制作成图表 – http://simile.mit.edu/timeline/

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

不是一个Javascript库,但它可能是一个合适的select – 检查谷歌图表 ,您可以生成图表通过传递查询string数据到他们的Web服务。

看看布拉夫 。 这是Ruby的Gruffgraphics库的JavaScript端口。

Sencha收购了Raphael,现在他们的图表是纯粹的JavaScript版本4.上面提到的Emprise和HighCharts是我的两个最爱。

http://www.sencha.com/

对于更不寻常的图表: http : //thejit.org/

Protochart是你所需要的

我可以推荐ArcadiaCharts 。 一个全新的JavaScript和GWT专业图表库。 在没有插件的所有浏览器中运行。 使用简单快捷:只需几行代码即可创build出色的图表。 免费用于非商业用途。

融合图表有一个新的JavaScript / jQuery库,看起来很有希望。

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

可能不是什么操作系统正在寻找,但因为这个问题已经成为JS图表库选项列表: jQuery迷你图非常酷。

查看ZingChart HTML5canvas,SVG,VML和Flash图表 。 非常强大和兼容的库。 我在Zing团队 – 在twitter @zingchart上提及我们,或者发送任何问题到support@zingchart.com。