分类 标签 存档 ME! 黑客派 订阅 搜索

用于展现图表的 50 种 JavaScript 库

265 浏览

在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些 JavaScript 库,从而更有效地达到想要的目标。最近,TechSlide上的一篇文章总结了 50 种用于展现图表的 JavaScript 库,并对每种库做了简要的说明。这对于想要选择合适 JavaScript 库的开发者很有参考意义。


文章作者首推的库是D3,他说到:



它非常让人惊叹,我很喜欢它的简洁性。它的文档非常完备,源代码托管在 GitHub 上,而且不断会添加新的示例。有一种叫做Tributary的 创建 D3 原型的工具,其中有很多非常棒的示例。这个库非常好,以至于 xcharts、nvd3、Rickshaw、Cubism.js、dc.js、 xkcd 都是基于它构建的。如果你想要做出优秀的自定义数据可视化效果,那么 D3 可能是你最佳选择,或者对于更简单的图,你可以选择上面所提到的基于 D3 的库。最后,我强烈推荐阅读 Scott Murray 关于 D3 的免费书《Interactive Data Visualization for the Web》和《Dashing D3 tutorials》。



接下来,他列举并简要说明了其它用于展现数据、制作表格和图表的 JavaScript 库,列在前 20 位的如下:



  • HighCharts——它非常强大,你可以在JSFiddle中查看和编辑大量示例。它不免费,但拥有很多客户(IBM、NASA、MasterCard 等)。它还向下兼容 IE 8。

  • jqPlot——如果你已经在使用 jQuery,不想为 HighCharts 付费,而且情况很简单,不需要 D3 那样复杂的库,那么 jqPlot 是很好的选择。

  • dygraphs——一种开源的 JavaScript 库,可以做出可交互、可缩放的时间线图表。对于大数据集合非常适用。

  • Protovis——和 D3 出自同一支团队之手,是一种免费的开源库。你可以查看这个stackoveflow 页面来了解 D3 与其的区别。

  • Flot Charts——与 jqPlot 一样,Flot 是一种针对 jQuery 的纯 JavaScript 库,专注于简单的用法、引人注目的外观和交互特性。

  • Google Chart Tools——强大、免费、易于使用。内容丰富,从最简单的线状图到负责的层级树状图都有,在展示页面中提供了大量设计良好的图表类型。

  • dc.js——基于 D3 的 JavaScript 图表库,拥有本地跨过滤器(crossfilter)的支持,并让你可以高效率地浏览大型多维数据集。

  • xcharts——基于 D3 用于构建自定义图表的库。

  • nvd3——让你可以构建可重用的图表和图表组件,同时具有 d3.js 的强大功能。

  • rickshaw——用于创建可交互时间线图表的 JavaScript 工具。

  • Cubism.js——用于可视化时间线的 D3 插件。使用了 Cubism 构建更好的实时仪表盘,可以从 Graphite、Cube 和其他源拉取数据。

  • xkcd——让你可以使用 D3 在 JavaScript 中做出 XKCD 样式的图表。

  • jQuery Sparklines——一种 jQuery 插件,可以直接在浏览器中创建小型的内嵌图表。

  • peity——一种简单的 jQuery 插件,可以把元素的内容转换成简单的饼图、线图和柱状图。

  • BonsaiJS——一种轻量级的图形库,拥有直观的图形 API 和 SVG 渲染器。

  • Flotr——为 Prototype.js 所用的 JavaScript 图表库。它拥有很多特性,像对负数值的支持、鼠标跟踪、选定支持、缩放支持、事件挂钩、CSS 样式支 持、在画布(canvas)中包含文字、旋转的标签、渐变颜色、图形标题和子标题、电子表格、CSV 数据下载等等。

  • ProtoChart——物如其名,ProtoChart 让你可以使用 JavaScript 和 Prototype 创建很漂亮的图表。它是一种开源库。

  • Flotr2——HumbleSoftware 当前正在做的项目,让你可以使用 Canvas 和 JavaScript 创建图表。

  • jQuery-Visualize——HTML 的 table 元素驱动的 HTML5 canvas 图表。也是针对 jQuery 的图表插件。

  • JS Charts——基于 JavaScript 的图表生成器,只需要很少甚至不需要编码。免费版会有水印,可以通过付费去掉。

  • ……


文章中还列举的 JavaScript 库有:PlotKitMilkChartmoochartmoowheeltable2chartCanvas 3D GraphTufteGraphArborJSTimePlotgRaphaelICOElychartsZingChartRGraphDojo ChartingBluffcanvasXpressccchartJITJSXGraphSmoothie ChartsYUI ChartsamchartsEmprise JavaScript ChartsFusionChartsJavaScript Diagram BuilderjGraphSencha Touch ChartsStyle ChartAwesomeChartJS等,都各有千秋,如果你对这些库感兴趣的话,可以访问相应的链接或者阅读原文


这个列表对于想要利用 JavaScript 技术创建图表展现数据的开发者来说,非常具有参考意义,你可以从中选择最适合的库,从而高效、高质量地完成任务。


 


转自 http//www.infoq.com/cn/news/2013/01/50-javascript-chart-lib


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

评论  
留下你的脚步
推荐阅读