摘要：

　　在大數(shù)據(jù)時(shí)代，很多時(shí)候我們需要在網(wǎng)頁(yè)中顯示數(shù)據(jù)統(tǒng)計(jì)報(bào)表，從而能很直觀地了解數(shù)據(jù)的走向，開(kāi)發(fā)人員很多時(shí)候需要使用圖表來(lái)表現(xiàn)一些數(shù)據(jù)。隨著Web技術(shù)的發(fā)展，從傳統(tǒng)只能依靠于flash、IE的vml，各個(gè)瀏覽器尚不統(tǒng)一的svg，到如今規(guī)范統(tǒng)一的canvas、svg為代表的html5技術(shù)，表現(xiàn)點(diǎn)、線、面要素的技術(shù)已經(jīng)越來(lái)越規(guī)范成熟。我把前端數(shù)據(jù)可視化分為了五種：

圖表
圖譜
地圖
關(guān)系圖
立體圖

我將按照順序介紹62款前端可視化插件，下面就分享下34款圖表插件

amcharts
url： http://www.amcharts.com/
browser：IE6+、chrome、safari、firefox、opear
resume：amCharts是一種先進(jìn)的圖表庫(kù),將適合任何數(shù)據(jù)可視化的需要。圖表解決方案包括柱、欄、線、區(qū)域,一步,一步?jīng)]有冒口,平滑線,燭臺(tái),OHLC,餡餅/甜甜圈,雷達(dá)/極地,XY/分散/泡沫,子彈,漏斗/金字塔圖以及指標(biāo)。

awesomechartjs
url：http://cyberpython.github.io/AwesomeChartJS/
github：https://github.com/cyberpython/AwesomeChartJS
browser：現(xiàn)代瀏覽器
resume：AwesomeChartJS是一個(gè)簡(jiǎn)單的Javascript庫(kù),可用于創(chuàng)建圖表基于HTML5畫(huà)布元素。

axiis
url：http://www.axiis.org/
browser：官方未說(shuō)明
resume：Axiis框架是一個(gè)開(kāi)源的數(shù)據(jù)可視化為初學(xué)者和專(zhuān)家開(kāi)發(fā)人員設(shè)計(jì)的。

bonsaijs
url：http://bonsaijs.org/
github：https://github.com/uxebu/bonsai
browser：IE9+、chrome20+、safari5+、firefox18+、opear12+
resume：用于創(chuàng)建圖形和動(dòng)畫(huà)的js庫(kù)

canvasjs
url：http://canvasjs.com
browser：官方未說(shuō)明
resume：一個(gè)使用HTML5、JavaScript創(chuàng)建圖表在畫(huà)布上，圖表包括幾個(gè)好看的主題和10倍的速度比傳統(tǒng)的基于Flash/SVG庫(kù)——導(dǎo)致輕量級(jí)的,美麗的和響應(yīng)指示板。收費(fèi)

canvasxpress
url：http://canvasxpress.org/
browser：Firefox1.5+,Opera9+,Safari3.x+,Chrome1.0+,IE6+
resume：CanvasXpress是一個(gè)獨(dú)立的Javascript編寫(xiě)的圖形庫(kù)，支持所有主流瀏覽器中計(jì)算機(jī)和移動(dòng)設(shè)備。

chartist
url：http://gionkunz.github.io/chartist-js/
github：https://github.com/gionkunz/chartist-js
browser：Firefox,Chrome,Safari,Opera,IE9+
resume：繪制多種圖形的庫(kù)

chartjs
url：http://www.chartjs.org/
github：https://github.com/nnnick/Chart.js
browser：IE9+、chrome、safari、firefox、opear、部分支持IE7/8
resume：chartjs是一個(gè)可以繪制多種圖表的庫(kù)，使用了html5的canvas技術(shù)

chartkick
url：http://ankane.github.io/chartkick/
github：https://github.com/ankane/chartkick
browser：IE6+、chrome、safari、firefox、opear
resume：chartkick是一個(gè)依賴(lài)于ruby的繪制圖表的js庫(kù)，在Python中也可以使用

DataWrapper
url：https://datawrapper.de/
github：https://github.com/datawrapper/datawrapper
browser：支持大部分瀏覽器
resume：Datawrapper完全免費(fèi)，開(kāi)源。您可以使用他們的免費(fèi)主機(jī)服務(wù)，或者安裝在您自己的服務(wù)器上。Datawrapper用PHP編寫(xiě)，非常易于安裝、修改和拓展。可以繪制。但是DataWrapper是生成圖表后嵌入到站點(diǎn)的。

