JavaScript图表库


223

有人会推荐一种特定的JavaScript图表库-特别是根本不使用Flash的图书馆吗?

Answers:


160

越来越多的不需要Flash的用于纯JavaScript制图的开源和商业解决方案。在此回复中,我将仅介绍开放源代码选项。

有两种主要的JavaScript解决方案,它们不需要Flash的图形解决方案:

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

两种方法都有优点和缺点,但对于制图库,我会推荐后者,因为它与DOM集成良好,可以使用DOM操作图表元素,最重要的是设置DOM事件。相比之下,Canvas图表库必须重新发明DOM轮以管理事件。因此,除非您打算构建没有事件处理的静态图,否则SVG / VML解决方案应该更好。

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

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

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

  • gRaphael是Raphael图形库的扩展
  • Ico,具有基于单个函数调用的直观API,可以创建复杂的图表

披露:我是github上Ico分支之一的开发人员。


5
Grafico和Ico是Alex Young最初的Ico的两个不兼容的分支。所以说Ico成为Grafico并不准确。Grafico只是其中一个分支。
让·文森特

应当指出的是,拉斐尔似乎不再维持。上一次提交是在2010年7月左右。
Alastair Pitts

1
只是下载了拉斐尔图表,喜欢很多但没有文档,只是为了警告。
轨道

@Alastair:Raphael现在是由Sencha赞助和开发的...或者他们说:)
Roy Tinker

1
蜂巢之前的Android不支援SVG。如果需要能够在广泛的当前Android设备上查看图表,则必须选择基于Canvas的解决方案。有关Sencha Touch Charts的这篇文章全面介绍了移动图表的更多详细信息,以及Sencha Touch为什么选择Canvas路线。
Pallavi Anderson

70

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

另外,ExtJS 4.0引入了一套非常强大的图表-非常强大,并且旨在处理实时数据。


2
这与Geoff Dalgas用来在StackOverflow上创建信誉图的库相同。这确实是一个不错的工具包。
Charles Roper

我对浮点数的唯一真正抱怨是,在IE中渲染时,它在100%以外的任何缩放级别上都看起来很糟糕(即,所有线条/块都无法一起缩放-对于那些使用高分辨率显示器的人来说,这绝对是一个问题)。
Bittercoder

2
浮点图看起来比我看过的其他图表更好。下面是20个的JavaScript库图表链接:javascript.open-libraries.com/utilities/chart/...
乙七

我也喜欢flot,以前在不同的Web应用程序上使用过多次。
fedmich

1
我一般都喜欢海军报,但它想要的所有数据是数字,所以如果你想情节像销售每个客户(通过名称)或每个产品将无法正常工作
扎卡里ķ

60

查看http://www.highcharts.com

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


12
值得指出的是,该库可免费用于非商业用途,但单站点和多站点都需要付费。但是,这似乎是一个相当合理的价格。
Nick Spacek 2010年

起初它是一个无耻的插件,但它们看起来真的很棒!!虽然它不是免费的商业用途,但无论定价是否合理,我都没有任何参考,但乍一看看起来还可以!
Trufa 2010年

这与CloudFlare.com中使用的图表库相同,而且看起来很棒。我正要使用DevExpress图表库,该库是ASP.NET,当我偶然发现highcharts库时会在服务器上渲染和图像。我立刻确信这是要走的路。当我发现CloudFlare具有我见过的最引人注目的仪表板/分析之一时,也使用了它,我也被卖了!我目前正在对其进行试验,并且在我第一次尝试将图表嵌入到网页中时就起作用了,所以看起来也很容易使用!
Loudenvier

1
Highcharts又有一票。我目前正在使用它,它很棒。支持jQuery,Mootools和Prototype,并且非常容易设置和使用。
gnclmorais 2011年

1
Stackoverflow本身使用highcharts stackoverflow.com/users/22656/jon-skeet?tab=reputation
Scott

36

它可能并不完全符合您的要求,但是
Google的Chart API非常酷并且易于使用。


16
它不是javascript
user102008

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

