給Web開發人員推薦的開源圖形庫——數據可視化
現代 Web 開發在將體驗和功能做到***的同時,對于美觀的追求也越來越高,數據可視化、動畫交互、2D/3D 等元素已然成為標配。
以下是為 Web 開發者推薦的一些精品開源圖形庫,旨在專注于最常見的問題和最常用的東西。將針對動畫(Animation)、數據可視化(Data Visualization)、2D/3D 分別整理。
數據可視化
1、D3.js
***的可視化庫之一,被各種表格插件、庫、框架所使用。它允許綁定任意數據到 DOM ,然后將數據驅動轉換應用到 Document 中。你可以使用它從數組中生成 HTML 表,或是使用相同的數據創建具有平滑過渡和交互的交互式 SVG 條形圖。
2、Recharts
基于 React 的組合式圖表,用解耦的、可重用的 React 組件快速構建你的圖表。依賴于輕量級的 D3 子模塊構建 SVG 元素,還可以調整組件的屬性與傳遞組件來自定義圖表。
類似的將 React 和 D3 結合在一起的還有:
Victory
一個用于構建圖表模塊化和交互式數據可視化的 ReactJS 庫。 效果預覽
VX
可重用的 low-level 可視化組件集合。 效果預覽
3、ECharts
一個由百度開源的純 Javascript 圖表庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11、Chrome、Firefox、Safari 等),底層依賴輕量級的 Canvas 類庫 ZRender,提供直觀,生動,可交互,可高度個性化定制的數據可視化圖表。
4、Highcharts
同樣是一個制作圖表的純 Javascript 類庫,為網站或 Web 應用提供了一種簡單的方法來添加交互式圖表。 目前支持直線圖、曲線圖、區域圖、區域曲線圖、柱狀圖、餅狀圖、散布圖等類型。需注意的是,商業使用該庫需要購買授權。
5、Google Charts
Google Charts 提供了一種可視化網站數據的方式,從簡單的線圖到復雜的層次樹圖,內置的圖表庫提供大量打開即用的圖表類型。它還可以自定義圖表以適應網站外觀,圖表具有高度的互動性,使用 HTML5 / SVG 技術呈現,以提供跨瀏覽器兼容性和跨平臺可移植性。
6、Plotly.js
一個 high-level 聲明式圖表庫,基于 D3 和 stack.gl ,內置 20 多種圖表類型,包括 3D 圖表、統計圖和 SVG 圖等。
7、Chart.js
一個簡單靈活的基于 HTML5 的 JavaScript 圖表庫,瀏覽器兼容性良好,內置 8 種不同的圖表類型以可視化數據,且均可定制,可重新繪制窗口上的圖表大小,以獲得***的粒度呈現。
8、AntV G2
一個由純 JavaScript 編寫、強大的語義化圖表生成工具,它提供了一整套圖形語法,可以讓用戶通過簡單的語法搭建出無數種圖表,并且集成了大量的統計工具,支持多種坐標系繪制,可以讓用戶自由地定制圖表。由螞蟻金服開源。
他們家還有一個 AntV G6 ,是一個關系圖基礎技術框架,能用來進行關系圖的查看視圖和編輯視圖進行快速的二次開發。
9、Timesheet.js
基于 HTML5 和 CSS3 可視化數據和事件的庫。用 JavaScript 創建事件軸,用 CSS 美化樣式,還有適合移動端的方法。這個庫偏向于做時間軸(表)。
10、Leaflet
適用于移動設備的交互式 JavaScript 地圖庫,具有大多數開發人員所需要的所有制圖(mapping)功能。設計簡單,性能和可用性較好,可在所有主流的桌面和移動平臺上高效運行,也支持擴展大量的插件。API 簡單并易于使用。




































