【51CTO.com快譯】如今，隨著我們身體各類(lèi)數(shù)據(jù)的指數(shù)級(jí)增長(zhǎng)，人們需要接受的信息量越來(lái)越大，系統(tǒng)必須處理的難度也是越來(lái)越高。而這些正是我們需要通過(guò)交互式圖表和儀表盤(pán)，來(lái)實(shí)現(xiàn)數(shù)據(jù)可視化的根本原因。在大幅節(jié)省用戶的時(shí)間和精力的同時(shí)，此類(lèi)可視化方式不但需要能夠?qū)?shù)據(jù)進(jìn)行分析與解讀，而且應(yīng)當(dāng)能夠基于海量數(shù)據(jù)做出正確且明智的決策。

現(xiàn)在，網(wǎng)上有許多JavaScript類(lèi)型的圖表庫(kù)資源。它們功能不同，且各有優(yōu)、缺點(diǎn)。為了讓您能夠輕松地進(jìn)行挑選，我在此準(zhǔn)備了十種既可用于創(chuàng)建基本的圖表，又能夠處置各種特定數(shù)據(jù)可視化任務(wù)的***JS庫(kù)。下面，就讓我們一起來(lái)了解一下它們的主要特點(diǎn)和相關(guān)資源吧。

1.amCharts

當(dāng)您需要一個(gè)簡(jiǎn)單且靈活的數(shù)據(jù)可視化解決方案時(shí)，amCharts便是一種非常實(shí)用的JavaScript圖表庫(kù)。

主要特點(diǎn)

• 包含地圖和甘特圖等多種類(lèi)型的圖表。
• 具有友好的交互式選項(xiàng)和深入分析的功能。
• 其文檔雖然涵括了所有基本的方法，但是在我看來(lái)，它們?cè)谑褂蒙喜⒉环奖恪?/li>
• 具有引人入勝的圖表動(dòng)畫(huà)。
• 可以與React、Angular、Vue和Ember相集成。
• 具有WordPress插件。
• 可導(dǎo)出為圖像或PDF文件。
• 提供實(shí)時(shí)圖表，以及完全自定義的、且被W3C認(rèn)可的輔助功能。
• 為注冊(cè)用戶提供優(yōu)先且全面的支持。
• 客戶群：Microsoft、Amazon、eBay、NASA、Samsung、Yandex、以及AT&T等。

定價(jià)

雖然可以被免費(fèi)地用于各種用途，但是所有生成的圖表都會(huì)包含一個(gè)小小的品牌鏈接。若要?jiǎng)h除該鏈接，則需購(gòu)買(mǎi)付費(fèi)許可證(180美元起)。同時(shí)，您也將為此獲得對(duì)于該產(chǎn)品的優(yōu)先支持。

更多信息

• 官方網(wǎng)站：http://amcharts.com/
• 文檔：http://amcharts.com/
• 下載鏈接：http://amcharts.com/download

2.AnyChart

作為一款輕量級(jí)的JS圖表庫(kù)，AnyChart不但功能豐富，而且具有SVG/VML(譯者注：可縮放矢量圖形和矢量可標(biāo)記語(yǔ)言)呈現(xiàn)功能。實(shí)際上，它為Web開(kāi)發(fā)人員提供了創(chuàng)建不同類(lèi)型圖表的***機(jī)會(huì)。這些圖表都有助于數(shù)據(jù)的分析，以及以數(shù)據(jù)為驅(qū)動(dòng)所做出的決策。去年，DZone.com將AnyChart列入了***JavaScript數(shù)據(jù)圖表庫(kù)之一。

主要特點(diǎn)

• 提供超過(guò)80多種JS圖表類(lèi)型，包括：基本圖表、股票圖表、地圖、甘特圖、以及PERT圖表等。
• 提供多種設(shè)置數(shù)據(jù)的方法，包括：XML、JSON、CSV、JS API、Google表格和HTML表格。
• 能夠深入查看圖表中的數(shù)據(jù)。
• 提供庫(kù)存技術(shù)分析指標(biāo)，以及開(kāi)箱即用的繪圖工具。
• 提供豐富的文檔、API和友好的技術(shù)支持。
• 可以與Angular、Qlik、Oracle APEX、React、Elasticsearch、Vue.js、Android、以及iOS等相集成。
• 提供各種樣本與儀表盤(pán)，以及具有代碼自動(dòng)完成功能的專(zhuān)用playground。
• 支持各種舊的瀏覽器。
• 能夠?qū)D表導(dǎo)出為各種格式，包括：PDF、JPG、PNG、SVG圖像、XSLX與CSV文件類(lèi)型的數(shù)據(jù)。
• 客戶群：Oracle、Microsoft、Citi、Samsung、Nokia、AT&T、Ford、Volkswagen、以及Lockheed Martin等。

