隨著發(fā)展，現(xiàn)代 Web 設(shè)計(jì)在改善體驗(yàn)和功能的同時(shí)，對(duì)于美觀的追求也越來(lái)越高，可視化、交互式、動(dòng)態(tài)等元素和效果似乎已成為標(biāo)配。

以下是為開(kāi)發(fā)者推薦的 10 款開(kāi)源 Javascript 圖表庫(kù)，可以幫助實(shí)現(xiàn)各種漂亮的功能。話(huà)不多說(shuō)，直接開(kāi)始吧！

https://www.oschina.net/p/echarts" target="_blank" rel="nofollow">1、ECharts

ECharts 由百度前端技術(shù)部開(kāi)發(fā)的，是一個(gè)純 Javascript 的圖表庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11、Chrome、Firefox、Safari等），底層依賴(lài)輕量級(jí)的 Canvas 類(lèi)庫(kù) https://github.com/ecomfe/zrender" target="_blank" rel="nofollow">ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

ECharts 有良好的自適應(yīng)效果，ECharts 3 中更是加入了更多豐富的交互功能以及更多的可視化效果，并且對(duì)移動(dòng)端做了深度的優(yōu)化。

https://static.oschina.net/uploads/space/2017/0223/114727_pR2V_2896879.png">

https://static.oschina.net/uploads/space/2017/0223/114910_3KzA_2896879.gif">

https://www.oschina.net/p/chartjs" target="_blank" rel="nofollow">2、Chart.js

Chart.js 是一個(gè)簡(jiǎn)單、面向?qū)ο蟆樵O(shè)計(jì)者和開(kāi)發(fā)者準(zhǔn)備的 Javascript 圖表繪制工具庫(kù)，基于 HTML5 canvas 技術(shù)，支持所有現(xiàn)代瀏覽器，并且針對(duì) IE7/8 提供了降級(jí)替代方案。

Chart.js 不依賴(lài)任何外部工具庫(kù)，輕量級(jí)（壓縮之后僅有4.5k），并且提供了加載外部參數(shù)的方法。能用多種不同的方式讓數(shù)據(jù)變得可視化。

https://static.oschina.net/uploads/space/2017/0223/140632_eYv6_2896879.png">

https://static.oschina.net/uploads/space/2017/0223/140808_tkIb_2896879.png" width="320">https://static.oschina.net/uploads/space/2017/0223/140835_0IfW_2896879.png" width="320">

https://www.oschina.net/p/jqplot" target="_blank" rel="nofollow">3、jqPlot

jqPlot 是一個(gè)非常強(qiáng)大的基于 jquery 類(lèi)庫(kù)的 Javascript 圖表工具，可在網(wǎng)頁(yè)中繪制線狀、柱狀、餅狀等多種樣式圖表。

jqPlot 強(qiáng)大之處在于將內(nèi)容呈現(xiàn)為動(dòng)態(tài)嵌入的靜態(tài)圖像，這意味著圖表數(shù)據(jù)可以通過(guò) Ajax 更新，甚至不需要刷新頁(yè)面。 某些圖表類(lèi)型甚至具有懸停選項(xiàng)，可在懸停時(shí)顯示相關(guān)數(shù)據(jù)。

https://static.oschina.net/uploads/space/2017/0223/141931_z0gw_2896879.png">

https://static.oschina.net/uploads/space/2017/0223/142029_fQrq_2896879.png">

http://www.oschina.net/p/chartist-js" target="_blank" rel="nofollow">4、Chartist.js

Chartist.js 是一個(gè)使用 SVG 構(gòu)建的簡(jiǎn)單的響應(yīng)式圖表庫(kù)，可以作為前端圖表生成器。同樣兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11、Chrome、Firefox、Safari等）。

Chartist.js 每個(gè)圖表從大小到配色方案都是完全響應(yīng)和高度可定制的，依靠 SVG 將圖形作為圖像動(dòng)態(tài)地呈現(xiàn)到頁(yè)面上。完全使用 SASS 構(gòu)建，并且支持自定義。

https://static.oschina.net/uploads/space/2017/0223/145548_uv9j_2896879.gif">

https://static.oschina.net/uploads/space/2017/0223/145626_OTS0_2896879.png">

https://www.oschina.net/p/xcharts" target="_blank" rel="nofollow">5、xCharts

xCharts 是一個(gè)使用 http://www.oschina.net/p/d3" target="_blank" rel="nofollow">D3.js 來(lái)構(gòu)建漂亮的可定制的數(shù)據(jù)驅(qū)動(dòng)的 JavaScript 圖表庫(kù)，使用 HTML、CSS、SVG 實(shí)現(xiàn)圖表，適用于熟悉數(shù)據(jù)可視化的用戶(hù)。

