摘要：

　　在大資料時代，很多時候我們需要在網頁中顯示資料統計報表，從而能很直觀地瞭解資料的走向，開發人員很多時候需要使用圖表來表現一些資料。隨著Web技術的發展，從傳統只能依靠於flash、IE的vml，各個瀏覽器尚不統一的svg，到如今規範統一的canvas、svg為代表的html5技術，表現點、線、面要素的技術已經越來越規範成熟。我把前端資料視覺化分為了五種：

1. 圖表
2. 圖譜
3. 地圖
4. 關係圖
5. 立體圖

我將按照順序介紹62款前端視覺化外掛，下面就分享下34款圖表外掛

1. amcharts
   url： http://www.amcharts.com/
   browser：IE6+、chrome、safari、firefox、opear
   resume：amCharts是一種先進的圖表庫,將適合任何資料視覺化的需要。圖表解決方案包括柱、欄、線、區域,一步,一步沒有冒口,平滑線,燭臺,OHLC,餡餅/甜甜圈,雷達/極地,XY /分散/泡沫,子彈,漏斗/金字塔圖以及指標。
   
   
   
   
2. awesomechartjs
   url：http://cyberpython.github.io/AwesomeChartJS/
   github：https://github.com/cyberpython/AwesomeChartJS
   browser：現代瀏覽器
   resume：AwesomeChartJS是一個簡單的Javascript庫,可用於建立圖表基於HTML 5畫布元素。
   
   
   
3. axiis
   url：http://www.axiis.org/
   browser：官方未說明
   resume：Axiis框架是一個開源的資料視覺化為初學者和專家開發人員設計的。
   
   
   
4. bonsaijs
   url：http://bonsaijs.org/
   github：https://github.com/uxebu/bonsai
   browser：IE9+、chrome20+、safari5+、firefox18+、opear12+
   resume：用於建立圖形和動畫的js庫
   
   
   
   
5. canvasjs
   url：http://canvasjs.com
   browser：官方未說明
   resume：一個使用HTML5、JavaScript建立圖表在畫布上，圖表包括幾個好看的主題和10倍的速度比傳統的基於Flash / SVG庫——導致輕量級的,美麗的和響應指示板。收費
   
   
   
6. canvasxpress
   url：http://canvasxpress.org/
   browser：Firefox 1.5+, Opera 9+, Safari 3.x+, Chrome 1.0+, IE 6+
   resume：CanvasXpress是一個獨立的Javascript編寫的圖形庫，支援所有主流瀏覽器中計算機和移動裝置。
   
   
   
7. chartist
   
   url：http://gionkunz.github.io/chartist-js/
   github：https://github.com/gionkunz/chartist-js
   browser：Firefox, Chrome, Safari, Opera, IE9+
   resume：繪製多種圖形的庫
   
   
   
8. chartjs
   url：http://www.chartjs.org/
   github：https://github.com/nnnick/Chart.js
   browser：IE9+、chrome、safari、firefox、opear、部分支援IE7/8
   resume：chartjs是一個可以繪製多種圖表的庫，使用了html5的canvas技術
   
   
   
9. chartkick
   url：http://ankane.github.io/chartkick/
   github：https://github.com/ankane/chartkick
   browser：IE6+、chrome、safari、firefox、opear
   resume：chartkick是一個依賴於ruby的繪製圖表的js庫，在Python中也可以使用
   
   
   
10. DataWrapper
    url：https://datawrapper.de/
    github：https://github.com/datawrapper/datawrapper
    browser：支援大部分瀏覽器
    resume：Datawrapper完全免費，開源。您可以使用他們的免費主機服務，或者安裝在您自己的伺服器上。Datawrapper用PHP編寫，非常易於安裝、修改和拓展。可以繪製。但是DataWrapper是生成圖表後嵌入到站點的。
    
    
    
11. dataset
    url：http://misoproject.com/dataset/
    github：https://github.com/misoproject/dataset
    browser：官方未說明
    resume：dataset是一個JavaScript客戶端資料轉換和管理庫。資料集管理客戶端資料簡單處理載入、解析、排序、查詢和操縱來自各種資料來源的資料。
    
    
    
12. dc
    url：http://dc-js.github.io/dc.js/
    github：https://github.com/dc-js/dc.js
    browser：官方未說明
    resume：專門為探索大型、多維資料集而進行優化的庫
    
    
    
13. dygraphs
    url：http://dygraphs.com/
    browser：IE8+、chrome、safari、firefox、opear
    resume：dygraphs是一種快速、靈活的開源JavaScript庫圖表。
    
    
    
14. echart
    url：http://echarts.baidu.com/index.html
    github：https://github.com/ecomfe/echarts    
    browser：IE9+、chrome、safari、firefox、opear
    resume：基於Canvas，純Javascript圖表庫，提供直觀，生動，可互動，可個性化定製的資料視覺化圖表。創新的拖拽重計算、資料檢視、值域漫遊等特性大大增強了使用者體驗，賦予了使用者對資料進行挖掘、整合的能力。
    
    
    
15. flotr2
    url：http://www.humblesoftware.com/flotr2/
    github：https://github.com/HumbleSoftware/Flotr2
    browser：FF, Chrome, IE6+, Android, iOS
    resume：Flotr2是HTML5畫圖表和圖形庫。可以繪製線圖、條圖、蠟狀圖、餅圖、氣泡圖
    
    
    
16. Flot
    url：http://www.flotcharts.org/
    browser：Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+
    resume：一個基於jQuery的繪相簿，可以繪製折線、散點、條形、餅狀圖
    
    
    
