2024前端數據可視化常用工具大盤點
本文來盤點前端數據可視化的各種常用工具庫！
圖片
圖表
ECharts
ECharts是一個基于JavaScript的開源數據可視化庫，它由百度開源，現在由 Apache 基金會維護。ECharts提供了豐富的圖表類型、靈活的配置選項和強大的交互功能，使得開發者能夠輕松構建出美觀且功能強大的數據可視化應用。
圖片
Github：https://github.com/apache/echarts
AntV
AntV 是螞蟻集團旗下的一款強大的數據可視化解決方案。它提供了一系列的圖表庫和工具，旨在幫助開發者輕松地創建和管理復雜的數據可視化項目。AntV 的主要產品包括 Ant Design Charts、 G2、G6、X6、L7等，這些產品支持多種圖表類型，如折線圖、柱狀圖、餅圖、散點圖、地圖等，同時也提供了豐富的交互功能和定制選項。
圖片
Github：https://github.com/antvis
VChart
VChart 是字節跳動開源可視化解決方案 VisActor 的核心圖表組件庫。它基于可視化語法庫 VGrammar 和渲染引擎 VRender 進行封裝，在滿足數據呈現的同時，還支持面向敘事場景的動畫編排、豐富的交互能力和定制化的圖表風格，簡單易用的配置大大降低了用戶的學習成本。
圖片
Github：https://github.com/VisActor/VChart
Chart.js
Chart.js 是一個基于 HTML5 的 JavaScript 圖表庫，它通過 Canvas 元素創建美觀的圖表，支持多種常見的圖表類型，如折線圖、柱狀圖、餅圖等。它的設計理念是簡單易懂，讓開發者能夠快速上手，同時保持足夠的靈活性，滿足各種需求。
圖片
Github：https://github.com/chartjs/Chart.js
BizCharts
BizCharts 是由阿里巴巴開源的一個基于 G2 封裝的 React 圖表庫，具有 G2、React 的全部優點，可以讓用戶以組件的形式組合出無數種圖表;并且集成了大量的統計工具，支持多種坐標系繪制，交互定制，動畫定制以及圖形定制等等。
圖片
Github：https://github.com/alibaba/BizCharts
shadcn/ui
Shadcn/ui 是一個爆火的現代UI組件集合，它并不是傳統意義上的組件庫或UI框架，而是一個提供可復用組件的集合，允許開發者通過復制粘貼的方式將組件源代碼直接集成到項目中，最近它推出了 Recharts 的圖表組件，簡單精美，易于使用。
圖片
Github：https://github.com/shadcn-ui/ui
圖形
Fabric.js
Fabric.js 是一個開源的 JavaScript 圖形庫，用于在HTML5 Canvas上進行交互式的對象模型操作和渲染。它簡化了在Canvas上繪制圖形、文本、圖像和其他視覺元素的過程，并提供了豐富的交互功能，如選擇、拖動、縮放、旋轉等。
圖片
Github：https://github.com/fabricjs/fabric.js
konva.js
Konva.js 是一個基于 HTML5 Canvas 的高性能 2D JavaScript 圖形庫，提供豐富的API和靈活的圖層管理功能，用于實現復雜的圖形交互和動畫效果。
圖片
Github：https://github.com/konvajs/konva
PixiJS
PixiJS 是一個開源的 2D WebGL 渲染器，同時也支持 Canvas 渲染。它是一個高性能、輕量級的JavaScript庫，用于創建具有復雜圖形、動畫和交互性的 Web 應用。PixiJS 廣泛應用于游戲開發、廣告和互動內容等領域。
圖片
Github：https://github.com/pixijs/pixijs
地圖
AntV-L7
L7 是由螞蟻金服 AntV 數據可視化團隊推出的基于 WebGL 的開源大規模地理空間數據可視分析開發框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能為全球位置數據提供可視分析的能力。L7 以圖形符號學為理論基礎，將抽象復雜的空間數據轉化成 2D、3D 符號，通過顏色、大小、體積、紋理等視覺變量實現豐富的可視化表達。
圖片
Github：https://github.com/antvis/L7
Leaflet.js
Leaflet 是一個輕量級開源 JavaScript 庫，專為移動友好的交互式地圖設計。它的大小僅為約42KB，但包含了大多數開發者所需的地圖功能。Leaflet注重簡單性、性能和易用性，能夠在所有主流桌面和移動平臺上高效運行。此外，它還可以通過大量插件進行擴展，擁有美觀、易用且文檔齊全的API。
Github：https://github.com/Leaflet/Leaflet
3D
Three.js
Three.js 是一款基于 WebGL 的開源 JavaScript 庫，旨在簡化在網頁上創建和顯示3D圖形的過程，使得即使是沒有深厚圖形學背景的開發者也能輕松上手。Three.js 通過提供一系列高級API，隱藏了WebGL的復雜性，使得開發者可以專注于創意和邏輯實現，而不是底層的圖形渲染細節。
圖片
Github：https://github.com/mrdoob/three.js
React Three Fiber
React Three Fiber是一個用于React的Three.js渲染器，它允許開發者使用React的聲明式編程范式來創建和控制3D圖形。這個庫旨在將React的易用性和Three.js的強大3D渲染能力結合起來，使得在Web應用中構建復雜的3D界面變得更加簡單和直觀。
圖片
Github：https://github.com/pmndrs/react-three-fiber
基礎
D3.js
D3(Data-Driven Documents)是一個 JavaScript 庫，用于使用 Web 標準將數據可視化。D3 可以使用SVG、 Canvas 和 HTML 將數據變為現實。D3 將強大的可視化和交互技術與數據驅動的DOM操作方法相結合，讓你擁有現代瀏覽器的全部功能，并可以自由地為數據設計合適的可視化界面。
Github：https://github.com/d3/d3
其他
流程圖
Mermaid
Mermaid是一個基于JavaScript的開源工具，用于在Markdown文檔中繪制流程圖、序列圖、甘特圖等圖表。它允許開發者通過簡單的文本描述來定義圖表的結構，然后將這些描述轉換為SVG格式的圖形。
圖片
Github：https://github.com/mermaid-js/mermaid
React Flow
React Flow 是一個基于React的可視化工作流庫，它主要用于構建和渲染流程圖、工作流程、數據流圖等可視化圖表。React Flow提供了豐富的功能和靈活的擴展性，可以幫助開發者快速構建出高質量的可視化工作流應用。
圖片
Github：https://github.com/xyflow/xyflow
flowchart.js
Flowchart.js是一個基于JavaScript的開源庫，用于在網頁上繪制流程圖。它允許開發者通過簡單的文本描述來定義流程圖的結構，然后將這些描述轉換為SVG格式的圖形。
圖片
Github：https://github.com/adrai/flowchart.js
甘特圖
Frappe Gantt
Frappe Gantt是一個用于生成甘特圖的JavaScript庫，支持交互式繪制、拖拽、縮放、任務依賴關系和時間刻度等功能。
圖片
Github：https://github.com/frappe/gantt
gantt-task-react
gantt-task-react是一個基于React和TypeScript的交互式甘特圖組件。它允許用戶快速創建美觀、可交互的甘特圖，并提供了各種配置選項，使得開發者可以自定義甘特圖的背景色、時間刻度、任務欄等樣式。
圖片
Github：https://github.com/MaTeMaTuK/gantt-task-react
Vue Ganttastic
Vue Ganttastic 是一個基于Vue 3的簡單、交互式且高度可定制的甘特圖組件。它可以在Web應用中展示任務和進度，支持拖拽、縮放和事件處理等交互特性。
圖片
Github：https://github.com/zunnzunn/vue-ganttastic
詞云圖
wordcloud2.js
wordcloud2.js 是一個基于 JavaScript 的詞云生成庫，它允許開發者通過簡單的配置項快速生成詞云圖。詞云圖是一種數據可視化形式，它將文字按照出現的頻率進行排列和展示，使得高頻詞匯更加突出。
Github：https://github.com/timdream/wordcloud2.js
echarts-wordcloud
echarts-wordcloud是基于echarts的一個詞云庫，用于在echarts可視化圖表中創建詞云。它能夠和echarts.js完美融合，使用起來非常方便，支持自定義詞云的顏色、形狀、布局和樣式等多種設置。
Github：https://github.com/ecomfe/echarts-wordcloud
d3-cloud
d3-cloud 是一個基于 D3.js 的 JavaScript 庫，用于生成詞云圖。