通過(guò) xCharts 渲染的所有內(nèi)容都有很強(qiáng)的適應(yīng)性，在與數(shù)據(jù)交互時(shí)添加自己的動(dòng)畫(huà)或緩動(dòng)函數(shù)也較為容易。

https://static.oschina.net/uploads/space/2017/0223/151415_ZwrI_2896879.gif">

https://www.oschina.net/p/c3js" target="_blank" rel="nofollow">6、C3.js

C3.js 也是一個(gè)基于 http://www.oschina.net/p/d3" target="_blank" rel="nofollow">D3.js 的可重用的開(kāi)源 JavaScript 圖表庫(kù)。這意味著將數(shù)據(jù)圖表繪制到 HTML 頁(yè)面上的過(guò)程得到簡(jiǎn)化，不需要大量的自定義 D3 圖表代碼，也相對(duì)容易上手。

C3.js 所有的數(shù)據(jù)是完全動(dòng)態(tài)的，從工具到圖形顏色。它使用非常舒服，有充分的可定制性和控制性，支持多種圖表類(lèi)型。

https://static.oschina.net/uploads/space/2017/0223/152528_xb63_2896879.gif">

https://www.oschina.net/p/pizza" target="_blank" rel="nofollow">7、Pizza Pie Charts

Pizza Pie Charts 是由 ZURB 開(kāi)發(fā)的一個(gè)知名的 JavaScript 庫(kù)，用于渲染基于 SVG 的餅圖。

Pizza Pie Charts 所有的顯示設(shè)置和選項(xiàng)都可以直接在 CSS 或 JavaScript中 修改。它專(zhuān)注于以最好的方式將數(shù)據(jù)呈現(xiàn)到餅圖。如果是其他圖表樣式，還是建議使用其它的幾個(gè)庫(kù)。

https://static.oschina.net/uploads/space/2017/0223/153623_H1eb_2896879.png">

https://www.oschina.net/p/protovis" target="_blank" rel="nofollow">8、Protovis

Protovis 使用簡(jiǎn)單的標(biāo)記（例如條形和點(diǎn)）組成數(shù)據(jù)的自定義視圖。 與一些低級(jí)圖形庫(kù)不同，Protovis 通過(guò)對(duì)數(shù)據(jù)進(jìn)行編碼的動(dòng)態(tài)屬性來(lái)定義標(biāo)記，允許繼承、縮放和布局來(lái)簡(jiǎn)化構(gòu)建。

Protovis 有能力渲染非常獨(dú)特的圖表樣式，它使用 JavaScript 和 SVG 進(jìn)行 Web 本地可視化，無(wú)需插件（除了需要一個(gè)瀏覽器）。

https://static.oschina.net/uploads/space/2017/0223/154449_8gvl_2896879.png">

http://www.oschina.net/p/flot" target="_blank" rel="nofollow">9、Flot

Flot 是 jQuery 的純 JavaScript 圖表庫(kù)，專(zhuān)注于使用簡(jiǎn)單，外觀漂亮和強(qiáng)互動(dòng)功能。它是特定的 jQuery 庫(kù)，這意味著你需要使用它需要熟悉基礎(chǔ)的 jQuery。但是從另一方面來(lái)說(shuō)，這意味著你可以全面控制呈現(xiàn)，動(dòng)作和用戶(hù)交互。

使用 Flot 的主要好處是能夠創(chuàng)建動(dòng)畫(huà)繪制圖，可以以此展現(xiàn)大量的結(jié)果數(shù)據(jù)。它兼容大多數(shù)現(xiàn)代瀏覽器，向下兼容到 IE6 和 Firefox2。

https://static.oschina.net/uploads/space/2017/0223/160540_FCS6_2896879.png">

https://www.oschina.net/p/dygraphs" target="_blank" rel="nofollow">10、Dygraphs

Dygraphs 也是一個(gè)基于 HTML5 canvas 的 JavaScript 圖表庫(kù)，可以生成一個(gè)可交互式的，可縮放的的曲線表，可以用來(lái)顯示大密度的數(shù)據(jù)集（比如股票、氣溫等等），并且可以讓用戶(hù)來(lái)瀏覽和解釋這個(gè)曲線圖。

Dygraphs 在移動(dòng)設(shè)備上還可以通過(guò)縮放顯示效果來(lái)支持交互。如果你想用 JavaScript 繪制數(shù)據(jù)，那么 Dygraphs 是一個(gè)不錯(cuò)的選擇。

https://static.oschina.net/uploads/space/2017/0223/161730_wDF8_2896879.png">