dataset
url：http://misoproject.com/dataset/
github：https://github.com/misoproject/dataset
browser：官方未說(shuō)明
resume：dataset是一個(gè)JavaScript客戶(hù)端數(shù)據(jù)轉(zhuǎn)換和管理庫(kù)。數(shù)據(jù)集管理客戶(hù)端數(shù)據(jù)簡(jiǎn)單處理加載、解析、排序、查詢(xún)和操縱來(lái)自各種數(shù)據(jù)源的數(shù)據(jù)。

dc
url：http://dc-js.github.io/dc.js/
github：https://github.com/dc-js/dc.js
browser：官方未說(shuō)明
resume：專(zhuān)門(mén)為探索大型、多維數(shù)據(jù)集而進(jìn)行優(yōu)化的庫(kù)

dygraphs
url：http://dygraphs.com/
browser：IE8+、chrome、safari、firefox、opear
resume：dygraphs是一種快速、靈活的開(kāi)源JavaScript庫(kù)圖表。

echart
url：http://echarts.baidu.com/index.html
github：https://github.com/ecomfe/echarts
browser：IE9+、chrome、safari、firefox、opear
resume：基于Canvas，純Javascript圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶(hù)體驗(yàn)，賦予了用戶(hù)對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

flotr2
url：http://www.humblesoftware.com/flotr2/
github：https://github.com/HumbleSoftware/Flotr2
browser：FF,Chrome,IE6+,Android,iOS
resume：Flotr2是HTML5畫(huà)圖表和圖形庫(kù)。可以繪制線圖、條圖、蠟狀圖、餅圖、氣泡圖

Flot
url：http://www.flotcharts.org/
browser：Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+
resume：一個(gè)基于jQuery的繪圖庫(kù)，可以繪制折線、散點(diǎn)、條形、餅狀圖

fusioncharts
url：http://www.fusioncharts.com/
browser：IE6+、chrome、safari、firefox、opear
resume：一個(gè)專(zhuān)門(mén)用來(lái)繪制圖表的庫(kù)，可以繪制90多種圖表，但是收費(fèi)

graphael
url：http://g.raphaeljs.com/
browser：Firefox3.0+,Safari3.0+,Opera9.5+andInternetExplorer6.0+
resume：可以繪制各種圖表的插件，而且非常簡(jiǎn)單靈活

highchart
url：http://www.highcharts.com/
github：https://github.com/highslide-software/highcharts.com/
browser：支持各種設(shè)備，ie6+
resume：在高版本瀏覽器中使用SVG，而在舊版本IE（包括IE6及更新版本）中使用后備的VML。有自己的團(tuán)隊(duì)負(fù)責(zé)，但是只對(duì)非商業(yè)用途免費(fèi)，可以繪制line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall and polar chart types

humble Finance
url：http://www.humblesoftware.com/finance/index
browser：FireFox,Safari,Chromium,orIE6+
resume：HumbleFinance是一個(gè)HTML5數(shù)據(jù)可視化工具類(lèi)似于Flash工具，完全是用JavaScript編寫(xiě)的工具使用原型和Flotr庫(kù)。

ichartjs
url：http://www.ichartjs.com/
github：https://github.com/wanghetommy/ichartjs
browser：IE9+、chrome、safari、firefox、opear
resume：ichartjs是一款基于HTML5的圖形庫(kù)。使用純javascript語(yǔ)言,利用HTML5的canvas標(biāo)簽繪制各式圖形。ichartjs致力于為您的應(yīng)用提供簡(jiǎn)單、直觀、可交互的體驗(yàn)級(jí)圖表組件。ichartjs目前支持餅圖、環(huán)形圖、折線圖、面積圖、柱形圖、條形圖。

icharts
url：http://www.icharts.net/
browser：官方未說(shuō)明
resume：iCharts免費(fèi)版本提供了一些基本的交互式圖表樣式，如果更使用高級(jí)的樣式，則需要購(gòu)買(mǎi)高級(jí)版本。

