14個最好的 JavaScript 數據可視化庫

時間 2019-11-05

標籤最好 javascript 數據可視化欄目 JavaScript 简体版

原文原文鏈接

翻譯：瘋狂的技術宅
原文：https://www.monterail.com/blo...javascript

本文首發微信公衆號：jingchengyideng
歡迎關注，天天都給你推送新鮮的前端技術文章前端

你的程序有多麼依賴數據？即便應用程序不徹底面向業務，你也可能須要管理面板、儀表板、性能跟蹤以及用戶很是喜歡的相似分析功能的數據。java

對於 JS 開發人員來講，可視化數據的能力與製做交互式網頁同樣有價值。特別是二者常常同時出現。隨着 JavaScript 在數據可視化領域的不斷普及，市場上甚至還會出現可以爲 Web 建立漂亮圖表的新庫。react

咱們選擇了14個用於數據可視化的 JavaScript 庫（這些庫目前是最受歡迎或最有趣的）並作了一些研究，看看哪一個最適合咱們的項目。在這裏要考慮許多因素：git

我想要什麼樣的圖表？餅圖，地理圖，折線圖, 條形圖？
有些庫只支持少數幾種類型。首先要知道本身到底須要哪些。
數據集有多大？
基於 SVG 的庫一般更適合中小型數據集，由於每一個元素都是惟一的節點並存在於 DOM 樹中。這也意味着它們容許被直接訪問，從而具備更多的靈活性。雖然你能夠藉助一些數據聚合算法、智能內存管理和其餘花哨的技巧使它們可以處理大型數據集，可是使用基於 Canvas 的大型數據集工具是更可靠的選擇。Canvas 很是快。
該應用是用於Web端、移動端仍是二者兼而有之？
有些庫在響應性方面更好，而其餘一些庫有本身的 React Native 版本，如 Victory。
瀏覽器支持給定的庫嗎？
你使用哪一種 JavaScript 框架？
確保你的數據庫庫可以順利運行。若是你在用 React，那麼使用特定於 React 的庫可能比使用包裝器更好。
你須要什麼樣的外觀？
若是你須要一些高級動畫，也應該考慮到這一點。

在某些狀況下，你可能根本不須要數據可視化庫。有時用原生 JavaScript 從頭開始編寫是個好主意。雖然開始代價很大（特別是在你第一次這樣的時候），但對於那些帶有自定義定製圖表的項目來講，可能會在將來得到回報。有時最好保持理智並在開發部分上花費更多資源，而不是試圖改造庫來知足你的特定需求。雖然一開始聽起來很可怕，可是以 SVG 爲導向的心態和幾小時的實驗 —— 誰知道呢，它可能頗有趣！程序員

若是你熟悉現代前端框架，那麼 Vue.js 在這方面尤其出色，它與 SVG 的協做垂手可得。請注意，我正在嚴格地討論基於 SVG 的圖表，由於它更容易實現。 HTML5 Canvas 只是一個位圖的繪圖表面，它並不知道內部繪製的對象是什麼 —— 它們是像素，而不是像 SVG 同樣的 DOM 元素。若是你想讓它具備交互性，須要本身去處理全部的邏輯。雖然基於 Canvas 的方法提供了大型數據集（1000多個元素）的性能優點和嚴謹的操做，但我不建議從頭開始編寫 —— 除非它是你產品的核心功能。github

那麼什麼狀況下才能使用庫？面試

當你的項目中有一個奇怪的圖表，一個須要漂亮的界面基本功能，有全部的花裏胡哨（工具提示、圖例、X/Y 軸等）的東西，或當應用須要標準化、響應和詳細的圖表，特別是須要有多種類型時。算法

最後，咱們用庫來避免一次又一次地從新發明輪子，而且大多數庫已經存在了好久，並考慮到了大多數的使用狀況。對了，他們也帶有內置的動畫效果。數據庫

在項目中嘗試全部這些庫是不可能的，下面是我根據本身和其餘人的經驗列出的的列表。請記住，在深刻了解一個庫以前，搞清楚怎樣把它集成到你的項目中老是一個好主意。最後，選哪一個是你的事 —— 這只是一個清單！

免費數據可視化庫

若是你不是一家大公司，那麼開源庫提供的選擇就足夠多了。加入你可以回答我上面提到的問題，會很容易找到完美的匹配。

一、D3.js

D3 是最受歡迎的 JS 庫之一，不只可用於數據可視化，還包括動畫、數據分析、地理和數據實應用。使用HTML，SVG 和 CSS 等技術。它有一堆龐大的 API，有些人認爲它根本不是數據可視化庫。凡是你能想到的，均可以經過這個庫完成，但它也有其缺點，學習曲線很是陡峭，並且文檔已通過時，這很容易致使混亂。

