天天看點

「值得推薦」前端常用的資料可視化工具庫

作者:Echa攻城獅

今天來推薦幾款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

繼續閱讀