摘要：適用于，演示這是開發(fā)的一個(gè)簡單的可視化庫，它允許你創(chuàng)建所有常用的圖表類型條形圖，樹形圖，折線圖，面積圖等?？梢暂p松地對折線圖和條形圖進(jìn)行混合和匹配以組合不同的數(shù)據(jù)集，這是非常棒的功能。

翻譯：瘋狂的技術(shù)宅
原文：https://www.monterail.com/blo...

本文首發(fā)微信公眾號：jingchengyideng
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

你的程序有多么依賴數(shù)據(jù)？即使應(yīng)用程序不完全面向業(yè)務(wù)，你也可能需要管理面板、儀表板、性能跟蹤以及用戶非常喜歡的類似分析功能的數(shù)據(jù)。

對于 JS 開發(fā)人員來說，可視化數(shù)據(jù)的能力與制作交互式網(wǎng)頁一樣有價(jià)值。特別是兩者經(jīng)常同時(shí)出現(xiàn)。隨著 JavaScript 在數(shù)據(jù)可視化領(lǐng)域的不斷普及，市場上甚至還會(huì)出現(xiàn)能夠?yàn)?Web 創(chuàng)建漂亮圖表的新庫。

我們選擇了14個(gè)用于數(shù)據(jù)可視化的 JavaScript 庫（這些庫目前是最受歡迎或最有趣的）并做了一些研究，看看哪個(gè)最適合我們的項(xiàng)目。在這里要考慮許多因素：

我想要什么樣的圖表？餅圖，地理圖，折線圖, 條形圖？

有些庫只支持少數(shù)幾種類型。首先要知道自己到底需要哪些。

數(shù)據(jù)集有多大？

基于 SVG 的庫通常更適合中小型數(shù)據(jù)集，因?yàn)槊總€(gè)元素都是唯一的節(jié)點(diǎn)并存在于 DOM 樹中。這也意味著它們允許被直接訪問，從而具有更多的靈活性。雖然你可以借助一些數(shù)據(jù)聚合算法、智能內(nèi)存管理和其他花哨的技巧使它們能夠處理大型數(shù)據(jù)集，但是使用基于 Canvas 的大型數(shù)據(jù)集工具是更可靠的選擇。Canvas 非?？臁?/p>

該應(yīng)用是用于Web端、移動(dòng)端還是兩者兼而有之？

有些庫在響應(yīng)性方面更好，而其他一些庫有自己的 React Native 版本，如 Victory。

瀏覽器支持給定的庫嗎？

你使用哪種 JavaScript 框架？

確保你的數(shù)據(jù)庫庫能夠順利運(yùn)行。如果你在用 React，那么使用特定于 React 的庫可能比使用包裝器更好。

你需要什么樣的外觀？

如果你需要一些高級動(dòng)畫，也應(yīng)該考慮到這一點(diǎn)。

在某些情況下，你可能根本不需要數(shù)據(jù)可視化庫。有時(shí)用原生 JavaScript 從頭開始編寫是個(gè)好主意。雖然開始代價(jià)很大（特別是在你第一次這樣的時(shí)候），但對于那些帶有自定義定制圖表的項(xiàng)目來說，可能會(huì)在未來獲得回報(bào)。有時(shí)最好保持理智并在開發(fā)部分上花費(fèi)更多資源，而不是試圖改造庫來滿足你的特定需求。雖然一開始聽起來很可怕，但是以 SVG 為導(dǎo)向的心態(tài)和幾小時(shí)的實(shí)驗(yàn) —— 誰知道呢，它可能很有趣！

如果你熟悉現(xiàn)代前端框架，那么 Vue.js 在這方面尤為出色，它與 SVG 的協(xié)作輕而易舉。請注意，我正在嚴(yán)格地討論基于 SVG 的圖表，因?yàn)樗菀讓?shí)現(xiàn)。 HTML5 Canvas 只是一個(gè)位圖的繪圖表面，它并不知道內(nèi)部繪制的對象是什么 —— 它們是像素，而不是像 SVG 一樣的 DOM 元素。如果你想讓它具有交互性，需要自己去處理所有的邏輯。雖然基于 Canvas 的方法提供了大型數(shù)據(jù)集（1000多個(gè)元素）的性能優(yōu)勢和嚴(yán)謹(jǐn)?shù)牟僮鳎也唤ㄗh從頭開始編寫 —— 除非它是你產(chǎn)品的核心功能。

