2018年最佳JavaScript數據可視化和圖表庫

（給前端大全加星標，提升前端技能）

英文：Dan Englishby  譯文：眾成翻譯/小生 

zcfy.cc/article/the-best-javascript-data-visualization-charting-libraries-2018

現在有很多圖表庫，但哪一個最好用？這可能取決於許多因素，如業務需求，數據類型，圖表本身的目的等等。在本文中，每個JavaScript圖表庫將與一些關鍵因素進行比較，包括圖表類型，商業或免費和開源狀態。這些圖表庫通過實踐經驗從而進行了徹底的分析，以最大限度地進行最佳比較。

1. React-Vis

ReactJS是Facebook團隊所創作的令人驚喜的前端框架。如果你已經在使用React了，那麼你會很高興得知這個庫是專門為React框架而製作的。React-vis帶有易於包裝的可視化react-components，可供您使用。有超過10個圖形組件，可以快速開發並將該庫集成到數據豐富的環境中。

特點

API數據注入

優雅的過渡

以canvas或SVG呈現

注釋功能

工具提示

誰可以免費使用它?

它是開源的?

該庫已經由其社區在GitHub上開發。此外，它在MIT許可下註冊，這意味著您可以fork，甚至幫助開發。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

這個基於反應的圖表庫可以通過GitHub存儲庫下載或通過NPM包管理器安裝。請參閱以下連結並查看文檔。

2. AmCharts

AmCharts在滿足每個數據可視化需求方面非常徹底。它們幾乎可以設想每種類型的圖表，隨時可以填充有意義的數據。該庫擁有大量示例展示的功能，涵蓋了許多圖形類型和自定義。

但是，有一個小缺點，要在商業環境中使用，您必須購買許可證。AmCharts正在準備發布他們令人難以置信的庫的第4版，你可以從中看到一些例子 ，查看案例3

顯著特點

現代化的圖形設計

廣泛的文檔，附帶知識庫和技巧和提示

能夠導出到Excel或PDF文檔

移動端適配

工具提示和注釋

這個庫的網站的另一個優秀特色是他們公開使用的「在線圖表製作者」。它與JSFiddle高度相似，可讓您即時預配置圖表，分別了解它們的外觀和工作方式。界面甚至允許您使用自己的數據填充實時數據表，最後，當您對樣式感到滿意時，您可以保存代碼以在您自己的項目中使用。請參閱下圖，查看AmCharts在線編輯器4的示例。

誰可以免費使用它？

商業用途

直接從AmCharts購買許可證，他們有一系列購買選擇，包括根據購買的許可證的倍數進行額外折扣。

它是開源的?

不，遺憾的是，但是，它仍然可以免費使用，並在圖表的左上角突出顯示一個小連結。

它有什麼圖表？

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用？

這個圖表庫可以通過GitHub存儲庫下載或通過NPM包管理器安裝。請參閱以下連結並查看文檔。

3. Fusion Charts

這個免費和優質的圖表庫一共有90多個圖表數組，可以完美地呈現所有數據可視化目的。FusionCharts提供一個免費的試用版，如果你不介意水印的話，它將永遠免費用於個人和教育目的。在這裡，通過一些預先設計好的指示板，查看一些正在運行的圖表的優秀演示。這些指示板讓您真正了解它們在一些實際應用程式中的外觀。

該庫還具有大量的地圖，其中包含一些高級功能，這些功能對某些數據場景非常有用。這些非常值得一試！

特點

一系列的demo案例供參考

回歸和趨勢線功能

提供3D圖表

可以單擊連結的圖表以呈現新數據

該庫的另一個熱門功能是在JSFiddle演示中查看每個圖表的選項。這可以實現即時調整和播放，是一個很好的工具，可以幫助您學習這個庫。chart fiddles9 頁面允許您按圖表類型，某些功能和元素進行過濾，從而可以快速定位作業所需的圖表。

誰可以免費使用它?

商業用途

