不是吧阿sir,都2020了,不會有人還不知道前端可視化吧

我們生活在這個數據信息爆炸的裏時代,我們開發的每個應用程序都使用或利用了數據來改善我們的各種用戶體驗。

有時,我們可以給用戶提供最佳的數據本身功能。表格和數字圖表通常很容易閱讀,但很難從大型數據表中獲得可行的直接見解。

在這裏插入圖片描述
相反,我們可以使用整潔的數據可視化方法,這些方法可以利用大腦以視覺方式識別和處理數據的能力。爲了幫助你入門並輕鬆將漂亮的數據可視化添加到你喜歡的應用程序中。

D3js

D3.js是一個JavaScript庫,用於根據數據處理文檔。D3可幫助你使用HTML,SVG和CSS使數據栩栩如生。D3對Web標準的強調爲你提供了現代瀏覽器的全部功能,而又不會使自己陷入專有框架,而是結合了強大的可視化組件和數據驅動的DOM操作方法。
在這裏插入圖片描述
在此處下載最新版本(5.16.0):d3.ZIP

要直接鏈接到最新版本,請複製以下代碼段:<script src="https://d3js.org/d3.v5.min.js"></script>

想要完整的源代碼和測試,也可去 GitHub上查看。

ChartJS

面向設計人員和開發人員的簡單而靈活的JavaScript圖表。

在這裏插入圖片描述
V.2提供了混合的圖表類型,新增了圖表軸類型和動畫。界面設計簡單優雅,具有8種基本圖表類型,你可以將庫與moment.js組合爲時間軸。你也可以在cdnjs上籤出庫。
在這裏插入圖片描述
你可以從GitHub版本下載最新版本的Chart.js 或使用Chart.js CDN。詳細的安裝說明可在安裝頁面上找到。

ThreeJS

這個是非常受歡迎的庫,內置用於使用WebGL創建3D動畫。該項目靈活而抽象的性質意味着它對於可視化2維或3維數據也很有用。例如,你也可以使用指定的模塊通過WebGL進行3D圖形可視化。
在這裏插入圖片描述
瞭解個更多請訪問GitHub地址。

Echarts & Highcharts

ECharts,一個使用 JavaScript 實現的開源可視化庫,可以流暢的運行在 PC 和移動設備上,兼容當前絕大部分瀏覽器(IE8/9/10/11,Chrome,Firefox,Safari等),底層依賴矢量圖形庫 ZRender,提供直觀,交互豐富,可高度個性化定製的數據可視化圖表。

ECharts 提供了常規的折線圖、柱狀圖、散點圖、餅圖、K線圖,用於統計的盒形圖,用於地理數據可視化的地圖、熱力圖、線圖,用於關係數據可視化的關係圖、treemap、旭日圖,多維數據可視化的平行座標,還有用於 BI 的漏斗圖,儀表盤,並且支持圖與圖之間的混搭。
在這裏插入圖片描述

Highcharts 是一個用純 JavaScript 編寫的一個圖表庫, 能夠很簡單便捷的在 Web 網站或是 Web 應用程序添加有交互性的圖表,並且免費提供給個人學習、個人網站和非商業用途使用。

Highcharts 支持的圖表類型有直線圖、曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖、儀表圖、氣泡圖、瀑布流圖等多達 20 種圖表,其中很多圖表可以集成在同一個圖形中形成混合圖。

在這裏插入圖片描述

Metric-Graphics

MetricsGraphics.js 是建立在D3的基礎上,被用於可視化和佈局的時間序列數據進行了優化。它提供以產生一個原則性的,一致的和響應式的方式的圖形常見類型的簡單方法。該庫目前支持折線圖,散點圖和直方圖,以及地毯地塊和基本線性迴歸功能。
在這裏插入圖片描述

GitHub地址:https://github.com/metricsgraphics/metrics-graphics

Recharts

Recharts是使用ReactD3構建的圖表庫,可讓你將其部署爲聲明性的React組件。該庫提供了本機SVG支持,可通過組件屬性高度自定義輕量級依賴關係樹(D3子模塊)。你可以在docs網站上找到實時示例。
在這裏插入圖片描述GitHub上有更過示例等着你。

Raphael

Raphael 是一個用於在網頁中繪製矢量圖形的 Javascript 庫。它使用 SVG W3C 推薦標準和 VML 作爲創建圖形的基礎,你可以通過 JavaScript 操作 DOM 來輕鬆創建出各種複雜的柱狀圖、餅圖、曲線圖等各種圖表,還可以繪製任意形狀的圖形,可以進行圖表或圖像的裁剪和旋轉等複雜操作。

在這裏插入圖片描述

C3js

C3是一個用於Web應用程序的基於D3的可重用圖表庫。該庫爲每個元素提供類,因此您可以通過該類定義自定義樣式,並通過D3直接擴展結構。它還提供了各種API和回調來訪問圖表狀態。通過使用它們,你甚至可以在繪製圖表後對其進行更新。
在這裏插入圖片描述
GitHub地址:https://github.com/c3js/c3

CartoDB

Carto是一種位置情報和數據可視化工具庫,用於發現基礎位置數據的信息。你可以使用Web表單上傳地理空間數據(Shapefiles,GeoJSON等),並在數據集或地圖中將其可視化,使用SQL進行搜索,以及使用CartoCSS應用地圖樣式。這裏有很多視頻演示(https://vimeo.com/channels/carto),可幫助你理解和入門。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章