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

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

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

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

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

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

我想要什么樣的圖表？餅圖，地理圖，折線(xiàn)圖, 條形圖？

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

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

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

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

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

瀏覽器支持給定的庫(kù)嗎？

你使用哪種 JavaScript 框架？

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

你需要什么樣的外觀？

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

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

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

那么什么情況下才能使用庫(kù)？

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

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

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

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

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

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

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

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

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

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

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

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

適用于：React，React Native

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

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

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

適用于：React

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

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

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

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

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

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

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

適用于：React，Vue.js

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

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

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

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

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

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

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

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

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

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

適用于：React

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

世界頂級(jí)公司的前端面試都問(wèn)些什么

CSS Flexbox 可視化手冊(cè)

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

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

CSS粘性定位是怎樣工作的

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

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

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

React 教程：快速上手指南