作可交互的統計圖表，這套圖形語法不容錯過

選好可視化

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

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

受衆不一樣，我的的選擇就會不一樣；需求不一樣，特點的選擇就會不一樣。但選擇繁多，不少開發者和企業就會頭疼：有數據可視化的需求，但工具到底該如何選擇？

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能夠製做出豐富多樣的可視化頁面，爲所欲爲自由搭配圖表來作組合。

---

本文做者：數據智能小二

原文連接

本文爲雲棲社區原創內容，未經容許不得轉載。