大部分 API 都暴露了對 DOM 的直接訪問，這可能與 React 或 Vue 等現代前端框架的工做方式產生衝突。但仍是有辦法解決這個問題的。有一份聲明性數據驅動文檔（簡稱d4）建議讓框架操縱 DOM 並嚴格使用 D3 做爲數據 API。你能夠在這裏找到更多信息和例子。

適用於：任何環境

GitHub：https://github.com/d3
演示：https://github.com/d3/d3/wiki...

二、Recharts

爲 React 專用。 Recharts 在使用 D3 做爲引擎，並導出了聲明性組件。它很是輕巧，能夠經過渲染 SVG 元素來建立漂亮的交互式圖表。它易於使用並且文檔完整。圖表是可自定義的，庫自己提供了一些很好的例子。它的靜態圖表性能表現很是出色，幷包含內置的通用圖表工具，好比：圖例工具提示和標籤。在同一頁面和大型數據集上處理多個動畫圖表時可能會出現滯後現象，不過它仍適用於大多數應用場合。

有點使人不安的是在 GitHub 上有大量未解決的問題。這些問題可能並不重要，但做者彷佛並非很熱血回答這些問題。因此若是你遇到困難，請作好深刻研究代碼的準備。

適用於：React
GitHub：https://github.com/recharts
例子：http://recharts.org/en-US/exa...

三、Victory

這是一組專爲 React 和 React Native 設計的模塊化圖表組件。 Victory 在基礎方面作得很好 —— 例如座標軸定製、標籤、爲單個圖表傳遞不一樣的數據集都很是簡單，而且對樣式和行爲進行調整時很是簡單直觀。它真的很好用，能讓你用最少的代碼建立漂亮的圖表。這是絕對值得一試的跨平臺的庫。

適用於：React，React Native

GitHub：https://github.com/Formidable...
演示：https://formidable.com/open-s...

四、React-vis

這是 Uber 開發的一個簡單的可視化庫，它容許你建立全部經常使用的圖表類型：條形圖，樹形圖，折線圖，面積圖等。它的 API 很是簡單，並且很是靈活。它很輕量，動畫簡單但流暢。還容許基於現有元素編寫自定義圖表。

然而，它極簡主義的造型可能並不適合每一個人的口味（但我喜歡它！）。雖然反響平平，但其文檔簡單易讀。

適用於：React

GitHub：https://uber.github.io/react-...
例子：https://uber.github.io/react-...

五、ApexCharts

這是一個至關簡潔的 SVG 圖表庫，還附帶 Vue.js 和 React 包裝器。它在不一樣設備上的效果看起來都很不錯，並且該庫容許自定義徒步，並提供全面的文檔。在較大的數據集上性能可能會受到影響，所以請確保它確實適合你的項目。根據 ApexCharts 的做者 Juned Chhipa 的說法，該庫是爲了更容易縮放、平移、滾動數據、在圖表上放置信息性註釋等目的而寫的。

這個庫比較新，還有很大的發展空間，但若是響應性和互動性對你來講特別重要，那麼這個漂亮的庫是值得一試的！

適用於：React，Vue.js，純 JavaScript

GitHub：https://github.com/apexcharts
例子：https://apexcharts.com/javasc...

六、Chart.js

一個很是受歡迎的開源庫，在GitHub上超過 4 萬 star。它是輕量級的，容許你用 HTML5 Canvas 元素構建響應式圖表。能夠輕鬆地對摺線圖和條形圖進行混合和匹配以組合不一樣的數據集，這是很是棒的功能。

Chart.js 默認爲你提供六種不一樣的圖表類型，它支持響應式，而且對初學者很是友好。它也是我處理大數據集時的首選庫。絕對是最有趣的開源庫之一。

適用於：React，Vue.js

GitHub：https://github.com/chartjs/Ch...
例子：https://www.chartjs.org/sampl...

七、Echarts

百度建立的這個庫對於 Web 的數據可視化很是有用。它也提供英文版本，適用於大數據集。它還支持 SVG 和 Canvas 渲染。

適用於：全部環境

GitHub：https://github.com/ecomfe/ech...
例子：https://ecomfe.github.io/echa...

八、Frappe Charts

這是一個很是簡單的庫，用於零依賴關係的圖表。它是開源的，只有 17 個貢獻者，是本列表中最小的庫之一。

Frappe Charts 的靈感來自一個相似 GitHub 視覺效果的軟件包，支持折線圖，條形圖和其餘類型的圖表。若是你正在找一個小巧輕量的包，這就是其中一個！

適用於：任何環境

GitHub：https://github.com/frappe/charts
官網：https://frappe.io/charts

九、Nivo