如果您想在商業廣告中使用此庫，您必須從FusionCharts購買許可證，許可證將打開所有限制並在特定圖表上發布水印。

它是開源的嗎？

不，這個特定的可視化庫不是開源的。

它有什麼圖表？

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用？

首先，您需要註冊免費試用版或購買許可證，之後，可以通過框架過濾出令人驚嘆的文檔。例如，angular JS，React或Vue。請參閱以下連結。

4. NVD3

NVD3提供了一套優雅的可視化圖表，並仔細考慮了視覺設計。這些圖表不僅在您的網頁上看起來很棒，而且它們可以做他們想做的事情。與此列表中的其他庫相比，它相當小，有許多圖表不可用，但是，大多數常規圖形類型都存在。NVD3依賴於D3.JS庫12，這是一個功能強大的可視化庫，在JavaScript圖表行業中佔據主導地位。

NVD3的創造者也開啟了社區發展的可行性。憑藉GitHub的強大功能，該庫仍然更新了新增功能和錯誤修復。

顯著特點

現在這個圖表庫背後的社區發布了一個「全新api」，其中包含一個界面，可以在一個地方查看所有圖表演示。見這裡14。

誰可以免費使用它？

是否開源?

是的，這個可視化庫是完全開源的Apache 2.0許可證。如果你能做出一些很好的補充，你甚至可以把自己置身於社區活躍的組織中。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

這個庫的一大優點是它可以在CDNJS網絡上找到。這意味著您可以直接將直接元素添加到HTML頁面，並且可以加載庫，隨時可以使用。或者，您可以通過GitHub或主網站下載它。

5. Chart.JS

可用的最佳可視化軟體包的另一個有力競爭者是Chart.js。該庫只有8種基本圖表類型，可用於即興創作更少的不同類型。每個都是完全響應，但沒有其他一些過渡效果。其最新版本2.0的一個重要特性是通過華麗的CSS3過渡來「動畫一切」的功能，增強了您的可視化效果。

顯著特點

懸停在數據點上時向滑鼠指針移動的神奇過渡工具提示

按標籤過濾;單擊圖例以在圖表上顯示隱藏數據

非數字Y軸，而是標籤

通過折線圖插值輕鬆定製

誰可以免費使用它？

是否是開源？

Chart.js可視化庫完全開源，具有MIT許可證，可用於修改，分發和使用。源文件也可以在GitHub上「fork」。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用？

Chart.js提供了大量的文檔庫，包括有關安裝庫的精確說明。該庫可以使用Bower，NPM，jsDelivr快速安裝，甚至可以從CDNJS連結。或者，直接從GitHub Repo下載源文件。請參閱以下連結 -

Getting Started20

Download source files21

Documentation22

6. High Charts

High Charts被世界各地的一些公司使用，包括Facebook，IBM，MasterCard和StackOverflow。該庫基本上包含了您可能需要的每個圖表，它甚至提供了一系列不同的活動風格的儀表圖表，速度計甚至電錶式儀表。它可能是有關可用圖表類型的最先進的庫，但當然，這需要商業用途。

顯著特點

針對響應式設計和觸摸設備進行了優化

能夠使用大數據

在懸停上渲染工具提示是非常快速的

能夠注釋圖表

數據可以直接從CSV文件加載到圖表中

該庫的另一個令人難以置信的功能是免費編輯器23界面。此接口允許客戶端用戶從頭到尾設計和配置圖表，只要數據已準備好加載即可。這意味著客戶可以準確選擇他們想要查看的圖表。它甚至可以自定義為圖表系列和文本的字體系列和顏色。

對誰免費開放?

商業用途

對於商業用途，您必須從HighCharts網站購買許可證。每個許可證都有12個月的免費高級支持。

是否是開源?

是的，令人興奮的是，如果您使用正確的許可證，創作者已經向庫發出了修改許可。例如，如果您購買了許可證，則可以對其進行修改以滿足特定需求。如果您免費使用它作為個人項目，您仍然可以修改它！

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

通過網站下載源文件。

7. ToastUI Charts

