AntV/G2Plot v2.0 技術架構思考

G2Plot v2 版本，從今年 8 月開始開發，目前差很少已經快 4 個月了，達成：

• 25+ 經常使用的統計圖表
• 80% 圖表在複雜 BI，LowCode 產品中使用驗證
• 97% 代碼單測覆蓋率
• 5+ 積極的社區同窗參數

後續咱們會繼續在幾個方面深刻：

1. 按照業務需求去提高，圖表豐富度（桑基圖、矩陣樹圖等），並在複雜業務系統去實踐和應用
2. 文檔、場景 DEMO，下降使用者的門檻和成本

那麼，本文會介紹 G2Plot 2.0 版本開發，從業務到技術架構的一個思考，可能比較混亂，輕噴！

---

首先自我介紹一下，我是螞蟻大數據部門的前端，主要負責 DeepInsight 這個 BI 產品的數據分析能力，同時會作 AntV 統計圖表 G2，G2Plot 的開發和迭代。

從 BI 的角度出發，咱們能夠理解一下這一張圖。

數據可視化對於咱們 BI 產品來講，很是重要，而且隨着時間的推移，數據量的堆積，可視化能力對於任何一個互聯網產品，都是很是重要的。

問題

爲了描述 G2Plot 新架構的內容，必須先說一下舊架構存在或者帶來的問題。

• 業務問題

去年咱們在 G2Plot v1 基礎上，作了很多圖表體驗優化的事情，可是由於代碼架構、質量問題，致使咱們在業務中只能鎖死版本，很難持續迭代。雖然基於 G2Plot，咱們解決了不少問題，可是也帶來了其餘更多的業務迭代問題。

• 架構問題

G2Plot 架構設計上，沒有徹底依賴 G2，建立一個圖表沒有一個明顯的模式。這個帶來的問題是：

1. 和 G2 並行發展，不利於積累 G2 的能力
2. 代碼雜亂，新手參入門檻高，難以貢獻代碼。1 + 1 遠小於 2
3. 穩定性、質量難以保障，維護性問題（這一點也和單測不完備有關）

• 開放能力問題

業務上使用 G2 作業務定製圖表，或者直接用 G2Plot，都存在一個問題是：如何去作定製、定製的體驗優化？目前部分的優化都是 hack 的方式。急需打破隔離

1. G2 是否有足夠開放的能力，給 G2Plot 或者業務作體驗優化？
2. G2Plot 是否有足夠的配置和配置擴展能力，去作業務自定義？

上手簡單 和 靈活擴展能力 二者是一個平衡和取捨，對於業務開發的同窗來講，這個就顯得很是重要了。

架構設計

新架構的幾個宗旨：

• G2Plot 層輕量化

G2Plot 是基於 G2 能力，進行組裝成一個一個單獨的經常使用業務統計圖表。主要緣由有二：

1. 經常使用的統計圖表使用量超過 80%
2. 便於 G2 層能力的沉澱和提高，包括佈局、圖形、交互、動畫等能力
3. G2 基於圖形語法，沒有圖表的概念，沒法針對性的圖表優化，G2Plot 基於圖表分類學，能夠進行鍼對性的處理。

• 配置式 API 使用方式

繼續延續 v1 的配置式的使用方式，一方面是確實能夠下降用戶的入門和使用成本，另外一方面是保證大版本之間的相對兼容性。

總體梳理的架構圖以下所示：

架構解讀

本質上，G2Plot 這一層是很是簡單和輕量的，它作的事情主要包含有三個點：

Schema & Adaptor

定義不一樣圖形的 schema 配置，而後開發 Adaptor 代碼片斷，將 schema 配置轉化成 G2 的 API。例如對於折線圖：

{ xField: 'year', yField: 'sale', data: [ / .../ ], }

轉成 G2 的代碼即爲：

chart.data(data); chart.line().position(${xField}*${yField});

而這其中，legend、tooltip、axis 都直接延續 G2，不會增長任何其餘的概念。

圖表分類和定製

針對不一樣圖表的一些體驗優化邏輯，例如對於 label 重疊，咱們能夠針對不一樣的圖形去加載不一樣的佈局函數片斷。好比：

• point-adjust-position
• limit-in-canvas
• ...

開放擴展機制

暴露 G2 靈活的自定義能力，提供開發擴展機制。G2Plot 內置的是經常使用的統計圖表，而對於不經常使用的定製圖表，能夠方便的經過擴展機制去基於 G2 自定義。

咱們將 G2Plot 基於 G2 開發圖表的 Adaptor 模式直接開放出來，業務同窗能夠基於這一個模式去使用 G2 封裝定製圖表，若是須要給其餘業務複用，直接發包，在 G2Plot 的模式上去使用。舉個例子：

以上是一個真實的基於 G2 按照 G2Plot 的模式開發一個 QRCode 圖形能力，總體代碼 100 行左右。基於這樣的模式，參考文檔開發自定義擴展圖表去進行自定義的業務封裝和複用。

最後

目前咱們最重要的事情是，讓 G2Plot 成爲一個業務可用的可視化圖表庫。主要包含：

1. 儘量的經過技術手段，去下降 G2 圖形語法的使用成本，同時科普可視化技術知識
2. 儘量的提升底層模塊的質量、穩定性，否則底層技術模塊阻礙業務迭代，甚至給業務代碼不穩定因素

歡迎對於可視化技術感興趣的同窗，加入到 G2Plot 後續的持續迭代中，你能夠：

• 文檔、DEMO、翻譯等相對門檻低的事情入門
• G2Plot 的內置圖表研發和迭代
• 基於 G2Plot 的開放開放機制，擴展周邊非通用圖表

感謝！對了，還有項目開源地址：https://github.com/antvis/G2Plot ✨✨✨。更多關於 G2Plot 的文章看這裏。