Nivo 是一個基於 D3 和 React 的漂亮框架，提供十四種不一樣類型的組件來呈現你的數據。它於 2017 年發佈，在2017 年 8 月 20 日做爲 ProductHunt 的產品推出。

Nivo 提供了許多自定義選項和三個渲染選項：Canvas，SVG，甚至基於 API 的HTML。它的文檔很是出色，Demo 可配置且有趣。這是一個高級庫，很是簡單，不過提供自定義可視化的餘地很小。

適用於：React

GitHub：https://github.com/plouc/nivo
官網：https://nivo.rocks/

十、Google Charts

一個很是流行的圖表Web服務，我根本沒法把它從列表中刪除。對於許多人來講，它是首選的 JS 庫，由於它提供了多種預先構建的圖表類型，例如條形圖、折線圖、區域圖、日曆圖、地理圖表等等。然而，對我來講，在大多數狀況下，這個庫有點過度，坦率地說我不建議使用它。

它是免費的，但不是開源的（和每一個 Google 產品同樣）。它在默認狀況下不是響應式的，但你可使用代碼調整圖表大小。根據圖表類型，有不一樣的自定義選項，它並不徹底適合初學者。並且你必須直接從 Google URL 而不是 NPM 包加載它。

適用於：任何環境

Google Charts 官網：https://developers.google.com...）
文檔：https://developers.google.com...

商業圖表庫

有些庫爲我的提供了免費版，但你須要付費才能在商業應用中使用它們。下面列出的都是大公司經常使用的。由於它們都是真正全面的、可定製的，並提供了很好的客戶支持。若是你是一個企業，你應該檢查出來。

十一、amCharts

這是最熱門的圖表庫之一。它漂亮設計確實可以使它在競爭中脫穎而出。蘋果、亞馬遜、美國宇航局和許多知名公司都是 amCharts 的用戶，這是很是使人印象深入的。

amCharts 是一種商業工具，每一個網站許可的起價爲 180 美圓。做爲投入的回報，你能夠得到所需的全部類型的圖表，包括地理地圖和出色的用戶支持，平均響應時間少於3小時。這對大公司來講是一個很好的解決方案。

適用於：Angular，React，Vue.js，普通JS應用，TypeScript

GitHub：https://github.com/amcharts/a...
官網：https://www.amcharts.com/

十二、CanvasJS

這是另外一種商業工具，提供可以跨設備和瀏覽器的精美圖表。不過它缺乏一些圖表類型，例如網絡圖表、迷你圖和儀表圖。此外它的學習曲線很是陡峭。

另外一方面，即便有多達 100k+ 的數據點，也很是的快，而且工做流暢。提供了四個默認主題，應該可以適合大多數場景。他們的客戶名單也使人印象深入：Apple、博世、西門子、惠普、微軟等。

適用於：Angular，React，jQuery，純 JavaScript

官網：https://canvasjs.com/
演示：https://canvasjs.com/javascri...

1三、Highcharts

一個發佈於 2009 年的 JS 庫，基於 SVG ，支持舊版瀏覽器的 VML 和 Canvas。它提供了不一樣的項目模板。 Highcharts 可以與舊版瀏覽器兼容，其中包括 Internet Explorer 6。

對於非開發人員來講，這是一個很好的解決方案，由於它有一個集成的 WYSIWYG（所見即所得）圖表編輯器。它的學習曲線很是流暢，並被許多主要參與者使用，如 Facebook 或微軟 —— 甚至有人聲稱世界上最大的 100 家公司中有 72 家曾經使用過它。這是一個付費的解決方案，價格爲1500美圓，無限制的商業許可證。

然而在光鮮的外表之下，感受就像它是在 2009 年寫的。最近個人一位同事帶我體驗了它，讓我告訴你，這並非很愉快。當你不是在深刻到代碼層擺弄它時，它很好用，可是當你想要。。。這是一件苦差事。

適用於：任何環境

GitHub：https://github.com/highcharts...
官網：https://www.highcharts.com/

1四、Zoomcharts

另外一個商業 JS 數據工具，自稱爲「世界上最具交互性的 JavaScript 圖表庫。」除了反應靈敏以外，它主要關注多點觸控手勢和在各類設備上的原生感受。該庫自誇爲美觀的可視化，只需不多的代碼就能夠輕鬆地部署在你的產品中。
Zoomchatrts 是基於 Canvas 的，在相同的數據量下，使用默認設置，它的速度比基於 SVG 的競爭對手快20倍。我找不到 Zoomcharts 的確切價格，但我發現有一些評論稱它「價格昂貴」。但不管價格怎樣，做爲回報，你都會獲得驚人的互動性、多點觸控手勢和高品質的用戶支持。

適用於：任何環境

官網：https://zoomcharts.com/en/
Demo：https://zoomcharts.com/en/jav...