开发者必了解的35个JavaScript图表和图形库

2015年10月25日 08:10 167 次阅读 来源: 慧都控件网 作者: 路人甲
摘要 图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”。几乎每个开发或者项目管理团队都需要图表或者图形来简化理解,可视化复杂的数据和 web 应用工作流。可视化图表可以帮助开发者更容易理解复杂d数据,提高生产的效率和 web 应用和项目的可靠性。在这篇文章中,将罗列出排名前 35 的 JavaScript 图表和图形库,适合各种从简单图表到复杂图表的需求。大部分的 J...

        图表是数据图形化的表示,也就是“通过形象的图表来展示数据,比如条形图,折线图,饼图”。几乎每个开发或者项目管理团队都需要图表或者图形来简化理解,可视化复杂的数据和 web 应用工作流。可视化图表可以帮助开发者更容易理解复杂d数据,提高生产的效率和 web 应用和项目的可靠性。


        在这篇文章中,将罗列出排名前 35 的 JavaScript 图表和图形库,适合各种从简单图表到复杂图表的需求。大部分的 JavaScript 图表和图形库都是免费而且开源的,希望大家能在下面的列表中找到适合自己需求的 JavaScript 图表和图形库。


1.FusionCharts

FusionCharts是跨平台、跨浏览器的JavaScript/HTML图表组件。 FusionCharts支持 ASP、 ASP.NET、 PHP、 JSP、 ColdFusion、 Ruby on Rails、 JavaScript、甚至简单的HTML页面。它是你值得信赖的JavaScript图表解决方案,目前在全球有45万用户选择Fusioncharts来制作专业的JavaScript图表。



2. Ember Charts

Ember Charts 是个图表库,使用 Ember.js 和 d3.js 框架构建的。它包括时间线,条形图,饼图和散点图,非常容易扩展和修改。这些图表组件都是开箱即用的,在图表交互和演示方面应用的很好。


3. Chart.js

Chart.js 是个简单的,面向对象的客户端图形库,用户可以用 6 中不同的方式来可视化数据。每个方式都是动画效果的,完全自定义,而且看起来非常好看,即使在 retina 显示。它使用 HTML5 canvas 元素,支持所有现代浏览器,并且支持  IE7/8。


4. Aristochart

Aristochart 是个高度自定义,灵活的折线 canvas 图表库,允许用户集中精力在图表的审美方面,后台工作做得非常好。Aristochart 有个持续进步的社区,提供许多不断增长的主题给用户选择。


5. xCharts

xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript 图表库,他使用 HTML,CSS,SVG 实现图表,xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。


6. BonsaiJS

BonsaiJS 是个轻量级的 JavaScript 图形库,提供直观的图形 API 和 SVG 渲染器。主要特性包括:架构分离的运行器和渲染器;iFrame,Worker 和 Node 运行上下文;形状,路径,Assets(音频,图像,字体,subMovies),Keyframe 和常规动画,等等。支持现代化浏览器: Safari, Chrome 和 Firefox。


7. Sigma.js

Sigma.js 是个免费开源的 JavaScript 图形库,使用 HTML5 canvas 元素。它的设计是特别为了在 web 界面分享交互式网络 Map 和动态展示网络数据库。


8. Morris.js

Morris.js 是个轻量级的 JavaScript 库,使用 jQuery 和 Rapha&enuml 来绘制时序图。 Morris.js 生命周期是从代码驱动 howmanyleft.co.uk 图表开始的。它支持的浏览器有:  IE6+, Safari/Chrome/Firefox, iOS 3+ 和 Android 3+。它的公共 API 非常的小,只有一个函数: Morris.Line (选项),包括了许多配置选项。


9. Paper.js

Paper.js 是一个开源的向量图形脚本框架,基于 HTML5 Canvas 开发。提供清晰的场景图、DOM 和大量强大的功能用来创建各种向量图和贝塞尔曲线。


10. JavaScript Charts

JavaScript Charts是一款兼容性好的JavaScript、HTML5图表开发工具,能满足大部分的开发需求,包括序列图表(列型图,条形图,线型图,面积图,步骤折线图,平滑折线图,蜡烛图,ohlc图),饼图/环形图,雷达图/极区图以及xy图/散点图/气泡图。我们的图表是现代标准化的兼容图表集,提供无与伦比功能与性能。



