有人会推荐一个特定的 JavaScript 图表库——特别是一个根本不使用 Flash 的库吗?
29 回答
对于不需要 Flash 的纯 JavaScript 图表,有越来越多的开源和商业解决方案。在此回复中,我将仅介绍开源选项。
不需要 Flash 的图形的 JavaScript 解决方案主要有 2 类:
- 基于 Canvas,在 IE 中使用 ExplorerCanvas 渲染,而 ExplorerCanvas 又依赖于 VML
- 基于标准的浏览器上的 SVG,在 IE 中呈现为 VML
这两种方法各有利弊,但对于图表库,我推荐后者,因为它与 DOM 很好地集成,允许使用 DOM 操作图表元素,最重要的是设置 DOM 事件。相比之下,Canvas 图表库必须重新发明 DOM 轮来管理事件。因此,除非您打算构建没有事件处理的静态图,否则 SVG/VML 解决方案应该会更好。
对于 SVG/VML 解决方案,有许多选项,包括:
- Dojox Charting,如果您已经使用Dojo 工具包就好了
- 基于Raphael的解决方案
Raphael是一个非常活跃、维护良好且成熟的开源图形库,具有非常好的跨浏览器支持,包括 IE 6 到 8、Firefox、Opera、Safari、Chrome 和 Konqueror。Raphael 不依赖于任何 JavaScript 框架,因此可以与 Prototype、jQuery、Dojo、Mootools 等一起使用...
有许多基于 Raphael 的图表库,包括(但不限于):
披露:我是github 上的一个 Ico 分叉的开发者。
Highcharts 是一个用纯 JavaScript 编写的图表库,提供了一种将交互式图表添加到您的网站或 Web 应用程序的简单方法。Highcharts 目前支持折线图、样条图、面积图、面积图、柱形图、条形图、饼图和散点图类型。
它可能并不完全符合您的要求,但
Google 的 Chart API非常酷且易于使用。
还有另一个基于 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 的工作,虽然功能稍逊一筹。
我最近在寻找一个 javascript 图表库,并在最终确定非常符合我要求的jqplot之前评估了一大堆。正如让文森特的回答所提到的,您实际上是在基于画布和基于 svg 的解决方案之间进行选择。
在我看来,主要的利弊如下。如果您想构建高度动态/交互式图表,那么基于 SVG 的解决方案(如Raphael (和分支))非常有用。或者,如果您的图表要求非常超出规范(例如,您想要创建某种混合图表,或者您想出了一个其他人还没有想到的新可视化)。缺点是学习曲线和您必须编写的代码量。你不会在几分钟内敲出图表,准备投入一些真正的学习时间,然后编写大量代码来生成一个相对简单的图表。
如果您的图表要求是相当标准的,例如您想要一些折线图或条形图,或者可能是一两个饼图,但交互性有限,那么值得研究基于画布的解决方案。几乎没有任何学习曲线,您将能够在几分钟内获得基本图表,您无需编写大量代码,只需几行基本的 javascript/jquery 即可。当然,您将只能生成该库支持的特定类型的图表,通常仅限于各种风格的折线、条形、饼形。交互性选择将非常有限,也就是说,对于那里的许多库来说不存在,尽管一些有限的悬停效果可能与更好的库一起使用。
我选择了基于画布的解决方案 JQplot,因为我只需要一些标准类型的图表。根据我的研究和各种选择,我发现它功能齐全(如果您只使用标准图表)并且非常易于使用,因此如果您的要求相似,我会推荐它。
总结一下,现在简单又想要图表,那就用JQplot吧。复杂/不同,时间紧迫,然后与拉斐尔和朋友一起去。
jqPlot很棒。如果您的要求相当“正常”并且您只想绘制一些图表,那么您可能会被 js 图表选项的数量所淹没。假设您不想进行数小时的研究,只需使用 jqPlot,因为它可能是您最好的选择。它很好地涵盖了大多数人的大多数用例。一些替代方案专门针对某种类型的图表或在考虑特定用例的情况下构建。
作为某种迟到的答案,请尝试 d3.js
http://mbostock.github.com/d3/
它是 protovis 的延续。
浮动的最大区别在于支持的功能数量。
虽然 flot 可能更简单,但 d3.js 肯定更强大。
Flotr是另一个基于 Prototype 并受Flot启发的纯 Javascript 图表库
尝试PlotKit
我最喜欢的(flot)已经提到过。
但一定要调查Ortho。它非常适合树形图和时间表。
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.
尝试可以制作成图表的 MIT 明喻时间线 - http://simile.mit.edu/timeline/
dojo 图表库中有很多活动,很棒的是我在 AIR 应用程序中使用它也没有问题,非常酷!参见例如http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
http://code.google.com/apis/visualization/documentation/gallery.html
具有非常酷的交互选项,包括地图、仪表和图表。
看看布拉夫。它是用于 Ruby 的 Gruff 图形库的 JavaScript 端口。
不是 Javascript 库,但它可能是一个合适的替代方案 - 查看Google Charts,您可以在其中通过将查询字符串数据传递给他们的 Web 服务来生成图表。
原型图就是你所需要的
对于更不寻常的图表:http ://thejit.org/
Sencha 收购了 Raphael,现在他们的图表从版本 4 开始是纯 javascript。上面提到的 Emprise 和 HighCharts 是我最喜欢的两个。
如果您只需要条形图。我发布了一些我在旧项目中使用的代码。有人告诉我,最近版本的 IE 上的 VML 实现被破坏了,但 SVG 应该可以正常工作。可能会回到项目并发布一些我已经拥有的服务器端渲染器,也许还有 WebGL 渲染层。有一个链接:http ://blog.conquex.com/?p=64
我可以推荐ArcadiaCharts。适用于 JavaScript 和 GWT 的全新专业图表库。无需插件即可在所有浏览器中运行。使用简单快速:只需几行代码即可创建美观的图表。免费用于非商业用途。
可能不是 OP 正在寻找的,但由于这个问题已成为 JS 图表库选项列表:jQuery Sparklines真的很酷。
查看ZingChart HTML5 Canvas、SVG、VML 和 Flash 图表。非常强大且兼容的库。我是 Zing 团队的一员 - 在推特 @zingchart上提及我们或向 support@zingchart.com 提出任何问题。
Fusion chart有一个新的 javascript/jquery 库,看起来很有前途。