17. fusioncharts
    url：http://www.fusioncharts.com/
    browser：IE6+、chrome、safari、firefox、opear
    resume：一個專門用來繪製圖表的庫，可以繪製90多種圖表，但是收費
    
    
    
18. graphael
    url：http://g.raphaeljs.com/
    browser：Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+
    resume：可以繪製各種圖表的外掛，而且非常簡單靈活
    
    
    
19. highchart
    url：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 Finance
    url：http://www.humblesoftware.com/finance/index
    browser：FireFox, Safari, Chromium, or IE6+
    resume：HumbleFinance是一個HTML5資料視覺化工具類似於Flash工具，完全是用JavaScript編寫的工具使用原型和Flotr庫。
    
    
21. ichartjs
    url：http://www.ichartjs.com/
    github：https://github.com/wanghetommy/ichartjs
    browser：IE9+、chrome、safari、firefox、opear
    resume：ichartjs 是一款基於HTML5的圖形庫。使用純javascript語言, 利用HTML5的canvas標籤繪製各式圖形。 ichartjs致力於為您的應用提供簡單、直觀、可互動的體驗級圖表元件。ichartjs目前支援餅圖、環形圖、折線圖、面積圖、柱形圖、條形圖。
    
    
    
22. icharts
    url：http://www.icharts.net/
    browser：官方未說明
    resume：iCharts免費版本提供了一些基本的互動式圖表樣式，如果更使用高階的樣式，則需要購買高階版本。 
    
    
    
23. JavaScript InfoVis Toolkit
    url：http://philogb.github.io/jit/
    github：https://github.com/philogb/jit
    browser：官方未給出具體版本
    resume：JavaScript InfoVis Toolkit可以動態繪製各種圖形，提供了一些預設的樣式可用於展示不同的資料
    
    
    
24. jqplot
    url：http://www.jqplot.com/
    browser：IE 7+, Firefox, Safari, and Opera
    resume：基於jQuery的繪圖外掛，可以繪製折線、條形、散點、餅狀圖
    
    
    
25. jscharts
    url：http://www.jscharts.com/
    browser：Firefox 1.5 +，Chrome 10 +，Internet Explorer 8 +，Safari 3.1 +，Opera 9 +
    resume：jscharts是一個基於JavaScript的圖表生成器,需要很少或根本沒有編碼。jscharts繪製圖表是一個簡單和容易的任務,因為您只需要使用客戶端指令碼(即由web瀏覽器)。不需要額外的外掛或伺服器模組。就包括我們的指令碼,準備你的圖表資料XML、JSON或JavaScript陣列和你的表已經準備好了!允許您建立圖柱狀圖,餅圖或簡單的線條圖。收費但是有免費版本。
    
    
    
26. kendo-ui
    url：http://www.telerik.com/kendo-ui
    github：https://github.com/telerik/kendo-ui-core
    browser：現代瀏覽器
    resume：http://www.cnblogs.com/xiyangbaixue/p/3951297.html
    
    
    
27. nvd3
    url：http://nvd3.org/
    github：https://github.com/novus/nvd3
    browser：Chrome,Firefox, Opera, Safari and Internet Explorer 10
    resume：d3圖表庫
    
    
    
28. pizza-pie-charts
    url：http://zurb.com/playground/pizza-pie-charts
    github：https://github.com/zurb/pizza
    browser：官方未說明
    resume：主要用來生成餅狀圖的庫
    
    
    
29. protovis
    url：http://mbostock.github.io/protovis/
    github：https://github.com/mbostock/protovis
    browser：現代瀏覽器
    resume：Protovis組成自定義檢視的資料用簡單的標誌如酒吧和點。與低階圖形庫,迅速成為視覺化乏味,Protovis定義是通過編碼資料的動態屬性,允許繼承,尺度和layoutsto簡化施工。
    
    
    
30. Peity
    url：http://benpickles.github.io/peity/
    browser：Chrome, Firefox, IE9+, Opera, Safari
    resume：可以繪製多種圖形，但是都是很小的圖形，與jQuery Sparklines相似
    
    
    
31. rgraph
    url：http://www.rgraph.net/
    browser：現代瀏覽器
    resume：RGraph是一個基於HTML5的開放web圖表和圖表庫。RGraph建立這些圖表在web瀏覽器使用JavaScript,這意味著更快的頁面和web伺服器負載,導致較小的頁面大小和更快的網站。
    
    
    
32. webfx
    url：http://webfx.eae.net/
    browser：Firefox 1.5, Opera 9 and Internet Explorer 6 
    resume：支援多種圖表的庫
    
    
    
33. xcharts
    url：http://tenxer.github.io/xcharts/
    github：https://github.com/tenXer/xcharts/
    browser：現代瀏覽器
    resume：xCharts美麗是一個JavaScript庫,用於構建和自定義資料驅動的web使用D3.js圖表視覺化。使用HTML、CSS和SVG,xCharts被設計成動態、流體、整合和定製。
    
    
    
34. zingchart
    url：http://www.zingchart.com/
    browser：官方未宣告
    resume：ZingChart創造驚人的視覺化提供了靈活性和資源。提供超過100個圖表型別，獨特的特性,如縮放和互動式。
    
    
    

 小結：

　　　　每款外掛各有千秋，根據專案需求挑選不同外掛。其中比較廣泛使用的如echart(百度產品)、highchart等，後面我將分享圖譜外掛。