11. Smoothie Charts

Smoothie Charts 是个极小的图表库,专为实时流媒体数据设计的。Joe Walnes 想展示 WebSocket 推动的实时的流数据。虽然很多图表库允许用户动态更新数据,但是没有一个是可以优化源源不断的流数据。


12. Dygraphs

Dygraphs 是个快速,灵活,开源的 JavaScript 图表库。它允许用户展示和解析密集的数据集。可以高亮需要强调的数据集。可以使用鼠标点击或者用鼠标拖动来缩放图表;可以修改数值或者点击条目来调整平均周期。


13. Grafico

Grafico 是 Grafico 是一个基于 Raphaël 和 Prototype.js 构建的 JavaScript 图表库,提供了各种图表类型。这些漂亮的图表,有利于传递他们的信息。


14. Highchart JS

Highcharts JS 是一个制作图表的纯 Javascript 类库,主要特性如下:兼容性:兼容当今所有的浏览器,包括 iPhone、IE 和火狐等等;对个人用户完全免费;纯 JS,无 BS;支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;跨语言:不管是 PHP、Asp.net 还是 Java 都可以使用,它只需要三个文件:一个是 Highcharts 的核心文件 highcharts.js,还有 a canvas emulator for IE 和 Jquery 类库或者 MooTools 类库;提示功能:鼠标移动到图表的某一点上有提示信息;放大功能:选中图表部分放大,近距离观察图表;易用性:无需要特殊的开发技能,只需要设置一下选项就可以制作适合自己的图表;时间轴:可以精确到毫秒。


15. Flotr

Flotr 是一个基于 Prototype 开发的 javascript 绘图工具。支持图例,鼠标跟踪,图片区域选择,图片缩放,添加事件钩子(event hook),通过 CSS 设置样式等。


16. Flot

Flot 是受 Plotr 和 PlotKit 的启发,Ole Laursen 基于 jquery 开发了一个图表绘制(WEB Chart)插件并命名为 flot。 flot 是个纯 JavaSript 库,专注于简单的使用方式,迷人的外观和交互式特性。支持的浏览器有: Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+。


17. jFreeChart

JFreeChart  主要用来各种各样的图表,这些图表包括:饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。JFreeChart 项目历史悠久,而且有大量的开发者在维护。


18. Plotkit

PlotKit 是一个纯 javascript 绘图工具包。它支持 HTML Canvas 和 Adobe SVG。有着很完整的文档,方便用户使用。


19. JS Charts

JS Charts 是个基于 JavaScript 的图表生成器,不需要任何编码。JS Charts 非常容易使用,只要用户使用客户端脚本(比如,在 web 浏览器中执行)。它不需要多余的插件和服务器模块,只需要下载 JS Charts 的脚本,准备好 XML,JSON 或者 JavaScript 数组数据。


20. Canvasjs

CanvasJS 是个易用的 HTML 5 & JavaScript 图表库,基于 Canvas 元素。Graphs 可以通过设备渲染,包括 iPhone,iPad,Android,Windows Phone,Microsoft Surface,Desktops 等等。它允许用户创建适用于所有设备,不影响 web 应用程序的功能和可维护性的富仪表盘。CanvcasJS 有着非常漂亮的主题和超过传统的 Flash 和 SVG 图表 10x 倍以上的速度——生成轻量级,漂亮和响应式的仪表图。


21. Sparky

Sparky 是个免费的 JavaScript 波形图库,依赖于 Raphaël ,非常容易使用。支持多个图表类型(折线,条形,area),折线和区域图可以有多个颜色选择。


22. Envision.js

Envision.js 是个 JavaScript 库,用来简化,快速创建交互式的 HTML5 可视化图表。它包括两个图表类型:时序图和 Finance ,提供 API 给开发者,用户可以直接自定义创建图表。这个库氏基于 Flotr2 和 HTML5 Canvas 的。它与框架无关,依赖于几个小的 JavaScript 库。


23. Dc.js

dc.js 是个 JavaScript 图表库,有着原生的 crossfilter, 支持和允许高效展示大型多维数据集(基于 crossfilter 的示例);图表使用 dc.js 渲染,是使用原生数据驱动,所以能得到用户的实时反馈;dc.js 最大的亮点在于能提供一个简单而强大的 JavaScript 库,能进行数据可视化和分析;不仅支持桌面浏览器还支持移动端。