定價(jià)

提供免得的帶水印版本。如果想去掉logo，或是將AnyChart用作商業(yè)目的，則必要購(gòu)買(mǎi)許可證(49美元起)。

更多信息

• 官方網(wǎng)站：https://www.anychart.com/
• 文檔：https://docs.anychart.com/
• 下載鏈接：https://docs.anychart.com/

3.Chart.js

Chart.js是一款備受網(wǎng)頁(yè)設(shè)計(jì)與開(kāi)發(fā)人員歡迎的，簡(jiǎn)單且靈活的JavaScript數(shù)據(jù)圖表庫(kù)。對(duì)于那些不需要大量圖表與自定義功能，卻又希望其圖表看起來(lái)清晰整潔、且信息量豐富的用戶來(lái)說(shuō)，這是一個(gè)非常好的基本解決方案。

主要特點(diǎn)

• 支持8種圖表類(lèi)型，即：線、面積、條形圖、餅圖、雷達(dá)圖、極坐標(biāo)圖、氣泡圖和散點(diǎn)圖。
• 所有的圖表類(lèi)型都可以被自定義、添加動(dòng)畫(huà)、并以響應(yīng)式，被在線使用。
• 可以通過(guò)插件來(lái)擴(kuò)展其功能。
• 具有優(yōu)質(zhì)的文檔。
• 由Stack Overflow(譯者注：著名的程序開(kāi)發(fā)技術(shù)問(wèn)答網(wǎng)站)提供支持。
• 支持IE9及以上的瀏覽器。

定價(jià)

它是一款根據(jù)MIT許可證發(fā)布的，免費(fèi)開(kāi)源的JS圖表庫(kù)。

更多信息

• 官方網(wǎng)站：https://www.chartjs.org/
• 文檔：https://www.chartjs.org/docs/
• 下載鏈接：https://github.com/chartjs/Chart.js/releases/latest

4.Chartist.js

Chartist雖然是一款不太引人注目的開(kāi)源JS庫(kù)，但是它能夠被用來(lái)創(chuàng)建漂亮的響應(yīng)式圖表。因此，它對(duì)于那些需要極簡(jiǎn)式圖表(如：線條、條形圖或餅圖)、且對(duì)于數(shù)據(jù)可視化要求不高的用戶來(lái)說(shuō)，非常實(shí)用。正所謂“一美遮百丑”，憑借著其漂亮的圖表顯示，它的其他功能倒是被弱化了。

主要特點(diǎn)

• 只支持三種圖表類(lèi)型：直線圖、條形圖和餅圖。
• 具有強(qiáng)大的動(dòng)畫(huà)效果。
• 其API文檔包含了所有必要的信息，但是該文檔的可讀性不強(qiáng)，需要長(zhǎng)時(shí)間滾動(dòng)鼠標(biāo)中鍵，才能定位到檢索的內(nèi)容。
• 允許用戶通過(guò)插件來(lái)擴(kuò)展其功能。
• 將來(lái)會(huì)兼容、并可使用SVG來(lái)繪制圖表。
• 支持各種舊的瀏覽器。

定價(jià)

開(kāi)源并可免費(fèi)使用。

更多信息

• 官方網(wǎng)站：https://gionkunz.github.io/chartist-js/
• 文檔：https://gionkunz.github.io/chartist-js/getting-started.html
• 下載鏈接：https://github.com/gionkunz/chartist-js/tree/develop/dist

5.D3.js

D3.js是一款功能強(qiáng)大的，可用于數(shù)據(jù)可視化任務(wù)的JavaScript庫(kù)。目前，它已在GitHub上被fork(復(fù)制)了20,000多次。不過(guò)，D3更像是一個(gè)框架，而不是圖表庫(kù)。為了讓用戶方便使用，它提供了許多實(shí)用的資源，并能夠?qū)⒏鞣N手稿轉(zhuǎn)化為可視化的圖形。

主要特點(diǎn)

