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

時間 2019-11-09

標籤年度最佳 javascript 數據可視化圖表欄目 JavaScript 简体版

原文原文鏈接

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

1. React-Vis

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

特色前端

API數據注入。
優雅的過渡。
以canvas或SVG呈現。
註釋功能。
工具提示。

誰能夠無償使用它?java

商業
教育
我的

它是開源的?react

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

它有什麼圖表?es6

如何使用?canvas

這個基於反應的圖表庫能夠經過GitHub存儲庫下載或經過NPM包管理器安裝。請參閱如下連接並查看文檔。api

2. AmCharts

AmCharts在知足每一個數據可視化需求方面很是完全。它們幾乎能夠設想每種類型的圖表，隨時能夠填充有意義的數據。該庫擁有大量示例展現的功能，涵蓋了許多圖形類型和自定義。

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

顯着特色

現代化的圖形設計。
普遍的文檔，附帶知識庫和技巧和提示。
可以導出到Excel或PDF文檔。
移動端適配
工具提示和註釋。

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

誰能夠無償使用它？

教育（有水印連接）
我的（帶水印連接）

商業用途

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

它是開源的?

不，遺憾的是，可是，它仍然能夠無償使用，並在圖表的左上角突出顯示一個小連接。

它有什麼圖表？

如何使用？

這個圖表庫能夠經過GitHub存儲庫下載或經過NPM包管理器安裝。請參閱如下連接並查看文檔。

3. Fusion Charts

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

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

特色

一系列的demo案例供參考
迴歸和趨勢線功能。
提供3D圖表。
能夠單擊連接的圖表以呈現新數據。

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

誰能夠無償使用它?

教育（帶水印）
我的（帶水印）

商業用途

若是您想在商業廣告中使用此庫，您必須從FusionCharts購買許可證，許可證將打開全部限制並在特定圖表上發佈水印。

它是開源的嗎？

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

它有什麼圖表？

如何使用？

首先，您須要註冊免費試用版或購買許可證，以後，能夠經過框架過濾出使人驚歎的文檔。例如，angular JS，React或Vue。請參閱如下連接。

下載/購買。下載源文件或使用Bower或NPM直接下載到您的項目。
文檔和入門

4. NVD3

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

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

顯着特色

響應性完美，當屏幕尺寸發生變化時，圖表會適應並從新渲染以適應屏幕。
快速的工具提示和圖表渲染。
折線圖取景器;精確分析數據，可以深刻查看圖形數據的特定部分。
經過單擊圖例進行過濾以在圖表上顯示隱藏數據。
經過nvd3網站進行實時圖表編輯/測試。
引人注目的圖形設計。

如今這個圖表庫背後的社區發佈了一個「全新api」，其中包含一個界面，能夠在一個地方查看全部圖表演示。見這裏。

誰能夠無償使用它？

商業
教育
我的

是否開源?

是的，這個可視化庫是徹底開源的Apache 2.0許可證。若是你能作出一些很好的補充，你甚至能夠把本身置身於社區活躍的組織中。

它有什麼圖表?

如何使用?

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

從網站下載.
從GitHub存儲庫下載
CDNJS上的NVD3 & d3.js依賴 (Version 3.5.3 Recommended)
文檔和示例

5. Chart.JS

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

顯着特色

懸停在數據點上時向鼠標指針移動的神奇過渡工具提示。
按標籤過濾;單擊圖例以在圖表上顯示隱藏數據。
非數字Y軸，而是標籤。
經過折線圖插值輕鬆定製。

誰能夠無償使用它？

商業
教育
我的

是不是開源？

Chart.js可視化庫徹底開源，具備MIT許可證，可用於修改，分發和使用。源文件也能夠在GitHub上「fork」。

它有什麼圖表?

如何使用？

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

6. High Charts

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

顯着特色

針對響應式設計和觸摸設備進行了優化。
可以使用大數據。
在懸停上渲染工具提示是很是快速的。
可以註釋圖表。
數據能夠直接從CSV文件加載到圖表中。

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

對誰免費開放?