24. ElyCharts

Elycharts 是一个易于使用的,可定制的 JavaScript 图表绘制组件。这个组件可用于绘制大部分常用的图表类型包括:line, column, are, bar, pie, sparklines and combinations。它支持多种交互式功能包括:鼠标跟踪、事件处理、利用各种动画高亮显示选择中的区域,Tooltip,HTML 锚点等。可以动态修改数据,并以漂亮的动画效果展示图表中的变化。图表利用 SVG/VML 技术生成,基于 jQuery + Raphaël开发。


25. AwesomeChartJS

AwesomeChartJS Awesome Chart JS 是一个 Javascript 生成图表的类库,它利用了 HTML5 的 canvas 标签来创建统计图表。此类库就是为了减轻开发者的工作量,使用它只需书写几行代码便能生成漂亮的图表。


26. Arbor.js

Arbor.js 是一个利用 Web Works 和 jQuery 创建的可视化图形库,它为图形组织和屏幕刷新处理提供了一个高效的、力导向的布局算法。


27. CanvasXpress

canvasXpress 是一个基于 HTML5 canvas 标签实现的 JavaScript 图表类库,它能够支持线性图、柱形图、饼图和热点图等多种常见的图表类型。它所生成的图表交互性很强,鼠标放上去时会动态显示值。除此之外,它也具有相当高的可定制性,可设置图表的文字、颜色和要显示/隐藏的元素等。当然更重要的一点是,虽然它使用了 HTML5,但是依然支持 IE6 浏览器。


28. JSXGraph

JSXGraph 是一个支持各种浏览器的交互式几何图库绘制。JSXGraph 使用 SVG 和 VML。它支持很多从基本到高级的数学函数,使得创建复杂的可视化图表变得更加容易。


29. Rickshaw

Rickshaw 是一个用于绘制时序图的简单 jS 库,基于 Mike Bostock’s delightful D3 库构建。这些图表既可显示静态历史数据,又可显示动态实时更新数据。Rickshaw是一个用于创建Shutterstock的交互式时序图的JavaScript工具包。


30. rGraph

RGraph 是基于 HTML5 canvas 标签的 HTML5 canvas 图形库,支持 20 种不同的可视化类型。使用 canvas 标签,RGraph 创建“HTML5 图表”,意味着更快的 web 页面加载和更少的 web 服务器加载。这能帮助减小 web 页面的大小,低能耗和更快的浏览速度。


31. Planetary.js

Planetary.js 是个令人称奇的创建交互式 web 地球仪的 JavaScript 库。它使用 D3 和 TopoJSON 来解析和渲染地理信息。Planetary.js 使用基于插件的架构,甚至默认自身就是个插件!这使得 Planetary.js 非常灵活,而且它是允许用户完全自定义,包括颜色,大小,rotation 等等。更重要的是,用户可以在任意位置使用自定义的颜色和大小来显示动画“pings”;它还支持鼠标拖动和缩放,100% 免费和开源。


32. Graph Dracula

Dracula 是用一系列的工具来显示和布局互动图表,包括各种相关的算法。它只是纯 JavaScript 和 SVG ,并无 Flash,Java,其他插件。它非常容易使用,用户可以很简单的自定义任意的元素。


33. Bluff

Bluff 是个 JavaScript 的 Ruby 的 Gruff graphing library 端口。它支持所有 Gruff 的特性,但是有着最小的依赖。用户只需要运行一个第三方脚本: JS.Class 副本(压缩后只有 2.6kB ) 和 Google 的 ExCanvas 副本,用来支持 IE 中的 canvas。这两个脚本在 Bluff 中都有下载。Bluff 自身压缩后大小大概有 11KB 。


34. Pizza Pie Chart

Pizza Pie Charts 是个响应式饼图图表,基于 Adobe Snap SVG 框架,通过 HTML 标记和 CSS 来替代 JavaScript 对象,更容易集成各种先进的技术。


35. jGraph

HTML5 图表组件,完全支持 l IE 6-8 和触屏设备。 JGraph 自 2001 年来就一直提供最先进的图表软件组件,是第一个流行的 JGraph Swing 库。然后在 2005 年走在时代的前沿开发 mxGraph。

还可以输入136 讨论区:
评 论