http://www.uirss.com/blog-39451-6411.html
图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等。可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和Web应用和项目的可靠性。
在这篇文章中,蓝蓝设计收集了值得网站设计开发者收藏的JavaScript图形图表库,适合各种图表需求。其中大部分都是免费而且开源的,希望大家能在下面的列表中找到适合自己需求的JavaScript图表和图形库。
1. JS Charts
![jscharts](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/jscharts1.jpg)
JS Charts 是个基于JavaScript的图表生成器,不需要任何编码。JS Charts 非常容易使用,只要用户使用客户端脚本(比如,在 web 浏览器中执行)。它不需要多余的插件和服务器模块,只需要下载 JS Charts 的脚本,准备好 XML,JSON 或者 JavaScript 数组数据。
2. Canvasjs![canvasjs](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/canvasjs.jpeg)
CanvasJS 是个易用的 HTML5 & JavaScript 图表库,基于 Canvas 元素。Graphs 可以通过设备渲染,包括 iPhone,iPad,Android,Windows Phone,Microsoft Surface,Desktops 等等。它允许用户创建适用于所有设备,不影响 web 应用程序的功能和可维护性的富仪表盘。CanvcasJS 有着非常漂亮的主题和超过传统的 Flash 和 SVG 图表 10x 倍以上的速度——生成轻量级,漂亮和响应式的仪表图。
3. Chart.js![chartjs](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/chartjs1.jpg)
Chart.js 是个简单的,面向对象的客户端图形库,用户可以用 6 中不同的方式来可视化数据。每个方式都是动画效果的,完全自定义,而且看起来非常好看,即使在 retina 显示。它使用 HTML5 canvas 元素,支持所有现代浏览器,并且支持 IE7/8。
4. Aristochart![aristochart](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/aristochart1.jpg)
Aristochart 是个高度自定义,灵活的折线 Canvas 图表库,允许用户集中精力在图表的审美方面,后台工作做得非常好。Aristochart 有个持续进步的社区,提供许多不断增长的主题给用户选择。
5. xCharts![xCharts](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/xCharts.jpeg)
xCharts 是一个使用 D3.js 来构建漂亮的可定制的数据驱动的 JavaScript图表库,他使用HTML,CSS,SVG实现图表,xCharts 被设计为一个动态的、流畅的、开放的和可定制化的库。
6. BonsaiJS![graphic-library](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/graphic-library.jpg)
BonsaiJS 是个轻量级的 JavaScript图形库,提供直观的图形 API 和 SVG 渲染器。主要特性包括:架构分离的运行器和渲染器;iFrame,Worker 和 Node 运行上下文;形状,路径,Assets(音频,图像,字体,subMovies),Keyframe 和常规动画,等等。支持现代化浏览器: Safari, Chrome 和 Firefox。
7. Sigma.js![sigmajs](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/sigmajs.jpeg)
Sigma.js 是个免费开源的 JavaScript图形库,使用 HTML5 canvas 元素。它的设计是特别为了在 web 界面分享交互式网络 Map 和动态展示网络数据库。
8. Morris.js![morrisjs](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/morrisjs.jpeg)
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![paperjs](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/paperjs1.jpeg)
Paper.js 是一个开源的向量图形脚本框架,基于 HTML5Canvas 开发。提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。
10. AmCharts![Amcharts](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/Amcharts.jpeg)
AmCharts 是个高级图表库,适用于所有数据的可视化。AmCharts 包括: Column, Bar, Line, Area, Step, Step without risers, Smoothed line, Candlestick, OHLC, Pie/Donut, Radar/ Polar, XY/Scatter/Bubble, Bullet, Funnel/Pyramid 等等。
11. Smoothie Charts![smoothiecharts](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/smoothiecharts.jpeg)
Smoothie Charts是个极小的图表库,专为实时流媒体数据设计的。Joe Walnes 想展示 WebSocket推动的实时的流数据。虽然很多图表库允许用户动态更新数据,但是没有一个是可以优化源源不断的流数据。
12. Dygraphs![dygraphs](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/dygraphs.jpeg)
Dygraphs 是个快速,灵活,开源的 JavaScript 图表库。它允许用户展示和解析密集的数据集。可以高亮需要强调的数据集。可以使用鼠标点击或者用鼠标拖动来缩放图表;可以修改数值或者点击条目来调整平均周期。
13. Grafico![Grafico](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/Grafico.jpeg)
Grafico 是 Grafico 是一个基于 Rapha?l 和 Prototype.js 构建的 JavaScript 图表库,提供了各种图表类型。这些漂亮的图表,有利于传递他们的信息。
14. Highchart JS![highchartjs](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/highchartjs1.jpg)
Highcharts JS 是一个制作图表的纯 Javascript类库,主要特性如下:兼容性:兼容当今所有的浏览器,包括 iPhone、IE 和火狐等等;对个人用户完全免 费;纯JS,无BS;支持大部分的图表类型:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散布图;跨语言:不管是 PHP、Asp.net 还是 Java 都可以使用。
15. Flotr![flotr](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/flotr.jpeg)
Flotr 是一个基于 Prototype 开发的 JavaScript绘图工具。支持图例,鼠标跟踪,图片区域选择,图片缩放,添加事件钩子(event hook),通过CSS设置样式等。
16. Flot![flot](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/flot1.jpg)
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](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/JFreeChart.jpeg)
JFreeChart 主要用来各种各样的图表,这些图表包括:饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及一些仪表盘等等。JFreeChart 项目历史悠久,而且有大量的开发者在维护。
18. Plotkit![PlotKit](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/PlotKit.jpeg)
PlotKit 是一个纯 JavaScript 绘图工具包。它支持 HTML Canvas 和 Adobe SVG。有着很完整的文档,方便用户使用。
19. Planetary.js![planetaryjs](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/planetaryjs1.jpg)
Planetary.js 是个令人称奇的创建交互式 web 地球仪的 JavaScript库。它使用 D3 和 TopoJSON 来解析和渲染地理信息。Planetary.js 使用基于插件的架构,甚至默认自身就是个插件!这使得 Planetary.js 非常灵活,而且它是允许用户完全自定义,包括颜色,大小,rotation 等等。更重要的是,用户可以在任意位置使用自定义的颜色和大小来显示动画“pings”;它还支持鼠标拖动和缩放,100% 免费和开源。
20. Ember Charts![ember-charts](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/ember-charts.jpg)
Ember Charts 是个图表库,使用 Ember.js 和 d3.js 框架构建的。它包括时间线,条形图,饼图和散点图,非常容易扩展和修改。这些图表组件都是开箱即用的,在图表交互和演示方面应用的很好。
21. Sparky![Sparky](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/Sparky.jpeg)
Sparky 是个免费的 JavaScript 波形图库,依赖于 Raphaël ,非常容易使用。支持多个图表类型(折线,条形,area),折线和区域图可以有多个颜色选择。
22. Envision.js![envision](http://uisdc.qiniudn.com/wp-content/uploads/2014/02/envision.jpeg)
Envision.js 是个 JavaScript 库,用来简化,快速创建交互式的 HTML5 可视化图表。它包括两个图表类型:时序图和 Finance ,提供 API 给开发者,用户可以直接自定义创建图表。这个库氏基于 Flotr2 和 HTML5 Canvas 的。它与框架无关,依赖于几个小的 JavaScript 库。