前端常用的數據可視化工具庫
今天來推薦幾款GitHub上熱門的前端數據可視化工具庫!
1. D3.js
D3(Data-Driven Documents 或 D3.js)是一個 JavaScript 庫，用于使用 Web 標準將數據可視化。D3 可以使用SVG、 Canvas 和 HTML 將數據變為現實。D3 將強大的可視化和交互技術與數據驅動的DOM操作方法相結合，讓你擁有現代瀏覽器的全部功能，并可以自由地為數據設計合適的可視化界面。
GitHub(Stars: 101 K)：https://github.com/d3/d3
2. Chart.js
Chart.js 是為設計人員和開發人員提供的簡單而靈活的 JavaScript 圖表。該庫可以創建八種常見類型的圖表：折線圖、條形圖、雷達圖、氣泡圖、散點圖、面積圖、餅圖和極坐標圖圖表。該庫使用 HTML5 中的 canvas 元素來呈現圖表，并且這些圖表默認情況下是響應式的。
GitHub(Stars: 56.8 K)：https://github.com/chartjs/Chart.js
3. Apache ECharts
Apache ECharts 是一款基于Javascript的數據可視化圖表庫，提供直觀，生動，可交互，可個性化定制的數據可視化圖表。它是用純 JavaScript 編寫的，基于zrender，是一個全新的輕量級畫布庫。
GitHub(Stars: 50.9 K)：https://github.com/apache/echarts
4. Recharts
Recharts 是一個用React和D3構建的、重新定義的圖表庫。該庫的主要目的是在 React 應用程序中輕松編寫圖表。Recharts的主要原則如下：
- 只需使用 React 組件進行部署;
- 原生SVG 支持，輕量級僅依賴于一些 D3 子模塊;
- 聲明式組件，圖表的組件純粹是展示性的。
GitHub(Stars: 18.2 K)：https://github.com/recharts/recharts
5. Plotly.js
Plotly.js 是一個開源的 JavaScript 圖表庫，它基于 d3.js 和 stack.gl 。Plotly.js 是一個高層次的、描述性的圖表庫。plotly.js 帶來了多種圖表類型，包括 3D 圖表，統計圖表，和 SVG 地圖等。
GitHub(Stars: 14.6 K)：https://github.com/plotly/plotly.js
6.Chartist.js
Chartist.js 是一個簡單的響應式圖表，可以作為前端圖表生成器。其主要特性如下：
- 使用基于配置的轉換簡單處理;
- 使用明確的分離，具有巨大的靈活性(使用 CSS 樣式和 JS 控制);
- 使用 SVG ;
- 完全響應式，具有獨立 DPI;
- 多媒體查詢的響應式配置;
- 完全使用 SASS 構建，并且支持自定義。
GitHub(Stars: 12.8 K)：https://github.com/gionkunz/chartist-js
7. ApexCharts
ApexCharts 是一個現代 JavaScript 圖表庫，允許使用簡單的 API 和 100 多個即用型示例構建交互式數據可視化。ApexCharts 包含十幾種圖表類型，可在應用程序和儀表板中提供美觀、響應迅速的可視化。該庫旨在更輕松地縮放、平移、滾動數據、在圖表上放置信息注釋等。其適用于：React、Vue.js、JavaScript。
GitHub(Stars: 11.4 K)：https://github.com/apexcharts/apexcharts.js
8. Highcharts
Highcharts 是一個制作圖表的純 Javascript 類庫，主要特性如下：
- 兼容性：兼容當今所有的瀏覽器，包括 iPhone、IE 和火狐等;
- 支持大部分的圖表類型：直線圖，曲線圖、區域圖、區域曲線圖、柱狀圖、餅狀圖、散布圖等;
- 跨語言：不管是 PHP、Asp.net 還是 Java 都可以使用，它只需要三個文件：一個是 Highcharts 的核心文件 highcharts.js，還有 a canvas emulator for IE 和 Jquery 類庫或者 MooTools 類庫;
- 提示功能：鼠標移動到圖表的某一點上有提示信息;
- 放大功能：選中圖表部分放大，近距離觀察圖表;
- 易用性：無需要特殊的開發技能，只需要設置一下選項就可以制作適合自己的圖表;
- 時間軸：可以精確到毫秒。
GitHub(Stars: 10.6 K)：https://github.com/highcharts/highcharts
9. Nivo
Nivo 是一個基于 D3 和 React 的框架，提供了 14 種不同類型的組件來呈現數據。Nivo 提供了很多自定義選項和三個渲染選項：Canvas、SVG，基于 API 的 HTML。
GitHub(Stars: 10.1 K)：https://github.com/plouc/nivo
10. deck.gl
deck.gl是 Uber 開發并開源的基于 WebGL 的地理大數據可視化框架。用戶可以通過組合現有圖層或利用 deck.gl 的可擴展架構來滿足自定義需求，從而快速獲得令人印象深刻的視覺效果。
deck.gl 將數據(通常是 JSON 對象數組)映射到一堆可視層中——例如圖標、多邊形、文本;并用視圖來查看它們：例如地圖、第一人稱、正字法。
deck.gl 處理了許多開箱即用的挑戰：
- 大型數據集的高性能渲染和更新;
- 交互式事件處理，例如選擇、突出顯示和過濾;
- 制圖投影和與主要底圖提供商的集成;
- 經過驗證的、經過良好測試的層目錄;
Deck.gl 被設計為高度可定制的。所有層都帶有靈活的 API，以允許對渲染的各個方面進行編程控制。用戶可以輕松擴展所有核心類，以解決自定義用例。
GitHub(Stars: 9.8 K)：https://github.com/visgl/deck.gl
11. kepler.gl
Kepler.gl 是一個高性能的基于 Web 的應用程序，用于對大規模地理定位數據集進行可視化探索，它可以渲染數百萬個點。它支持 3 種數據格式，分別是：CSV、JSON、GeoJSON 。部分地圖種類只支持 GeoJSON 格式的數據。
Kepler.gl 也是一個使用 Redux 管理其狀態和數據流的 React 組件。它可以嵌入到其他 React-Redux 應用程序中并且是高度可定制的。
GitHub(Stars: 8.6 K)：https://github.com/keplergl/kepler.gl
12. react-vis
react-vis 是一組用于呈現常見數據可視化圖表的 react 組件，例如折線圖/面積圖/條形圖、熱圖、散點圖、等高線圖、六邊形熱圖、餅圖和圓環圖、旭日形圖、雷達圖、平行坐標和樹形圖。
react-vis 的特點如下：
- 簡單：不需要任何深入的數據可視化庫知識即可開始構建第一個可視化;
- 靈活性：為不同的圖表提供了一組基本構建塊。例如，分離 X 軸和 Y 軸分量。這為需要它的應用程序提供了對圖表布局的高級控制。
- 便于使用：提供了一組默認值，可以被自定義用戶的設置覆蓋;
- 與React集成：支持 React 的生命周期，不會創建不必要的節點。
GitHub(Stars: 8.2 K)：https://github.com/uber/react-vis
13. Chart.xkcd
Chart.xkcd 是一個圖表庫，可繪制“粗略”、“卡通”或“手繪”樣式的圖表。它支持多樣的圖表類型：折線圖、XY 圖、條形圖、圓餅/甜甜圈圖、雷達圖等。
GitHub(Stars: 7.1 K)：https://github.com/timqian/chart.xkcd
14. BizCharts
BizCharts 是由阿里巴巴開源的一個基于 G2 封裝的 React 圖表庫，具有 G2、React 的全部優點，可以讓用戶以組件的形式組合出無數種圖表;并且集成了大量的統計工具，支持多種坐標系繪制，交互定制，動畫定制以及圖形定制等等。
GitHub(Stars: 5.8 K)：https://github.com/alibaba/BizCharts
15. TOAST UI Chart
TOAST UI Chart 是一個非常漂亮的圖表庫，用于可視化統計數據。它支持 Chrome、Firefox、Safari、Edge、IE(8+)等瀏覽器，繪制速度快，無需額外填充。Toast UI Chart 直觀且易于使用。并且，它可以與當今兩個最流行的開源前端框架(React 和 Vue.js )很好地集成。
與 Highcharts 一樣，Toast UI Chart 也為舊版瀏覽器提供了很好的支持。因此，它保證了所有瀏覽器的外觀相同。它還可以快速繪制并具有出色的性能，并且不需要 polyfill。在渲染機制方面，它使用原生瀏覽器格式，包括 SVG 和 RVML。
GitHub(Stars: 5.1 K)：https://github.com/nhn/tui.chart
16. billboard.js
billboard.js 是一個基于D3.js的可重用、簡單的界面 JavaScript 圖表庫。
GitHub(Stars: 5.1 K)：https://github.com/naver/billboard.js