@ user102008:现在是:)(如果愿意,您仍然可以访问基于图像的API
Spycho 2011年

Google Chart API不能离线使用,不利于移动开发。
oldwizard 2012年

我需要做一个卧式烛台,有人知道Google Chart API是否可行吗?
汤姆·斯蒂克

15

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

它还允许制作精美的交互式图形和可视化图像。

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

虽然仅适用于现代Web浏览器

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

“ Protovis团队现在正在开发新的可视化库D3.js,并增强了对动画和交互的支持。D3建立在Protovis的许多概念之上”

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

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

更新2:

“人力车”是用于创建交互式时间序列图的JavaScript工具箱。尽管基于d3.js的功能稍差一些,但它简化了d3.js的工作。

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


快速浏览后,我认为D3不会“取代” Protovis。我要说的是团队“继续前进”,因为他们认为这是更加有趣和前沿的。
David J.

14

我最近在寻找一个javascript图表库,并在最终决定使用jqplot之前评估了一大堆选择非常适合我的。正如Jean Vincent的回答所提到的,您实际上是在基于画布的解决方案和基于svg的解决方案之间进行选择。

在我看来,主要优点和缺点如下。如果您要构建高度动态/交互式的图表,则基于Ravel(和分支)之类的基于SVG的解决方案非常有用。或者,如果您对制图的要求远远超出了常规(例如,您想创建某种混合图,或者您想出了一种新的可视化效果,而其他人还没有想到)。缺点是学习曲线和您必须编写的代码量。您不会在几分钟之内就搞定图表,准备投入一些实际的学习时间,然后编写大量的代码来生成相对简单的图表。

如果您的制图要求是合理的标准,例如,您需要一些交互性有限的折线图或条形图,或者一两个饼图,那么值得考虑基于画布的解决方案。几乎没有学习曲线,您将能够在几分钟之内获得基本图表,您无需编写大量代码,只需几行基本的javascript / jquery就可以了。当然,您将只能生成库支持的特定类型的图表,通常仅限于各种样式的折线,条形图,饼图。交互性选择将受到极大的限制,也就是说,对于其中的许多库来说,都不存在,尽管更好的库可能会产生一些有限的悬停效果。

我选择了JQplot,它是基于画布的解决方案,因为我只需要一些标准类型的图表即可。通过我的研究和各种选择,我发现它功能齐全(如果您只追求标准图表)并且非常易于使用,因此如果您的要求相似,我建议您这样做。

总结起来,现在就简单和想要图表,然后使用JQplot。复杂/不同,没有时间紧迫,然后与Raphael和朋友一起去。


14

jqPlot很棒。如果您的需求相当“正常”,而您只想绘制一些图表,那么您可能会因为js图表选项的数量而感到不知所措。假设您不想进行数小时的研究,请选择jqPlot,因为这可能是您最好的选择。它很好地涵盖了大多数人的大多数用例。一些替代方法专门针对某种类型的图表或在考虑特定用例的情况下构建。


经过研究后,我也这么认为。现在,它看起来像是可用的最佳免费JS图表库之一。
jturcotte




3

我建议使用gRaphaël进行纯JavaScript图表绘制,并为其构建的纯JavaScript矢量图形库(Raphaël)。

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


1
只是想提醒大家,此库没有文档,尽管它非常好。
轨道


3

另一个是RGraph:JavaScript图表和图形库:

http://www.rgraph.net

基于画布,因此运行速度很快,大约有20种不同的图表类型。它也可以免费用于非商业用途!






2

我们刚刚为新创业公司购买了TechOctave Charts Suite的许可证。我强烈推荐他们。许可很简单。图表看起来很棒!它很容易上手,并且在需要时具有强大的API。代码多么干净和可扩展,令我感到震惊。真的很满意我们的选择。








0

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


我当时正在玩这个游戏,但我发现无法在该网站上获得商业许可证。实际上,该网站尚不清楚是否免费。
zumalifeguard

你是对的。该网站已经更新,因此您现在可以轻松地找到符合您要求的商业许可证: ArcadiaCharts
Hoang-Tran Vo


0

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



By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.