JavaScriptInfoVisToolkit
url：http://philogb.github.io/jit/
github：https://github.com/philogb/jit
browser：官方未給出具體版本
resume：JavaScript InfoVis Toolkit可以動(dòng)態(tài)繪制各種圖形，提供了一些預(yù)設(shè)的樣式可用于展示不同的數(shù)據(jù)

jqplot
url：http://www.jqplot.com/
browser：IE7+,Firefox,Safari,andOpera
resume：基于jQuery的繪圖插件，可以繪制折線、條形、散點(diǎn)、餅狀圖

jscharts
url：http://www.jscharts.com/
browser：Firefox1.5+，Chrome10+，InternetExplorer8+，Safari3.1+，Opera9+
resume：jscharts是一個(gè)基于JavaScript的圖表生成器,需要很少或根本沒(méi)有編碼。jscharts繪制圖表是一個(gè)簡(jiǎn)單和容易的任務(wù),因?yàn)槟恍枰褂每蛻?hù)端腳本(即由web瀏覽器)。不需要額外的插件或服務(wù)器模塊。就包括我們的腳本,準(zhǔn)備你的圖表數(shù)據(jù)XML、JSON或JavaScript數(shù)組和你的表已經(jīng)準(zhǔn)備好了!允許您創(chuàng)建圖柱狀圖,餅圖或簡(jiǎn)單的線條圖。收費(fèi)但是有免費(fèi)版本。

kendo-ui
url：http://www.telerik.com/kendo-ui
github：https://github.com/telerik/kendo-ui-core
browser：現(xiàn)代瀏覽器
resume：http://www.cnblogs.com/xiyangbaixue/p/3951297.html

nvd3
url：http://nvd3.org/
github：https://github.com/novus/nvd3
browser：Chrome,Firefox,Opera,SafariandInternetExplorer10
resume：d3圖表庫(kù)

pizza-pie-charts
url：http://zurb.com/playground/pizza-pie-charts
github：https://github.com/zurb/pizza
browser：官方未說(shuō)明
resume：主要用來(lái)生成餅狀圖的庫(kù)

protovis
url：http://mbostock.github.io/protovis/
github：https://github.com/mbostock/protovis
browser：現(xiàn)代瀏覽器
resume：Protovis組成自定義視圖的數(shù)據(jù)用簡(jiǎn)單的標(biāo)志如酒吧和點(diǎn)。與低級(jí)圖形庫(kù),迅速成為可視化乏味,Protovis定義是通過(guò)編碼數(shù)據(jù)的動(dòng)態(tài)屬性,允許繼承,尺度和layoutsto簡(jiǎn)化施工。

Peity
url：http://benpickles.github.io/peity/
browser：Chrome,Firefox,IE9+,Opera,Safari
resume：可以繪制多種圖形，但是都是很小的圖形，與jQuerySparklines相似

rgraph
url：http://www.rgraph.net/
browser：現(xiàn)代瀏覽器
resume：RGraph是一個(gè)基于HTML5的開(kāi)放web圖表和圖表庫(kù)。RGraph創(chuàng)建這些圖表在web瀏覽器使用JavaScript,這意味著更快的頁(yè)面和web服務(wù)器負(fù)載,導(dǎo)致較小的頁(yè)面大小和更快的網(wǎng)站。

webfx
url：http://webfx.eae.net/
browser：Firefox1.5,Opera9andInternetExplorer6
resume：支持多種圖表的庫(kù)

xcharts
url：http://tenxer.github.io/xcharts/
github：https://github.com/tenXer/xcharts/
browser：現(xiàn)代瀏覽器
resume：xCharts美麗是一個(gè)JavaScript庫(kù),用于構(gòu)建和自定義數(shù)據(jù)驅(qū)動(dòng)的web使用D3.js圖表可視化。使用HTML、CSS和SVG,xCharts被設(shè)計(jì)成動(dòng)態(tài)、流體、集成和定制。

zingchart
url：http://www.zingchart.com/
browser：官方未聲明
resume：ZingChart創(chuàng)造驚人的可視化提供了靈活性和資源。提供超過(guò)100個(gè)圖表類(lèi)型，獨(dú)特的特性,如縮放和交互式。

小結(jié)：

　　　　每款插件各有千秋，根據(jù)項(xiàng)目需求挑選不同插件。其中比較廣泛使用的如echart(百度產(chǎn)品)、highchart等，后面我將分享圖譜插件。

總結(jié)

以上是生活随笔為你收集整理的前端数据可视化插件（一）图表的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。