ToastUI能夠在IE8上正常魚腥。他們的圖表在Internet Explorer 8和Chrome上的工作方式相同，這非常了不起。與此列表中的其他一些相比，ToastUI圖表庫相對較新。

特點

誰可以免費使用?

是否是開源?

對對對！ToastUI完全免費使用和開源。它帶有自己的GitHub存儲庫，可以進行分叉或下載。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

該庫可在NPM包管理器和他們自己的內容傳送網絡中使用。或者，您可以下載源文件並查看包含以下連結的文檔。

8. JustGage

該庫專為Gauge風格的數據可視化而設計，提供一系列高度可配置的Gauge圖表。並且，因為它純粹基於SVG，所以Gauges可以從Internet Explorer 6開始渲染！當然，它也適用於大多數其他流行的瀏覽器。雖然這個庫只有一種圖表類型，但對於一些解決方案來說它可以很方便。從製造儀錶板到實時天氣報告。

特點

誰可以免費使用它?

是否是開源?

JustGage是通過MIT許可證完全開源的。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

JustGage依賴Raphael 來實現。兩個JustGage JavaScript源都可以從CDNJS網絡中獲取或直接從GitHub存儲庫下載。我還用這個庫寫了一篇關於創建計量表29的文章。

在GitHub上下載源文件30

JustGage入門31

9. DC.js – Dimensional Charting

通過單擊一個圖上的特定數據點，其他人使用新數據進行更新，維度圖表非常精彩。DC使用一個名為crossfilter的優秀JavaScript庫來實現這些動態可視化。

但是這個庫有一個缺點，它不擅長使用的遠程鏡頭。要使用這些圖表，建議您查看文檔並研究一些可用的示例。

顯著特點

使用CrossFilter.js和D3.js

多維數據過濾

美麗的過渡圖表

誰可以免費使用它?

是否是開源？

該庫是通過Apache 2.0許可證完全開源的。這一點特別棒，因為這個庫如何適應D3.js製作的圖表都有很大的空間。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

在GitHub上查看存儲庫頁面，獲取有關使用此庫進行設置的許多有用連結。另外，請參閱下面的一些連結。

10. PlottableJS

Plottable是依賴於複雜的D3.js數據可視化庫的另一組圖表。有六種不同的圖表類型可供選擇，您可以立即啟動和運行。Plottable提供了一個很好的API文檔庫，深入介紹了所使用的類和方法。毫無疑問，這是一個完善的基礎。完全開源，您可以根本自定義它以滿足您的需求。

顯著特點

對誰是免費?

是否是開源?

是的，Plottable是免費的，開源的，可以隨時用於任何項目。它可以用來創造更高級的東西。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

使用這個開源產品，訪問他們的網站，您將找到匹配的源文件和文檔。或者，可以從專用的GitHub存儲庫中獲取源文件。

PlottableJS34

GitHub Source35

Documentation36

11. C3.JS

關於這個庫的一件非常酷的事情是創作者在C3.JS的主頁37上添加了一個視覺交互式演示。在觀看的同時，您可以開始了解它可以做什麼以及它有多強大。除此之外，還要享受愉悅的設計。它可能是唯一一個展示這樣的數據可視化庫的類型，其他人也應該加入這種方法。C3提供將實時數據API無縫集成到其圖表中。圖表更新了過渡大師班，非常容易讓人眼前一亮。總的來說，C3是一種打包資源，可以在幾分鐘內為您的網絡應用程式帶來精美的可視化效果。

顯著特點

豐富的教程和文檔

移動端響應

工具提示集成

可過濾的數據系列

可轉換 - 使用提供的內置腳本輕鬆切換圖表類型

誰可以免費使用它？

是否是開源?

JustGage是通過MIT許可證完全開源的。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

C3提供了入門指南，指導如何使用項目進行基本庫設置。使用以下連結下載源文件。

12. n3Charts

