現在有很多圖表庫,但哪一個最好用?這可能取決於許多因素,如業務需求,數據類型,圖表本身的目的等等。在本文中,每個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版,你可以從中看到一些例子 ,查看案例
顯着特點
- 現代化的圖形設計。
- 廣泛的文檔,附帶知識庫和技巧和提示。
- 能夠導出到Excel或PDF文檔。
- 移動端適配
- 工具提示和註釋。
這個庫的網站的另一個優秀特色是他們公開使用的“在線圖表製作者”。它與JSFiddle高度相似,可讓您即時預配置圖表,分別瞭解它們的外觀和工作方式。界面甚至允許您使用自己的數據填充實時數據表,最後,當您對樣式感到滿意時,您可以保存代碼以在您自己的項目中使用。請參閱下圖,查看AmCharts在線編輯器的示例。
誰可以免費使用它?
- 教育(有水印鏈接)
- 個人(帶水印鏈接)
商業用途
直接從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 fiddles 頁面允許您按圖表類型,某些功能和元素進行過濾,從而可以快速定位作業所需的圖表。
誰可以免費使用它?
- 教育(帶水印)
- 個人(帶水印)
商業用途
如果您想在商業廣告中使用此庫,您必須從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庫,這是一個功能強大的可視化庫,在JavaScript圖表行業中佔據主導地位。
NVD3的創造者也開啓了社區發展的可行性。憑藉GitHub的強大功能,該庫仍然更新了新增功能和錯誤修復。
顯着特點
- 響應性完美,當屏幕尺寸發生變化時,圖表會適應並重新渲染以適應屏幕。
- 快速的工具提示和圖表渲染。
- 折線圖取景器;精確分析數據,能夠深入查看圖形數據的特定部分。
- 通過單擊圖例進行過濾以在圖表上顯示隱藏數據。
- 通過nvd3網站進行實時圖表編輯/測試。
- 引人注目的圖形設計。
現在這個圖表庫背後的社區發佈了一個“全新api”,其中包含一個界面,可以在一個地方查看所有圖表演示。見這裏。
誰可以免費使用它?
- 商業
- 教育
- 個人
是否開源?
是的,這個可視化庫是完全開源的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或主網站下載它。
- 從網站下載.
- 從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”。
它有什麼圖表?
| 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下載源文件。請參閱以下鏈接 -
6. High Charts
High Charts被世界各地的一些公司使用,包括Facebook,IBM,MasterCard和StackOverflow。該庫基本上包含了您可能需要的每個圖表,它甚至提供了一系列不同的活動風格的儀表圖表,速度計甚至電錶式儀表。它可能是有關可用圖表類型的最先進的庫,但當然,這需要商業用途。
顯着特點
- 針對響應式設計和觸摸設備進行了優化。
- 能夠使用大數據。
- 在懸停上渲染工具提示是非常快速的。
- 能夠註釋圖表。
- 數據可以直接從CSV文件加載到圖表中。
該庫的另一個令人難以置信的功能是免費編輯器界面。此接口允許客戶端用戶從頭到尾設計和配置圖表,只要數據已準備好加載即可。這意味着客戶可以準確選擇他們想要查看的圖表。它甚至可以自定義爲圖表系列和文本的字體系列和顏色。
對誰免費開放?
- 教育
- 個人
商業用途
對於商業用途,您必須從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圖表庫相對較新。
特點
- 真正的跨瀏覽器渲染。這些圖表適用於所有主流瀏覽器和IE8!
- 每個圖表都內置了美麗的過渡。
- 導出爲.JPG或.PNG功能。
- 通過圖表底部的勾選框可以輕鬆過濾數據。
- 從屏幕上的html表加載數據。
誰可以免費使用?
- 商業
- 教育
- 個人
是否是開源?
對對對!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開始渲染!當然,它也適用於大多數其他流行的瀏覽器。雖然這個庫只有一種圖表類型,但對於一些解決方案來說它可以很方便。從製造儀表板到實時天氣報告。
特點
- 支持IE6
- 完全響應。
- 可配置的“間隔”指定圖表部分的顏色,例如,以亮綠色渲染的0-30。
- 優雅的可定製指針。
- 實時刷新。
誰可以免費使用它?
- 商業
- 教育
- 個人
是否是開源?
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存儲庫下載。我還用這個庫寫了一篇關於創建計量表的文章。
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文檔庫,深入介紹了所使用的類和方法。毫無疑問,這是一個完善的基礎。完全開源,您可以根本自定義它以滿足您的需求。
顯着特點
- 深入的API。
- 關於在圖表中使用“插件”的教程。
- 基於SVG
- ‘Drag’ 或 ‘Highlight’可視化的某些區域
對誰是免費?
- 商業
- 教育
- 個人
是否是開源?
是的,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存儲庫中獲取源文件。
11. C3.JS
關於這個庫的一件非常酷的事情是創作者在C3.JS的主頁上添加了一個視覺交互式演示。在觀看的同時,您可以開始瞭解它可以做什麼以及它有多強大。除此之外,還要享受愉悅的設計。它可能是唯一一個展示這樣的數據可視化庫的類型,其他人也應該加入這種方法。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 GitHub.
- Download ES6 source files on GitHub.
- Getting started with DyGraphs.
- Example gallery with JsFiddles.
14. Google Charts
Google不僅提供通用圖形樣式圖表,還提供了組織,樹形圖和儀表等風格的進一步數據可視化技術。對於想要離線使用它的人來說,它有一個小小的缺點,因爲它的API只能通過互聯網連接使用。
顯著特點
這個非常令人興奮的圖書館有許多很酷的功能,你不會在其他地方看到。其中一些功能包括
- 數據註釋或數據角色,它基本上允許您標記特定圖表中的靜態點。
- 跨圖表的動畫。
- 完全控制數據點,能夠將點變形爲任意形狀。
您目前是否將數據存儲在Google表格或Fusion表格中?沒問題,用強大的Google API攝取數據並將數據直接注入可視化,它甚至可以與Sales Force界面集成,這對於想要從他們的數據製作儀表板的企業來說是一個額外的好處。
我寫了一篇名爲什麼是谷歌圖表的文章,深入解釋了這個庫的功能。或者從中瞭解更多
誰可以免費使用它?
- 商業
- 教育
- 個人
是否是開源?
不,遺憾的是,互聯網巨頭的圖表庫並不是開源的,但是,如果你對此不介意,那麼你很幸運。但請記住,它不是開源的並不意味着它不能免費使用。
它有什麼圖表?
| 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通俗易懂,並提供了許多圖表的實例。
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)。
特點
- 二維和三維能力。
- 爲重型數據集做好準備。
- 縮放,滾動和排序功能。
- 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。
比較一下吧
讓我們看看這些圖表庫如何相互權衡。請參閱下面的數據表,希望能幫助您做出更容易使用的決定。
總結
JavaScript圖表世界中有很多機會,這些庫爲偉大的想法提供了堅實的基礎。長長的數據可視化列表絕不是唯一可用的資源,可以在Wikipedia的JavaScript庫比較上看到幾乎所有可用的庫。這種性質的圖書館可以完成許多任務,希望這些差異化的工具選擇能夠幫助您成功完成所需的數據分析。