那么什么情況下才能使用庫？

當(dāng)你的項(xiàng)目中有一個(gè)奇怪的圖表，一個(gè)需要漂亮的界面基本功能，有所有的花里胡哨（工具提示、圖例、X/Y 軸等）的東西，或當(dāng)應(yīng)用需要標(biāo)準(zhǔn)化、響應(yīng)和詳細(xì)的圖表，特別是需要有多種類型時(shí)。

最后，我們用庫來避免一次又一次地重新發(fā)明輪子，并且大多數(shù)庫已經(jīng)存在了很久，并考慮到了大多數(shù)的使用情況。對了，他們也帶有內(nèi)置的動(dòng)畫效果。

在項(xiàng)目中嘗試所有這些庫是不可能的，下面是我根據(jù)自己和其他人的經(jīng)驗(yàn)列出的的列表。請記住，在深入了解一個(gè)庫之前，搞清楚怎樣把它集成到你的項(xiàng)目中總是一個(gè)好主意。最后，選哪個(gè)是你的事 —— 這只是一個(gè)清單！

如果你不是一家大公司，那么開源庫提供的選擇就足夠多了。加入你能夠回答我上面提到的問題，會(huì)很容易找到完美的匹配。

D3 是最受歡迎的 JS 庫之一，不僅可用于數(shù)據(jù)可視化，還包括動(dòng)畫、數(shù)據(jù)分析、地理和數(shù)據(jù)實(shí)應(yīng)用。使用HTML，SVG 和 CSS 等技術(shù)。它有一堆龐大的 API，有些人認(rèn)為它根本不是數(shù)據(jù)可視化庫 。凡是你能想到的，都可以通過這個(gè)庫完成，但它也有其缺點(diǎn)，學(xué)習(xí)曲線非常陡峭，而且文檔已經(jīng)過時(shí)，這很容易導(dǎo)致混亂。

大部分 API 都暴露了對 DOM 的直接訪問，這可能與 React 或 Vue 等現(xiàn)代前端框架的工作方式產(chǎn)生沖突。但還是有辦法解決這個(gè)問題的。有一份聲明性數(shù)據(jù)驅(qū)動(dòng)文檔（簡稱d4）建議讓框架操縱 DOM 并嚴(yán)格使用 D3 作為數(shù)據(jù) API。你可以在這里找到更多信息和例子。

適用于：任何環(huán)境

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

為 React 專用。 Recharts 在使用 D3 作為引擎，并導(dǎo)出了聲明性組件。它非常輕巧，可以通過渲染 SVG 元素來創(chuàng)建漂亮的交互式圖表。它易于使用而且文檔完整。圖表是可自定義的，庫本身提供了一些很好的例子。它的靜態(tài)圖表性能表現(xiàn)非常出色，并包含內(nèi)置的通用圖表工具，比如：圖例工具提示和標(biāo)簽。在同一頁面和大型數(shù)據(jù)集上處理多個(gè)動(dòng)畫圖表時(shí)可能會(huì)出現(xiàn)滯后現(xiàn)象，不過它仍適用于大多數(shù)應(yīng)用場合。

有點(diǎn)令人不安的是在 GitHub 上有大量未解決的問題。這些問題可能并不重要，但作者似乎并不是很熱血回答這些問題。所以如果你遇到困難，請做好深入研究代碼的準(zhǔn)備。

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

這是一組專為 React 和 React Native 設(shè)計(jì)的模塊化圖表組件。 Victory 在基礎(chǔ)方面做得很好 —— 例如坐標(biāo)軸定制、標(biāo)簽、為單個(gè)圖表傳遞不同的數(shù)據(jù)集都非常簡單，并且對樣式和行為進(jìn)行調(diào)整時(shí)非常簡單直觀。它真的很好用，能讓你用最少的代碼創(chuàng)建漂亮的圖表。這是絕對值得一試的跨平臺的庫。

適用于：React，React Native

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