n3圖表專門用於AngularJS框架。這意味著您可以快速設置Angular項目中的新圖表，而無需進行正確的編碼。N3提供了各種各樣的交互式圖表，可以使用標準化的JSON繪製出來。版本2最近發布了新的性能更新，重新設計的樣式和更光滑的過渡。

顯著特點

專為AngularJS無縫工作而設計

工具提示功能

Line interpolation控制

區域填充效果

誰可以免費使用它?

是否是開源?

免費用於所有目的和開源。最新版本2已經與MIT許可證一起發布。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

C3提供了入門指南，指導如何使用項目進行基本庫設置。使用以下連結下載源文件。

13. DyGraphs

DyGraphs非常適合製造和工程控制儀錶板。藉助多圖同步功能，這些圖表可以捕獲大量數據分析。這個基於折線圖的庫在任何頁面上看起來都很優雅，突出顯示的區域既有意義又美觀。DyGraphs畫廊涵蓋了一系列動手資源和學習指南。與JSFiddle聯繫以儘快啟動。

特點

線性回歸

跨多個圖表同步

縮放功能

突出顯示的地區

功能強大，為大數據做好準備

誰可以免費使用它?

是否是開源?

是的，根據MIT許可，DyGraphs是免費的開源軟體。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

C3可以通過GitHub上的repo下載，也可以通過NPM等包管理器安裝。基於ES6的用戶也有一個新的存儲庫，它預先設置了帶有ES6語法的庫的工作示例。

Download standard source files on GitHub42.

Download ES6 source files on GitHub43.

Getting started with DyGraphs44.

Example gallery with JsFiddles45.

14. Google Charts

Google不僅提供通用圖形樣式圖表，還提供了組織，樹形圖和儀表等風格的進一步數據可視化技術。對於想要離線使用它的人來說，它有一個小小的缺點，因為它的API只能通過網際網路連接使用。

顯著特點

這個非常令人興奮的圖書館有許多很酷的功能，你不會在其他地方看到。其中一些功能包括

您目前是否將數據存儲在Google表格或Fusion表格中？沒問題，用強大的Google API攝取數據並將數據直接注入可視化，它甚至可以與Sales Force界面集成，這對於想要從他們的數據製作儀錶板的企業來說是一個額外的好處。

我寫了一篇名為什麼是谷歌圖表47的文章，深入解釋了這個庫的功能。或者從中了解更多

誰可以免費使用它?

是否是開源?

不，遺憾的是，網際網路巨頭的圖表庫並不是開源的，但是，如果你對此不介意，那麼你很幸運。但請記住，它不是開源的並不意味著它不能免費使用。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

開始使用Google圖表非常簡單，它對API通俗易懂，並提供了許多圖表的實例。

Get started48

Documentation49

15. LeafletJs

Leaflet是交互式地圖的第一站。它精美的渲染直觀地圖是一個夢想。開始使用庫就像傳遞一組地理坐標和縮放規範級別一樣簡單。LeafletJS完全適合行動裝置，在您的設備上呈現像素完美。它甚至支持包括Internet Explorer 7在內的傳統瀏覽器。這個基於地圖的庫可用於大量創意，Facebook和Pinterest等大公司也已經在使用它們。

顯著特點

地圖控制項

縮放/旋轉/縮放

Bubble 彈出窗口

自定義指針或標記

事件跟蹤

誰可以免費使用它?

是否是開源?

是的，Leaflet地圖是開源的。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

開始使用Google圖表非常簡單，獲取設置的文檔很容易理解，並提供了許多屏幕上圖表的實例。

16. VisJs

VisJS可能看起來過時，但不要被它的外表蒙蔽了。毫無疑問，這個庫非常強大，具有三維圖表繪製功能，可以與一系列技術一起使用。Vis已被製作出來，可以無縫地渲染龐大的數據集。請參見他們的示例庫[here]（http://visjs.org/showcase/index.html）。53

特點

二維和三維能力

為重型數據集做好準備

縮放，滾動和排序功能

Interpolation 控制

誰可以免費使用它?

是否是開源?

