今天來(lái)推薦幾款GitHub上熱門的前端數(shù)據(jù)可視化工具庫(kù)!

1. D3.js

D3(Data-Driven Documents 或 D3.js)是一個(gè) JavaScript 庫(kù)，用于使用 Web 標(biāo)準(zhǔn)將數(shù)據(jù)可視化。D3 可以使用SVG、 Canvas 和 HTML 將數(shù)據(jù)變?yōu)楝F(xiàn)實(shí)。D3 將強(qiáng)大的可視化和交互技術(shù)與數(shù)據(jù)驅(qū)動(dòng)的DOM操作方法相結(jié)合，讓你擁有現(xiàn)代瀏覽器的全部功能，并可以自由地為數(shù)據(jù)設(shè)計(jì)合適的可視化界面。

GitHub(Stars: 101 K)：https://github.com/d3/d3

2. Chart.js

Chart.js 是為設(shè)計(jì)人員和開發(fā)人員提供的簡(jiǎn)單而靈活的 JavaScript 圖表。該庫(kù)可以創(chuàng)建八種常見(jiàn)類型的圖表：折線圖、條形圖、雷達(dá)圖、氣泡圖、散點(diǎn)圖、面積圖、餅圖和極坐標(biāo)圖圖表。該庫(kù)使用 HTML5 中的 canvas 元素來(lái)呈現(xiàn)圖表，并且這些圖表默認(rèn)情況下是響應(yīng)式的。

GitHub(Stars: 56.8 K)：https://github.com/chartjs/Chart.js

3. Apache ECharts

Apache ECharts 是一款基于Javascript的數(shù)據(jù)可視化圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。它是用純 JavaScript 編寫的，基于zrender，是一個(gè)全新的輕量級(jí)畫布庫(kù)。

GitHub(Stars: 50.9 K)：https://github.com/apache/echarts

4. Recharts

Recharts 是一個(gè)用React和D3構(gòu)建的、重新定義的圖表庫(kù)。該庫(kù)的主要目的是在 React 應(yīng)用程序中輕松編寫圖表。Recharts的主要原則如下：

• 只需使用 React 組件進(jìn)行部署;
• 原生SVG 支持，輕量級(jí)僅依賴于一些 D3 子模塊;
• 聲明式組件，圖表的組件純粹是展示性的。

GitHub(Stars: 18.2 K)：https://github.com/recharts/recharts

5. Plotly.js

Plotly.js 是一個(gè)開源的 JavaScript 圖表庫(kù)，它基于 d3.js 和 stack.gl 。Plotly.js 是一個(gè)高層次的、描述性的圖表庫(kù)。plotly.js 帶來(lái)了多種圖表類型，包括 3D 圖表，統(tǒng)計(jì)圖表，和 SVG 地圖等。

GitHub(Stars: 14.6 K)：https://github.com/plotly/plotly.js

6.Chartist.js

Chartist.js 是一個(gè)簡(jiǎn)單的響應(yīng)式圖表，可以作為前端圖表生成器。其主要特性如下：

• 使用基于配置的轉(zhuǎn)換簡(jiǎn)單處理;
• 使用明確的分離，具有巨大的靈活性(使用 CSS 樣式和 JS 控制);
• 使用 SVG ;
• 完全響應(yīng)式，具有獨(dú)立 DPI;
• 多媒體查詢的響應(yīng)式配置;
• 完全使用 SASS 構(gòu)建，并且支持自定義。

GitHub(Stars: 12.8 K)：https://github.com/gionkunz/chartist-js

7. ApexCharts

ApexCharts 是一個(gè)現(xiàn)代 JavaScript 圖表庫(kù)，允許使用簡(jiǎn)單的 API 和 100 多個(gè)即用型示例構(gòu)建交互式數(shù)據(jù)可視化。ApexCharts 包含十幾種圖表類型，可在應(yīng)用程序和儀表板中提供美觀、響應(yīng)迅速的可視化。該庫(kù)旨在更輕松地縮放、平移、滾動(dòng)數(shù)據(jù)、在圖表上放置信息注釋等。其適用于：React、Vue.js、JavaScript。

GitHub(Stars: 11.4 K)：https://github.com/apexcharts/apexcharts.js

8. Highcharts

Highcharts 是一個(gè)制作圖表的純 Javascript 類庫(kù)，主要特性如下：

• 兼容性：兼容當(dāng)今所有的瀏覽器，包括 iPhone、IE 和火狐等;
• 支持大部分的圖表類型：直線圖，曲線圖、區(qū)域圖、區(qū)域曲線圖、柱狀圖、餅狀圖、散布圖等;
• 跨語(yǔ)言：不管是 PHP、Asp.net 還是 Java 都可以使用，它只需要三個(gè)文件：一個(gè)是 Highcharts 的核心文件 highcharts.js，還有 a canvas emulator for IE 和 Jquery 類庫(kù)或者 MooTools 類庫(kù);
• 提示功能：鼠標(biāo)移動(dòng)到圖表的某一點(diǎn)上有提示信息;
• 放大功能：選中圖表部分放大，近距離觀察圖表;
• 易用性：無(wú)需要特殊的開發(fā)技能，只需要設(shè)置一下選項(xiàng)就可以制作適合自己的圖表;
• 時(shí)間軸：可以精確到毫秒。

GitHub(Stars: 10.6 K)：https://github.com/highcharts/highcharts

9. Nivo

Nivo 是一個(gè)基于 D3 和 React 的框架，提供了 14 種不同類型的組件來(lái)呈現(xiàn)數(shù)據(jù)。Nivo 提供了很多自定義選項(xiàng)和三個(gè)渲染選項(xiàng)：Canvas、SVG，基于 API 的 HTML。