• 與諸如Voronoi之類(lèi)的多數(shù)JavaScript圖表庫(kù)相比，它能夠支持更為廣泛的圖表類(lèi)型。
• 它的學(xué)習(xí)曲線比較陡峭。雖然其文檔不及上述提到的商用AnyChart那樣清楚易學(xué)，但是它帶有許多教程和各種不錯(cuò)的API。
• 能夠?qū)?qiáng)大的可視化組件、與數(shù)據(jù)驅(qū)動(dòng)方法，結(jié)合到DOM的操作之中。
• 能夠使用瀏覽器內(nèi)的元素檢查器，以實(shí)現(xiàn)輕松的調(diào)試。
• 帶有數(shù)以百個(gè)的范例。
• 具有曲線生成函數(shù)的功能。
• 支持拖放。

定價(jià)

開(kāi)源并可免費(fèi)使用。

更多信息

• 官方網(wǎng)站：http://d3js.org/
• 文檔：https://github.com/d3/d3/wiki
• 下載鏈接：https://github.com/d3/d3/releases/latest/

6.FusionCharts

FusionCharts是一款不錯(cuò)的交互式圖表庫(kù)，它帶有數(shù)百個(gè)開(kāi)箱即用的圖表。這些圖表不但接受JSON和XML數(shù)據(jù)格式，而且能夠通過(guò)HTML5/SVG或VML予以呈現(xiàn)。

主要特點(diǎn)

• 提供數(shù)十種2D和3D類(lèi)型的圖表，以及950多種地圖。
• 以動(dòng)畫(huà)和完全交互的方式，提供圖表和地圖。
• 提供ASP.NET、PHP和Ruby on Rails類(lèi)型的服務(wù)器端API。
• 兼容jQuery、Angular、PHP、ASP.NET、React Native、Django、React、Ruby on Rails、以及Java等語(yǔ)言工具。
• 具有非常詳細(xì)的用戶指南和API參考文檔。
• 提供各種可用于檢測(cè)的樣品和儀表盤(pán)。
• 支持各種舊的瀏覽器。
• 可導(dǎo)出為PNG、JPG或PDF格式。
• 通過(guò)知識(shí)庫(kù)和社區(qū)論壇提供技術(shù)支持。
• 給許可證用戶提供不受限的優(yōu)先支持。
• 客戶群：Apple、IBM、Google、Intel、Microsoft、PayPal、Oracle、以及Adobe等。

定價(jià)

可免費(fèi)用于非商業(yè)用途;若用于商業(yè)用途，則售價(jià)為497美元起。

更多信息

• 官方網(wǎng)站：https://fusionchart.com/
• 文檔：https://www.fusioncharts.com/dev
• 下載鏈接：https://www.fusioncharts.com/download

7.Google Charts

對(duì)于那些不需要復(fù)雜定制、且更注重簡(jiǎn)約與穩(wěn)定性的項(xiàng)目來(lái)說(shuō)，Google Charts是一個(gè)很好的選擇。

主要特點(diǎn)

• 提供基于HTML5/SVG和VML的圖表。
• 提供各種可用于檢測(cè)的樣品和儀表盤(pán)。
• 在所有圖表都具有交互性的基礎(chǔ)上，部分圖表還可被縮放。
• 提供完善的綜合性文檔。
• 支持各種舊的瀏覽器。
• 通過(guò)FAQ、GitHub和社區(qū)論壇提供支持。

定價(jià)

雖然其許可證是免費(fèi)的，但圖表庫(kù)并不開(kāi)源。由于不允許在用戶服務(wù)器上托管Google的各種JS文件，因此不適合那些具有敏感數(shù)據(jù)的用戶。

詳細(xì)信息

• 官方網(wǎng)站：https://developers.google.com/chart/
• 文檔：https://developers.google.com/chart/interactive/docs/
• 下載鏈接：https://developers.google.com/chart/interactive/docs/basic_load_libs

8.Highcharts

Highcharts是一款全面、且流行的、基于HTML5的JavaScript圖表庫(kù)，它使用SVG/VML來(lái)呈現(xiàn)各種類(lèi)型的圖表。由于屬于輕量級(jí)的圖表庫(kù)，因此它保證了較高的運(yùn)行性能。

主要特點(diǎn)

