前端数据可视化插件（一）图表

摘要：

　　在大数据时代，很多时候我们需要在网页中显示数据统计报表，从而能很直观地了解数据的走向，开发人员很多时候需要使用图表来表现一些数据。随着Web技术的发展，从传统只能依靠于Flash、IE的vml，各个浏览器尚不统一的svg，到如今规范统一的canvas、svg为代表的html5技术，表现点、线、面要素的技术已经越来越规范成熟。我把前端数据可视化分为了五种：

1. 图表
2. 图谱
3. 地图
4. 关系图
5. 立体图

我将按照顺序介绍62款前端可视化插件，下面就分享下34款图表插件

1. amchartsurl： http://www.amcharts.com/browser：IE6+、Chrome、safari、Firefox、opearresume：amCharts是一种先进的图表库,将适合任何数据可视化的需要。图表解决方案包括柱、栏、线、区域,一步,一步没有冒口,平滑线,烛台,OHLC,馅饼/甜甜圈,雷达/极地,XY/分散/泡沫,子弹,漏斗/金字塔图以及指标。
2. awesomechartjsurl：http://cyberpython.github.io/AwesomeChartJS/github：https://github.com/cyberpython/AwesomeChartJSbrowser：现代浏览器resume：AwesomeChartJS是一个简单的javascript库,可用于创建图表基于HTML5画布元素。
3. axiisurl：http://www.axiis.org/browser：官方未说明resume：Axiis框架是一个开源的数据可视化为初学者和专家开发人员设计的。
4. bonsaijsurl：http://bonsaijs.org/github：https://github.com/uxebu/bonsaibrowser：IE9+、chrome20+、safari5+、firefox18+、opear12+resume：用于创建图形和动画的js库
5. canvasjsurl：http://canvasjs.combrowser：官方未说明resume：一个使用HTML5、Javascript创建图表在画布上，图表包括几个好看的主题和10倍的速度比传统的基于Flash/SVG库——导致轻量级的,美丽的和响应指示板。收费
6. canvasxPRessurl：http://canvasxpress.org/browser：Firefox1.5+,Opera9+,Safari3.x+,Chrome1.0+,IE6+resume：CanvasXpress是一个独立的Javascript编写的图形库，支持所有主流浏览器中计算机和移动设备。
7. chartisturl：http://gionkunz.github.io/chartist-js/github：https://github.com/gionkunz/chartist-jsbrowser：Firefox,Chrome,Safari,Opera,IE9+resume：绘制多种图形的库
8. chartjsurl：http://www.chartjs.org/github：https://github.com/nnnick/Chart.jsbrowser：IE9+、chrome、safari、firefox、opear、部分支持IE7/8resume：chartjs是一个可以绘制多种图表的库，使用了html5的canvas技术
9. chartkickurl：http://ankane.github.io/chartkick/github：https://github.com/ankane/chartkickbrowser：IE6+、chrome、safari、firefox、opearresume：chartkick是一个依赖于ruby的绘制图表的js库，在Python中也可以使用
10. DataWrapperurl：https://datawrapper.de/github：https://github.com/datawrapper/datawrapperbrowser：支持大部分浏览器resume：Datawrapper完全免费，开源。您可以使用他们的免费主机服务，或者安装在您自己的服务器上。Datawrapper用php编写，非常易于安装、修改和拓展。可以绘制。但是DataWrapper是生成图表后嵌入到站点的。
11. dataseturl：http://misoproject.com/dataset/github：https://github.com/misoproject/datasetbrowser：官方未说明resume：dataset是一个JavaScript客户端数据转换和管理库。数据集管理客户端数据简单处理加载、解析、排序、查询和操纵来自各种数据源的数据。
12. dcurl：http://dc-js.github.io/dc.js/github：https://github.com/dc-js/dc.jsbrowser：官方未说明resume：专门为探索大型、多维数据集而进行优化的库
13. dygraphsurl：http://dygraphs.com/browser：IE8+、chrome、safari、firefox、opearresume：dygraphs是一种快速、灵活的开源JavaScript库图表。
14. echarturl：http://echarts.baidu.com/index.htmlgithub：https://github.com/ecomfe/echarts browser：IE9+、chrome、safari、firefox、opearresume：基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
15. flotr2url：http://www.humblesoftware.com/flotr2/github：https://github.com/HumbleSoftware/Flotr2browser：FF,Chrome,IE6+,Android,iOSresume：Flotr2是HTML5画图表和图形库。可以绘制线图、条图、蜡状图、饼图、气泡图
16. Floturl：http://www.flotcharts.org/browser：Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+resume：一个基于jQuery的绘图库，可以绘制折线、散点、条形、饼状图
17. fusionchartsurl：http://www.fusioncharts.com/browser：IE6+、chrome、safari、firefox、opearresume：一个专门用来绘制图表的库，可以绘制90多种图表，但是收费
18. graphaelurl：http://g.raphaeljs.com/browser：Firefox3.0+,Safari3.0+,Opera9.5+andInternetExplorer6.0+resume：可以绘制各种图表的插件，而且非常简单灵活
19. highcharturl：http://www.highcharts.com/github：https://github.com/highslide-software/highcharts.com/browser：支持各种设备，ie6+resume：在高版本浏览器中使用SVG，而在旧版本IE（包括IE6及更新版本）中使用后备的VML。有自己的团队负责，但是只对非商业用途免费，可以绘制line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types
20. humble Financeurl：http://www.humblesoftware.com/finance/indexbrowser：FireFox,Safari,Chromium,orIE6+resume：HumbleFinance是一个HTML5数据可视化工具类似于Flash工具，完全是用JavaScript编写的工具使用原型和Flotr库。
21. ichartjsurl：http://www.ichartjs.com/github：https://github.com/wanghetommy/ichartjsbrowser：IE9+、chrome、safari、firefox、opearresume：ichartjs是一款基于HTML5的图形库。使用纯javascript语言,利用HTML5的canvas标签绘制各式图形。ichartjs致力于为您的应用提供简单、直观、可交互的体验级图表组件。ichartjs目前支持饼图、环形图、折线图、面积图、柱形图、条形图。
22. ichartsurl：http://www.icharts.net/browser：官方未说明resume：iCharts免费版本提供了一些基本的交互式图表样式，如果更使用高级的样式，则需要购买高级版本。
23. JavaScriptInfoVisToolkiturl：http://philogb.github.io/jit/github：https://github.com/philogb/jitbrowser：官方未给出具体版本resume：JavaScript InfoVis Toolkit可以动态绘制各种图形，提供了一些预设的样式可用于展示不同的数据
24. jqploturl：http://www.jqplot.com/browser：IE7+,Firefox,Safari,andOperaresume：基于jQuery的绘图插件，可以绘制折线、条形、散点、饼状图
25. jschartsurl：http://www.jscharts.com/browser：Firefox1.5+，Chrome10+，InternetExplorer8+，Safari3.1+，Opera9+resume：jscharts是一个基于JavaScript的图表生成器,需要很少或根本没有编码。jscharts绘制图表是一个简单和容易的任务,因为您只需要使用客户端脚本(即由web浏览器)。不需要额外的插件或服务器模块。就包括我们的脚本,准备你的图表数据xml、JSON或JavaScript数组和你的表已经准备好了!允许您创建图柱状图,饼图或简单的线条图。收费但是有免费版本。
26. kendo-uiurl：http://www.telerik.com/kendo-uigithub：https://github.com/telerik/kendo-ui-corebrowser：现代浏览器resume：http://www.cnblogs.com/xiyangbaixue/p/3951297.html
27. nvd3url：http://nvd3.org/github：https://github.com/novus/nvd3browser：Chrome,Firefox,Opera,SafariandInternetExplorer10resume：d3图表库
28. pizza-pie-chartsurl：http://zurb.com/playground/pizza-pie-chartsgithub：https://github.com/zurb/pizzabrowser：官方未说明resume：主要用来生成饼状图的库
29. protovisurl：http://mbostock.github.io/protovis/github：https://github.com/mbostock/protovisbrowser：现代浏览器resume：Protovis组成自定义视图的数据用简单的标志如酒吧和点。与低级图形库,迅速成为可视化乏味,Protovis定义是通过编码数据的动态属性,允许继承,尺度和layoutsto简化施工。
30. Peityurl：http://benpickles.github.io/peity/browser：Chrome,Firefox,IE9+,Opera,Safariresume：可以绘制多种图形，但是都是