GitHub(Stars: 10.1 K)：https://github.com/plouc/nivo

10. deck.gl

deck.gl是 Uber 開發(fā)并開源的基于 WebGL 的地理大數(shù)據(jù)可視化框架。用戶可以通過(guò)組合現(xiàn)有圖層或利用 deck.gl 的可擴(kuò)展架構(gòu)來(lái)滿足自定義需求，從而快速獲得令人印象深刻的視覺(jué)效果。

deck.gl 將數(shù)據(jù)(通常是 JSON 對(duì)象數(shù)組)映射到一堆可視層中——例如圖標(biāo)、多邊形、文本;并用視圖來(lái)查看它們：例如地圖、第一人稱、正字法。

deck.gl 處理了許多開箱即用的挑戰(zhàn)：

• 大型數(shù)據(jù)集的高性能渲染和更新;
• 交互式事件處理，例如選擇、突出顯示和過(guò)濾;
• 制圖投影和與主要底圖提供商的集成;
• 經(jīng)過(guò)驗(yàn)證的、經(jīng)過(guò)良好測(cè)試的層目錄;

Deck.gl 被設(shè)計(jì)為高度可定制的。所有層都帶有靈活的 API，以允許對(duì)渲染的各個(gè)方面進(jìn)行編程控制。用戶可以輕松擴(kuò)展所有核心類，以解決自定義用例。

GitHub(Stars: 9.8 K)：https://github.com/visgl/deck.gl

11. kepler.gl

Kepler.gl 是一個(gè)高性能的基于 Web 的應(yīng)用程序，用于對(duì)大規(guī)模地理定位數(shù)據(jù)集進(jìn)行可視化探索，它可以渲染數(shù)百萬(wàn)個(gè)點(diǎn)。它支持 3 種數(shù)據(jù)格式，分別是：CSV、JSON、GeoJSON 。部分地圖種類只支持 GeoJSON 格式的數(shù)據(jù)。

Kepler.gl 也是一個(gè)使用 Redux 管理其狀態(tài)和數(shù)據(jù)流的 React 組件。它可以嵌入到其他 React-Redux 應(yīng)用程序中并且是高度可定制的。

GitHub(Stars: 8.6 K)：https://github.com/keplergl/kepler.gl

12. react-vis

react-vis 是一組用于呈現(xiàn)常見(jiàn)數(shù)據(jù)可視化圖表的 react 組件，例如折線圖/面積圖/條形圖、熱圖、散點(diǎn)圖、等高線圖、六邊形熱圖、餅圖和圓環(huán)圖、旭日形圖、雷達(dá)圖、平行坐標(biāo)和樹形圖。

react-vis 的特點(diǎn)如下：

• 簡(jiǎn)單：不需要任何深入的數(shù)據(jù)可視化庫(kù)知識(shí)即可開始構(gòu)建第一個(gè)可視化;
• 靈活性：為不同的圖表提供了一組基本構(gòu)建塊。例如，分離 X 軸和 Y 軸分量。這為需要它的應(yīng)用程序提供了對(duì)圖表布局的高級(jí)控制。
• 便于使用：提供了一組默認(rèn)值，可以被自定義用戶的設(shè)置覆蓋;
• 與React集成：支持 React 的生命周期，不會(huì)創(chuàng)建不必要的節(jié)點(diǎn)。

GitHub(Stars: 8.2 K)：https://github.com/uber/react-vis

13. Chart.xkcd

Chart.xkcd 是一個(gè)圖表庫(kù)，可繪制“粗略”、“卡通”或“手繪”樣式的圖表。它支持多樣的圖表類型：折線圖、XY 圖、條形圖、圓餅/甜甜圈圖、雷達(dá)圖等。

GitHub(Stars: 7.1 K)：https://github.com/timqian/chart.xkcd

14. BizCharts

BizCharts 是由阿里巴巴開源的一個(gè)基于 G2 封裝的 React 圖表庫(kù)，具有 G2、React 的全部?jī)?yōu)點(diǎn)，可以讓用戶以組件的形式組合出無(wú)數(shù)種圖表;并且集成了大量的統(tǒng)計(jì)工具，支持多種坐標(biāo)系繪制，交互定制，動(dòng)畫定制以及圖形定制等等。

GitHub(Stars: 5.8 K)：https://github.com/alibaba/BizCharts

15. TOAST UI Chart

TOAST UI Chart 是一個(gè)非常漂亮的圖表庫(kù)，用于可視化統(tǒng)計(jì)數(shù)據(jù)。它支持 Chrome、Firefox、Safari、Edge、IE(8+)等瀏覽器，繪制速度快，無(wú)需額外填充。Toast UI Chart 直觀且易于使用。并且，它可以與當(dāng)今兩個(gè)最流行的開源前端框架(React 和 Vue.js )很好地集成。

與 Highcharts 一樣，Toast UI Chart 也為舊版瀏覽器提供了很好的支持。因此，它保證了所有瀏覽器的外觀相同。它還可以快速繪制并具有出色的性能，并且不需要 polyfill。在渲染機(jī)制方面，它使用原生瀏覽器格式，包括 SVG 和 RVML。

GitHub(Stars: 5.1 K)：https://github.com/nhn/tui.chart

16. billboard.js

billboard.js 是一個(gè)基于D3.js的可重用、簡(jiǎn)單的界面 JavaScript 圖表庫(kù)。

GitHub(Stars: 5.1 K)：https://github.com/naver/billboard.js