223

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

4

29 回答 29

160

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

不需要 Flash 的图形的 JavaScript 解决方案主要有 2 类:

  • 基于 Canvas,在 IE 中使用 ExplorerCanvas 渲染,而 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 分叉的开发者。

于 2010-01-25T23:21:08.923 回答
70

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

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

于 2008-09-23T09:07:13.337 回答
60

查看http://www.highcharts.com

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

于 2009-12-01T14:34:50.923 回答
36

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

于 2008-09-23T09:08:49.417 回答
15

还有另一个基于 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/

于 2011-02-16T19:00:40.267 回答
14

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

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

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

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

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

于 2011-04-19T12:54:56.027 回答
14

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

于 2010-06-03T12:23:16.637 回答
4

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

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

于 2012-03-16T06:26:34.923 回答
3

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

于 2008-09-23T10:27:23.127 回答
3

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

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

于 2009-10-30T01:38:33.900 回答
3

尝试PlotKit

于 2008-09-23T15:19:18.963 回答
3

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

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

于 2010-10-20T19:47:43.793 回答
3

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

http://www.rgraph.net

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

于 2011-07-17T13:39:03.797 回答
2

我最喜欢的(flot)已经提到过。

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

于 2008-09-23T10:10:46.380 回答
2

We just bought a license of TechOctave Charts Suite for our new startup. I highly recommend them. Licensing is simple. Charts look great! It was easy to get started and has a powerful API for when we need it. I was shocked by how clean and extensible the code is. Really happy with our choice.

于 2012-01-02T18:20:43.690 回答
2

查看Google Visualization API ,它是更简单的Chart API的一种概括

于 2008-09-27T22:44:56.540 回答
2

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

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

于 2008-09-23T09:11:55.993 回答
2

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

于 2008-09-23T11:34:12.030 回答
2

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

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

于 2011-04-20T21:54:33.653 回答
1

看看布拉夫。它是用于 Ruby 的 Gruff 图形库的 JavaScript 端口。

于 2008-09-23T10:13:47.700 回答
1

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

于 2008-09-23T09:09:40.273 回答
1

原型图就是你所需要的

于 2008-10-20T05:45:10.280 回答
1

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

于 2011-04-13T11:05:35.740 回答
1

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

http://www.sencha.com/

于 2011-02-28T13:35:40.043 回答
0

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

于 2011-11-11T09:40:59.553 回答
0

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

于 2011-08-25T09:44:36.930 回答
0

可能不是 OP 正在寻找的,但由于这个问题已成为 JS 图表库选项列表:jQuery Sparklines真的很酷。

于 2012-01-24T16:49:11.083 回答
0

查看ZingChart HTML5 Canvas、SVG、VML 和 Flash 图表。非常强大且兼容的库。我是 Zing 团队的一员 - 在推特 @zingchart上提及我们或向 support@zingchart.com 提出任何问题。

于 2011-04-18T16:21:51.837 回答
0

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

于 2011-10-27T16:01:53.677 回答