VIS根據兩個開源許可證授權，即Apache和MIT。這個庫背後的團隊正積極尋找貢獻者，以幫助進一步發展。

它有什麼圖表?

| Bar | Multi Bar | Stacked Bar | Pie | Donut | Line | Multi Line | Annotation | Area | Bubble | Pyramid | Funnel | Marimekko | Scatter | Candlestick | Gant | Gauge | Geo/Map | TreeMap | Bullet | Spark | Heat | Radar |

如何使用?

您可以通過連結到CDNJS連結，通過NPM安裝或直接下載源文件來快速使用VisJS。

Download & Install54

Documentation55

比較一下吧

讓我們看看這些圖表庫如何相互權衡。請參閱下面的數據表，希望能幫助您做出更容易使用的決定。

總結

JavaScript圖表世界中有很多機會，這些庫為偉大的想法提供了堅實的基礎。長長的數據可視化列表絕不是唯一可用的資源，您可以在Wikipedia的JavaScript庫比較56上看到幾乎所有可用的庫。這種性質的圖書館可以完成許多任務，希望這些差異化的工具選擇能夠幫助您成功完成所需的數據分析。

文內連結

https://github.com/uber/react-vis

https://uber.github.io/react-vis/documentation/welcome-to-react-vis

https://codepen.io/collection/AevpRB/

https://live.amcharts.com/new/edit/

https://www.amcharts.com/download/

https://www.amcharts.com/online-store/

https://www.amcharts.com/knowledge-base/

https://live.amcharts.com/new/edit/

https://www.fusioncharts.com/javascript-chart-fiddles/

https://www.fusioncharts.com/download/

https://www.fusioncharts.com/dev/

https://d3js.org/

http://nvd3.org/livecode/index.html

http://nvd3-community.github.io/nvd3/examples/documentation.html

http://nvd3.org/

https://github.com/novus/nvd3

https://cdnjs.com/libraries/nvd3

https://cdnjs.com/libraries/d3/

http://nvd3-community.github.io/nvd3/examples/documentation.html

http://www.chartjs.org/docs/latest/getting-started/installation.html

https://github.com/chartjs

http://www.chartjs.org/docs/latest/

https://www.highcharts.com/blog/news/240-announcing-the-free-embedable-highcharts-editor/

https://www.highcharts.com/products/highcharts/

https://www.highcharts.com/docs

https://github.com/nhnent/tui.chart

https://nhnent.github.io/tui.chart/latest/

https://github.com/nhnent/tui.chart#via-contents-delivery-network-cdn

https://www.codewall.co.uk/creating-gauge-charts-with-the-justgage-javascript-library/

https://github.com/toorshia/justgage

https://www.codewall.co.uk/creating-gauge-charts-with-the-justgage-javascript-library/

https://github.com/dc-js/dc.js

http://dc-js.github.io/dc.js/docs/stock.html

http://plottablejs.org/

https://github.com/palantir/plottable

http://plottablejs.org/docs/modules/plottable.html

https://c3js.org/

https://c3js.org/gettingstarted.html

https://c3js.org/gettingstarted.html

https://c3js.org/gettingstarted.html

https://c3js.org/gettingstarted.html

https://github.com/danvk/dygraphs

https://github.com/danvk/dygraphs-es6

http://dygraphs.com/tutorial.html

http://dygraphs.com/gallery/

https://developers.google.com/chart/interactive/docs/roles

https://www.codewall.co.uk/what-are-google-charts/

https://developers.google.com/chart/interactive/docs/quick_start

https://developers.google.com/chart/glossary

https://github.com/Leaflet

https://humangeo.github.io/leaflet-dvf/

https://leafletjs.com/examples.html

http://visjs.org/showcase/index.html

http://visjs.org/index.html#download_install

http://visjs.org/docs/graph2d/

https://en.wikipedia.org/wiki/Comparison_of_JavaScript_charting_libraries

覺得本文對你有幫助？請分享給更多人

關注「前端大全」加星標，提升前端技能