這是 Uber 開發(fā)的一個(gè)簡單的可視化庫，它允許你創(chuàng)建所有常用的圖表類型：條形圖，樹形圖，折線圖，面積圖等。它的 API 非常簡單，而且非常靈活。它很輕量，動(dòng)畫簡單但流暢。還允許基于現(xiàn)有元素編寫自定義圖表。

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

適用于：React

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

這是一個(gè)相當(dāng)簡潔的 SVG 圖表庫，還附帶 Vue.js 和 React 包裝器。它在不同設(shè)備上的效果看起來都很不錯(cuò)，而且該庫允許自定義徒步，并提供全面的文檔。在較大的數(shù)據(jù)集上性能可能會(huì)受到影響，因此請確保它確實(shí)適合你的項(xiàng)目。根據(jù) ApexCharts 的作者 Juned Chhipa 的說法，該庫是為了更容易縮放、平移、滾動(dòng)數(shù)據(jù)、在圖表上放置信息性注釋等目的而寫的。

這個(gè)庫比較新，還有很大的發(fā)展空間，但如果響應(yīng)性和互動(dòng)性對你來說特別重要，那么這個(gè)漂亮的庫是值得一試的！

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

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

一個(gè)非常受歡迎的開源庫，在GitHub上超過 4 萬 star。它是輕量級的，允許你用 HTML5 Canvas 元素構(gòu)建響應(yīng)式圖表?？梢暂p松地對折線圖和條形圖進(jìn)行混合和匹配以組合不同的數(shù)據(jù)集，這是非常棒的功能。

Chart.js 默認(rèn)為你提供六種不同的圖表類型，它支持響應(yīng)式，并且對初學(xué)者非常友好。它也是我處理大數(shù)據(jù)集時(shí)的首選庫。絕對是最有趣的開源庫之一。

適用于：React，Vue.js

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

百度創(chuàng)建的這個(gè)庫對于 Web 的數(shù)據(jù)可視化非常有用。它也提供英文版本，適用于大數(shù)據(jù)集。它還支持 SVG 和 Canvas 渲染。

適用于：所有環(huán)境

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

這是一個(gè)非常簡單的庫，用于零依賴關(guān)系的圖表。它是開源的，只有 17 個(gè)貢獻(xiàn)者，是本列表中最小的庫之一。

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

適用于：任何環(huán)境

GitHub：https://github.com/frappe/charts
官網(wǎng)：https://frappe.io/charts

Nivo 是一個(gè)基于 D3 和 React 的漂亮框架，提供十四種不同類型的組件來呈現(xiàn)你的數(shù)據(jù)。它于 2017 年發(fā)布，在2017 年 8 月 20 日作為 ProductHunt 的產(chǎn)品推出。

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

適用于：React

GitHub：https://github.com/plouc/nivo
官網(wǎng)：https://nivo.rocks/

一個(gè)非常流行的圖表Web服務(wù)，我根本無法把它從列表中刪除。對于許多人來說，它是首選的 JS 庫，因?yàn)樗峁┝硕喾N預(yù)先構(gòu)建的圖表類型，例如條形圖、折線圖、區(qū)域圖、日歷圖、地理圖表等等。然而，對我來說，在大多數(shù)情況下，這個(gè)庫有點(diǎn)過分，坦率地說我不建議使用它。

它是免費(fèi)的，但不是開源的（和每個(gè) Google 產(chǎn)品一樣）。它在默認(rèn)情況下不是響應(yīng)式的，但你可以使用代碼調(diào)整圖表大小。根據(jù)圖表類型，有不同的自定義選項(xiàng)，它并不完全適合初學(xué)者。而且你必須直接從 Google URL 而不是 NPM 包加載它。

適用于：任何環(huán)境

Google Charts 官網(wǎng)：https://developers.google.com...）
文檔：https://developers.google.com...

有些庫為個(gè)人提供了免費(fèi)版，但你需要付費(fèi)才能在商業(yè)應(yīng)用中使用它們。下面列出的都是大公司常用的。因?yàn)樗鼈兌际钦嬲娴?、可定制的，并提供了很好的客戶支持。如果你是一個(gè)企業(yè)，你應(yīng)該檢查出來。