教育
我的

商業用途

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

是不是開源?

是的，使人興奮的是，若是您使用正確的許可證，創做者已經向庫發出了修改許可。例如，若是您購買了許可證，則能夠對其進行修改以知足特定需求。若是您無償使用它做爲我的項目，您仍然能夠修改它！

它有什麼圖表?

如何使用?

經過網站下載源文件。

7. ToastUI Charts

ToastUI可以在IE8上正常魚腥。他們的圖表在Internet Explorer 8和Chrome上的工做方式相同，這很是了不得。與此列表中的其餘一些相比，ToastUI圖表庫相對較新。

特色

真正的跨瀏覽器渲染。這些圖表適用於全部主流瀏覽器和IE8！
每一個圖表都內置了美麗的過渡。
導出爲.JPG或.PNG功能。
經過圖表底部的勾選框能夠輕鬆過濾數據。
從屏幕上的html表加載數據。

誰能夠無償使用?

商業
教育
我的

是不是開源?

對對對！ToastUI徹底無償使用和開源。它帶有本身的GitHub存儲庫，能夠進行分叉或下載。

它有什麼圖表?

如何使用?

該庫可在NPM包管理器和他們本身的內容傳送網絡中使用。或者，您能夠下載源文件並查看包含如下連接的文檔。

8. JustGage

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

特色

支持IE6
徹底響應。
可配置的「間隔」指定圖表部分的顏色，例如，以亮綠色渲染的0-30。
優雅的可定製指針。
實時刷新。

誰能夠無償使用它?

商業
教育
我的

是不是開源?

JustGage是經過MIT許可證徹底開源的。

它有什麼圖表?

如何使用?

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

9. DC.js – Dimensional Charting

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

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

顯着特色

使用CrossFilter.js和D3.js
多維數據過濾。
美麗的過渡圖表。

誰能夠無償使用它?

商業
教育
我的

是不是開源？

該庫是經過Apache 2.0許可證徹底開源的。這一點特別棒，由於這個庫如何適應D3.js製做的圖表都有很大的空間。

它有什麼圖表?

如何使用?

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

10. PlottableJS

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

顯着特色

深刻的API。
關於在圖表中使用「插件」的教程。
基於SVG
‘Drag’ 或 ‘Highlight’可視化的某些區域

對誰是免費?

商業
教育
我的

是不是開源?

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

它有什麼圖表?

如何使用?

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

11. C3.JS

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

顯着特色

豐富的教程和文檔。
移動端響應。
工具提示集成。
可過濾的數據系列。
可轉換 - 使用提供的內置腳本輕鬆切換圖表類型。

誰能夠無償使用它？

商業
教育
我的

是不是開源?

JustGage是經過MIT許可證徹底開源的。

它有什麼圖表?

如何使用?

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

12. n3Charts

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

顯著特色

專爲AngularJS無縫工做而設計。
工具提示功能。
Line interpolation控制。
區域填充效果。

誰能夠無償使用它?

商業
教育
我的

是不是開源?

免費用於全部目的和開源。最新版本2已經與MIT許可證一塊兒發佈。

它有什麼圖表?

如何使用?

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

13. DyGraphs

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

特色

線性迴歸。
跨多個圖表同步。
縮放功能。
突出顯示的地區。
功能強大，爲大數據作好準備。

誰能夠無償使用它?

商業
教育
我的

是不是開源?

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

它有什麼圖表?

如何使用?

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

14. Google Charts

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

顯著特色

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

數據註釋或數據角色，它基本上容許您標記特定圖表中的靜態點。
跨圖表的動畫。
徹底控制數據點，可以將點變形爲任意形狀。

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

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

誰能夠無償使用它?

商業
教育
我的

是不是開源?

不，遺憾的是，互聯網巨頭的圖表庫並非開源的，可是，若是你對此不介意，那麼你很幸運。但請記住，它不是開源的並不意味着它不能無償使用。

它有什麼圖表?

如何使用?

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

- Get started
- Documentation

15. LeafletJs

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

顯著特色