選好可視化

“一圖勝千言”，是最直觀的數據可視化魅力。以圖表來傳達和溝通信息，其效率遠超枯燥乏味的數據表達。

有需求就有市場。數據可視化嶄露頭角后，各個廠商出備的產品、解決方案，開發者自研的可視化工具、操作平臺都如雨后春筍般冒了出來。

受眾不同，個人的選擇就會不同；需求不同，特色的選擇就會不同。但選擇繁多，很多開發者和企業就會頭疼：有數據可視化的需求，但工具到底該如何選擇？

AntV-G2是阿里巴巴2018年推出的開源項目，是一套基于可視化編碼的圖形語法，具有高度的易用性和擴展性。無需關注繁瑣的實現細節，一條語句即可構建出各種各樣的可交互統計圖表。它具備以下特性：

• 簡單、易用：從數據出發，僅需幾行代碼就能輕松獲得想要的圖表展示效果
• 完備的可視化編碼：以數據驅動，提供從數據到圖形的完整映射
• 強大的擴展能力：任何圖表，都可以基于圖形語法靈活繪制，滿足無限創意

作為一個非常全面的圖表庫，AntV G2庫有折線圖、柱狀圖、條形圖、雷達圖、箱體圖、面積圖、餅圖、熱力圖、儀表盤… …幾乎滿足了所有基本的圖表類需求。

另外，G2還是一個使用WebGL/canvas技術實現的基礎圖表庫，因此既可以在原生js環境下使用，也可以使用任意的js框架。基于G2封裝的組件框架有BizCharts和Viser，所以如果使用angular、react、vue的話可以直接使用其封裝的組件，和自行動手封裝G2組件是一樣的效果。

G2的構成

一個可視化框架需要四部分：

• 數據處理模塊，對數據進行加工的模塊，包括一些數據處理方法。例如：合并、分組、排序、過濾、計算統計信息等
• 圖形映射模塊，將數據映射到圖形視覺通道的過程。例如：將數據映射成顏色、位置、大小等
• 圖形展示模塊，決定使用何種圖形來展示數據，點、線、面等圖形標記
• 輔助信息模塊，用于說明視覺通道跟數據的映射關系，例如：坐標軸、圖例、輔助文本等

??在數據處理模塊上，dataSet主要通過state狀態管理多個dataview視圖，實現多圖聯動，或者關聯視圖。dataView則是對應的是每一個數據源，通過connector來接入不同類型的數據，通過tranform進行數據的轉換或者過濾。最后輸出我們理想的數據，dataSet是與g2分離的，需要用到的時候可以加載；
??在圖形映射模塊上，度量 Scale，是數據空間到圖形空間的轉換橋梁，負責原始數據到 [0, 1] 區間數值的相互轉換工作，從原始數據到 [0, 1] 區間的轉換我們稱之為歸一化操作。我們可以通過chart.source或者chart.scale('field', defs)來實現列定義，我們可以在這對數據進行起別名，更換顯示類型（time，cat類型等）；
??輔助信息，就是標記數據，方便理解數據；
??圖形展示chart圖表是一個大畫布，可以有多個view視圖，geom則是數據映射的圖形標識，就是指的點，線，面，通過對其操作，從而展示圖形。

大體步驟如下：

G2 經典新生

目前AntV-G2已更新到3.4版本。通過這次升級，G2往經典的“圖形語法”理論注入了新的生命，為大家帶來“交互語法” — 一套簡潔高效的交互式可視化解決方案。同時，G2的底層渲染進行了升級，實現 SVG 和 Canvas 自由切換。

簡潔靈活的交互語法

G2將經典的圖形語法理論擴展為“交互語法”，一方面開放 220+ 種交互事件，支持定制最小粒度的圖表元素交互，另一方面封裝了各類復雜的、常用的交互場景，使豐富靈活的圖表交互僅需一行代碼實現。

渲染引擎自由切換

G2的繪圖引擎開始支持 SVG 和 Canvas 雙引擎，以適應更多業務場景。并在拾取、動畫管線、碰撞檢測等方面進行了優化，G2的繪圖能力變得更自由、更流暢。

兩種引擎在不同場景的性能對比

256+58的試煉

通過256 plots計劃和58+業務模板計劃，來向用戶提供更豐富的場景，也由此檢驗G2圖表的數據表達能力。

• 通過256 plots計劃，G2挑戰了d3.js、R語言社區等經典圖表繪制，檢驗并刺激了G2框架圖形能力的更新。

• 58+業務模板源自真實的業務，由基礎的線、柱、餅圖表改造而起，進而輻射到分面、迷你圖等更復雜的場景，能更好的幫助用戶找到理想的可視化解決方案。

DataV數據可視化

AntV-G2功能雖然強大，但對于需要開箱即用、直接適用業務的企業而言，距離可視化還缺少一個成熟的產品。幸運的是，阿里云.DataV數據可視化完美承擔了這樣的一個角色。DataV只需通過拖拽式的操作，使用數據連接、可視化組件庫、行業設計模板庫、多終端適配與發布運維于等功能，就能讓非專業的人員快速地將數據價值通過視覺來傳達。

DataV具有豐富的圖表庫，并外接有國內兩大第三方圖表組件庫——Echarts和今日的主角：AntV-G2。在強大的圖表庫支持下，DataV可以制作出豐富多樣的可視化頁面，隨心所欲自由搭配圖表來做組合。

原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的做可交互的统计图表，这套图形语法不容错过的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。