• 既能夠使用純粹的JavaScript，又可以從外部加載數(shù)據(jù)。
• 提供強(qiáng)大的文檔、API參考和社區(qū)作品展示。
• 能夠通過(guò)交互式選項(xiàng)，讓用戶深入解讀圖表中的數(shù)據(jù)。
• 可以與React、Angular、Meteor、.NET、以及iOS等一起使用。
• 可以導(dǎo)出為PNG、JPG、PDF或SVG格式。
• 能夠通過(guò)社區(qū)論壇和Stack Overflow的方式，對(duì)免費(fèi)版用戶提供支持;而對(duì)于具有相應(yīng)許可證的商業(yè)用戶來(lái)說(shuō)，則能夠提供高級(jí)的電子郵件與Skype技術(shù)支持。
• 客戶群：Visa、Yahoo!、Facebook、Twitter、Groupon、Nokia、Ericsson、Mastercard、以及Yandex等。

定價(jià)

供非營(yíng)利組織免費(fèi)使用;而對(duì)于商業(yè)用途，則售價(jià)為50美元起。

更多信息

• 官方網(wǎng)站：https://highcharts.com/
• 文檔：https://www.highcharts.com/docs
• 下載鏈接：https://www.highcharts.com/blog/download

9.Plotly.js

Plotly.js是一款免費(fèi)且開(kāi)源的高端JavaScript軟件庫(kù)。由于是建立在D3.js和WebGL基礎(chǔ)之上，因此它可被用于創(chuàng)建包括3D圖、和統(tǒng)計(jì)圖在內(nèi)的許多不同類(lèi)型的圖表。

主要特點(diǎn)

• 可被嵌入網(wǎng)站、或用于創(chuàng)建動(dòng)態(tài)演示文稿，并支持20種圖表類(lèi)型。
• 通過(guò)將各種圖表抽象為聲明性的JSON結(jié)構(gòu)，它可以被Python、R和MATLAB用作基于瀏覽器的圖表庫(kù)。
• 具有豐富的API文檔。
• 具有強(qiáng)大的動(dòng)畫(huà)效果。
• 能夠使用React。
• 能夠?qū)D表導(dǎo)出為PNG和JPG;并在訂購(gòu)之后，提供EPS、SVG和PDF格式。
• 提供各種可用于檢測(cè)的樣品。
• 允許使用Excel電子表格、或直接連接到您的數(shù)據(jù)庫(kù)中。
• 具有社區(qū)論壇的支持。

定價(jià)

開(kāi)源并可免費(fèi)使用。

更多信息

• 官方網(wǎng)站：https://plot.ly/javascript/
• 文檔：https://plot.ly/javascript/
• 下載鏈接：https://plot.ly/javascript/getting-started/#download

10.ZingChart

ZingChart是一款可用于制作交互式與響應(yīng)式圖表的實(shí)用工具。它不但靈活高效，而且能夠輕松地管理大數(shù)據(jù)，同時(shí)還能生成包含豐富數(shù)據(jù)內(nèi)容的圖表。

主要特點(diǎn)

• 支持30多種圖表類(lèi)型。
• 可完全定制不同的CSS風(fēng)格版式。
• 兼容jQuery、Angular、Node.js、以及PHP等。
• 提供實(shí)時(shí)數(shù)據(jù)，并能快速地呈現(xiàn)任意大小的數(shù)據(jù)集。
• 可以通過(guò)JS對(duì)象、JSON、CSV、PHP、AJAX或MySQL來(lái)加載數(shù)據(jù)。
• 提供完整且易讀的API。
• 通過(guò)ZingChart的幫助中心、Stack Overflow、電子郵件、以及聊天工具，提供免費(fèi)和高級(jí)的技術(shù)支持。
• 客戶群：Microsoft、Boeing、Adobe、Apple、Cisco、Google、以及Alcatel等。

定價(jià)

只要擁有其品牌許可證，便能免費(fèi)擁有其圖表庫(kù)的完全訪問(wèn)權(quán)限。而對(duì)于商業(yè)用途，則需購(gòu)買(mǎi)許可證，售價(jià)為199美元起。

更多信息

官方網(wǎng)站：http://zingchart.com/

文檔：http://zingchart.com/docs/

下載鏈接：http://zingchart.com/try/

結(jié)論

上面所列的十款JavaScript圖表庫(kù)可謂各有千秋，有的運(yùn)行得更快、有的顯示得更漂亮、而有的卻更加靈活。正如“一千個(gè)人眼中有一千個(gè)哈姆雷特”那樣，到底選用哪一種圖表庫(kù)，最終還是取決于您手頭上的項(xiàng)目特點(diǎn)和具體的應(yīng)用需求。

原文標(biāo)題：10 Best JavaScript Charting Libraries for Any Data Visualization Need，作者：Ruslan Borovikov

【51CTO譯稿，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文譯者和出處為51CTO.com】