這是最熱門的圖表庫之一。它漂亮設(shè)計(jì)確實(shí)能夠使它在競爭中脫穎而出。 蘋果、亞馬遜、美國宇航局和許多知名公司都是 amCharts 的用戶，這是非常令人印象深刻的。

amCharts 是一種商業(yè)工具，每個(gè)網(wǎng)站許可的起價(jià)為 180 美元。作為投入的回報(bào)，你可以獲得所需的所有類型的圖表，包括地理地圖和出色的用戶支持，平均響應(yīng)時(shí)間少于3小時(shí)。這對大公司來說是一個(gè)很好的解決方案。

適用于：Angular，React，Vue.js，普通JS應(yīng)用，TypeScript

GitHub：https://github.com/amcharts/a...
官網(wǎng)：https://www.amcharts.com/

這是另一種商業(yè)工具，提供能夠跨設(shè)備和瀏覽器的精美圖表。不過它缺少一些圖表類型，例如網(wǎng)絡(luò)圖表、迷你圖和儀表圖。此外它的學(xué)習(xí)曲線非常陡峭。

另一方面，即使有多達(dá) 100k+ 的數(shù)據(jù)點(diǎn)，也非常的快，并且工作流暢。提供了四個(gè)默認(rèn)主題，應(yīng)該能夠適合大多數(shù)場景。他們的客戶名單也令人印象深刻：Apple、博世、西門子、惠普、微軟等。

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

官網(wǎng)：https://canvasjs.com/
演示：https://canvasjs.com/javascri...

一個(gè)發(fā)布于 2009 年的 JS 庫，基于 SVG ，支持舊版瀏覽器的 VML 和 Canvas。 它提供了不同的項(xiàng)目模板。 Highcharts 能夠與舊版瀏覽器兼容，其中包括 Internet Explorer 6。

對于非開發(fā)人員來說，這是一個(gè)很好的解決方案，因?yàn)樗幸粋€(gè)集成的 WYSIWYG（所見即所得）圖表編輯器。它的學(xué)習(xí)曲線非常流暢，并被許多主要參與者使用，如 Facebook 或微軟 —— 甚至有人聲稱世界上最大的 100 家公司中有 72 家曾經(jīng)使用過它。這是一個(gè)付費(fèi)的解決方案，價(jià)格為1500美元，無限制的商業(yè)許可證。

然而在光鮮的外表之下，感覺就像它是在 2009 年寫的。最近我的一位同事帶我體驗(yàn)了它，讓我告訴你，這并不是很愉快。當(dāng)你不是在深入到代碼層擺弄它時(shí)，它很好用，但是當(dāng)你想要。。。這是一件苦差事。

適用于：任何環(huán)境

GitHub：https://github.com/highcharts...
官網(wǎng)：https://www.highcharts.com/

另一個(gè)商業(yè) JS 數(shù)據(jù)工具，自稱為 “世界上最具交互性的 JavaScript 圖表庫。” 除了反應(yīng)靈敏之外，它主要關(guān)注多點(diǎn)觸控手勢和在各種設(shè)備上的原生感覺。該庫自詡為美觀的可視化，只需很少的代碼就可以輕松地部署在你的產(chǎn)品中。
Zoomchatrts 是基于 Canvas 的，在相同的數(shù)據(jù)量下，使用默認(rèn)設(shè)置，它的速度比基于 SVG 的競爭對手快20倍。我找不到 Zoomcharts 的確切價(jià)格，但我發(fā)現(xiàn)有一些評論稱它 “價(jià)格昂貴”。但無論價(jià)格怎樣，作為回報(bào)，你都會(huì)得到驚人的互動(dòng)性、多點(diǎn)觸控手勢和高品質(zhì)的用戶支持。

適用于：任何環(huán)境

官網(wǎng)：https://zoomcharts.com/en/
Demo：https://zoomcharts.com/en/jav...

12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

世界頂級公司的前端面試都問些什么

CSS Flexbox 可視化手冊

過節(jié)很無聊？還是用 JavaScript 寫一個(gè)腦力小游戲吧！

從設(shè)計(jì)者的角度看 React

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動(dòng)畫效果

程序員30歲前月薪達(dá)不到30K，該何去何從

7個(gè)開放式的前端面試題

React 教程：快速上手指南