作者 | 步茗
AntV 是一個資料可視化項目，也是一個團隊，螞蟻集團資料可視化團隊，一群有愛有夢的人，懷揣「讓人們在資料世界裡獲得視覺化思考能力」的夢想前行， 希望成就智能時代全球領先的資料可視化解決方案，滿足與日俱增的資料洞察需求。
AntV 目前覆寫了統計圖表、移動端圖表、圖可視化、地理可視化、2D 繪圖引擎和智能可視化多個領域，主要包含 G2棧、F2棧、G6棧、X6棧、L7棧、AVA 以及一套完整的圖表使用和設計規範。得益于豐富的業務場景和使用者需求挑戰，AntV 經曆多年積累與不斷打磨，已支撐起阿裡集團内外 20000+ 業務系統，通過了日均千萬級 UV 産品的嚴苛考驗，是阿裡經濟體資料可視化最重要的基礎設施。
跟往年的品牌日一樣，今天依舊會有幾個底層基礎類庫的大量更新釋出，除此之外，非常高興的向大家介紹 AntV 産品矩陣上新添兩個新成員：
- F2Native，開箱即用的跨平台高性能可視化解決方案，國民級應用支付寶上的圖表元件；
- X6，底層基于 SVG，脫胎于螞蟻實際的業務場景，專注圖編輯領域的元件庫；
從 2017.11.22「 開源·開放 」、2018.11.22「 知新·知心 」到2019.11.22「 知源·緻遠 」，這是 AntV 的第4個品牌日，今年的主題是「 利業·立業 」我們想和大家分享 AntV 将資料可視化能力賦能螞蟻集團、阿裡集團内部業務的故事。
生于業務
2015 年初，剛剛具備雛形的 G2 被投入到了一些螞蟻内部業務中去試用，但是使用者回報性能很差。于是我們開始自研底層渲染引擎 G。一年後，G2 2.0 已經支援了很多零散的内部需求。2016 年，口碑網的一個客戶平台帶着對圖可視化的強需求找到了 AntV，于是有了 G6。自此，源源不斷的業務訴求開始推動着 AntV 産品矩陣蓬勃發展。
圖形文法、商業智能
G2 所負責的基礎統計圖表是前端可視化業務最高頻的場景、最核心的戰場。大量管理界面、資料産品都需要使用統計圖表，但是其中最重度的業務必然是 BI 商業智能産品。2016 年底，螞蟻集團大資料部啟動 BI 産品 DeepInsight 的第三個大版本，使用社群開源的可視化方案，接入大量可視化元件，大大增強産品的資料可視化能力。然而在逐漸的産品疊代和演進過程中，大量的可視化問題暴露出來，主要集中在圖表的豐富度問題、圖表體驗問題和多元探索分析能力。為了解決這些問題，AntV 與 DeepInsight 深度合作，DeepInsight 的同學深入到 G2 棧參與技術研發。
G2 基于圖形文法的可視化實作形式在内部是有争議的。固然，圖形文法保證了它的靈活性，但當業務上的開發同學想要使用 G2 時卻遇到了學習成本和門檻過高的問題。一直以來，AntV 都在探索靈活性與低門檻的平衡。2019 年，我們推出了基于圖表分類的配置式可視化庫 G2Plot，其底層依賴于 G2。自此，G2 棧擁有了兩種産品形态：G2 面向追求靈活度和專業度的可視化工程師，而 G2Plot 提供更快捷、更友好的業務可視化開發能力。
G2Plot 被很多業務方寄予厚望，但它的進展并不順利。去年我們摸索着完成了它的 1.0 版本釋出，然而由于零散的細節需求從大量不同的業務湧入，AntV 的研發同學很難在各種時限的要求中做到完美的架構設計。伴随着各種各樣的吐槽，反而讓我們堅信這是一個對的産品方向。2020，在之前的經驗和教訓之上，G2Plot 不僅做了全新的設計，而且還充分發動了社群的力量來參與研發。研發團隊做了大量的競品調研、業務需求分析、細節設計打磨，力求做到我們承諾的“預設好看、預設好用”。G2Plot 2.0，今天，它來了。
近年來螞蟻業務持續高速增長，人員緊缺。為了高效支撐各業務線前端業務開發的戰場，自從去年 AntV 與 Ant Design 聯姻以來，我們推出了 Ant Design Charts，可以了解為這将是整合 AntV 整個技術棧為一體的 React 版圖表類庫。它迎合業務而生，對内支撐着雲鳳碟和 TechUI, 對外和 Ant Design 形成閉環，已經是很多公司的不二之選。從對内的 0.x 版本到目前的 1.x 版本，經曆了無數次打磨，基礎統計圖表功能上完全透出 G2Plot 的能力, 同時結合 G6 庫，希望她能延續 Ant Design “低門檻，高效率”的美好特性。
在幫助業務研發提效方面，AntV 的投入可謂“不惜成本”。業務爆發增長過程中的一些創業型戰場可能出現産品、設計甚至專業前端人員缺失的場景。這些業務也有資料可視化的需求，而他們更加需要 AntV 的支援。為此，AntV 開始探索智能可視化、自動可視化的場景。去年 SEE Conf 大會我們公開了 AVA 智能可視化架構，期望幫助開發人員自動推薦圖表，甚至“一行代碼完成圖表開發”。經過一些内部場景的試水，今天我們也開源了 AVA 的 1.0 版本。AVA 也将支援 DeepInsight 的增強分析場景，期望能在前沿業務中快速成長。雖然這一條路還很長很長，但我們會持續努力，終有一天從“稚嫩”走到“智能”。
圖分析、圖編輯
大約在 2017 到 2018 年，随着關系網絡和圖分析的普及，湧現出許多有圖可視化需求的業務場景。圖（graph），是一種實體之間的關系網絡資料，在可視化中主要以節點和連線組合成的圖形形式出現。業務中往往包含大量的、錯綜複雜的關系資料，對它們進行可視化是一個很大的挑戰，但也是一個重要的需求。
2018 年初，許多業務在做技術選型的時候開始對比國外的工具和 AntV 的新成員 G6。網商銀行的新業務需要基于圖的風控分析系統和基于關系的故障定位系統，于是開始嘗試接觸圖可視化和 G6。當時 G6 3.0 還在規劃，需求是通過 G6 2.0 版本來進行開發的。整個過程比較順利，但是由于 G6 能力的限制，在需求上砍掉了兩個功能：一個是布局不理想，一個是動畫效果。業務方的開發同學在布局上花了很大的力氣也沒有找到一個合理的布局算法，最後就去看開源的布局算法代碼，自己定制。當時的 G6，對于業務方開發來說僅僅是提供了圖的基礎渲染機制，要實作複雜的能力還需要投入非常多的精力和時間。同樣對 G6 能力的局限性感到遺憾的還有一些圖分析産品，許多業務使用的是 React 技術棧，但是當時 G6 還沒有針對 React 提供一些開箱即用的元件。
雖然年輕的 G6 還有很多不足，但是 AntV 的同學一直在努力建設。有時業務方提出的需求，第二周就得到了特性 Demo，這給了許多業務方信心。2019 年，圖可視化相關的業務爆發了。知識圖譜、流程繪制、圖資料庫、關系分析等等相關業務和需求都開始使用 G6。螞蟻有一個金融知識圖譜相關的業務，在外部元件和 G6 之間反複橫跳，但是最終因為看到了其他産品上 G6 日益精進的表現而選擇了 G6，并且連業務方的設計師也投身了 AntV 參與圖可視化設計規則的制定。除了螞蟻的設計師，阿裡集團的設計師也貢獻了力量。阿裡雲的智能研發平台 DataWorks 和機器學習平台 PAI 都有大量場景，比如業務流程編輯、圖資料搜尋、資料血緣展示等等。這些業務設計師的領域專業經驗沉澱到了 G6 3.0 版本中，AntV 和業務一起打磨和革新，G6 一直在成長。
如今，在邁向第四個版本的路上，G6 已經在功能特性、易用性及性能等方面都有了很大的提升。剛出道時被诟病布局問題，如今已經支援了各種布局算法；早期不支援 React 生态，現在也有了開箱即用的 Graphin；至于互動、動畫方面，現在也有了豐富而有用的互動能力。
圖編輯也是圖領域一個重要方向，許多流程圖、關系圖繪制場景都需要它。基于螞蟻内部的機器學習算法模組化平台多年的可視編排能力打磨，我們決定把其中的圖編輯核心抽取出來，成為 AntV 繼 G6 圖分析的另一個圖可視化領域分支，圖編輯 X6。經過近一年的内部業務打磨，X6 在功能、性能、生态等方面也都已經比較完整。今天我們很高興能為可視化開源社群帶來 X6 1.0 正式版本，請多關照！
除此以外，AntV 在集團内外已經發展出了蓬勃的圖可視化生态，業務類型覆寫雲安全、企業風控、圖資料庫、金融風控、知識圖譜、性能優化等大量場景。彙集大量産品設計和技術研發經驗，近30位産品經理、設計師和工程師的通力合作，我們積累出《AntV 圖可視化解決方案白皮書 1.0》。這可能是國内出品最完整的一套圖可視化解決方案白皮書，今天我們也将開放出來，希望能幫助更多業務擁有更科學高效的圖可視化能力。
設計與責任
針對一些特定的場景案例，我們還做了很多細節的設計打磨。比如在監控場景中，由于真實資料的不可控性與實時性，往往存在着資料資訊過于密集難辨認，或者在某一時間點突然出現極值（數值徒增），而導緻整個圖表難以閱讀的情況。我們通過 Y 軸縮略軸和清單式圖例等互動形态，從設計上解決了這類問題。再比如，在資料分析場景中，使用者往往需要對某一名額進行多元監控。環繞關鍵名額檢視衍生名額、拆分次元、觀察時序趨勢、作進度跟進，這些都可以通過名額卡來完成。AntV 基于業務場景提煉出一套靈活多變的名額卡，它可以示範成各種不同的名額卡類型，進而解決這一大類問題。
另外，我們今年的官網改版，把重點放在了文檔和示例體驗上。這是 AntV 被诟病最多的地方，我們内部認真梳理了各技術棧的文檔，希望改善研發者的開發體驗，讓圖找到使用場景，讓開發者找到 API。今年官網文檔全面更新為互動式文檔，通過圖文合一的方式，希望能給開發者帶來更流暢的體驗。
支付寶作為擁有億級使用者的國民應用，一直非常重視社會責任，AntV 也不例外。移動端圖表庫 F2 今年收到過一個使用者回報，在支付寶某頁面闆塊中的圖表不支援盲人閱讀。相關的同學馬上動手完成了 F2 的無障礙處理。站在業務的角度，讓視障使用者也能享受技術帶來的便利是我們的責任。
結語
技術研發要從業務中來、到業務中去，我們隻有貼近業務，才能看清動向。技術研發還要走在業務需求的前面，當使用者的訴求來臨時我們早已為你做好準備。既要為業務創造價值，也要把自己做成一個好工具，AntV 一直在服務業務的道路上前行。
AntV，螞蟻集團、阿裡集團資料可視化基礎設施。
AntV，一群有愛有夢的人，懷揣「讓人們在資料世界裡獲得視覺化思考能力」的夢想前行。
AntV，利業 · 立業！
附
AntV 2020 品牌日的釋出詳情
- 利業·立業 - AntV 與業務的故事： https://www.yuque.com/antv/blog/2020story
- 技術專文
- G2Plot 2.0 全新來襲 https://www.yuque.com/antv/blog/2020g2
- F2Native 1.0 新的起點 https://www.yuque.com/antv/blog/2020f2
- G6 棧：圖可視分析如此簡單 https://www.yuque.com/antv/blog/2020g6
- X6 1.0 抱歉來晚 https://www.yuque.com/antv/blog/2020x6
- L7 2.3 業務為本完善生态 https://www.yuque.com/antv/blog/2020l7
- AVA 1.0 你的圖表參謀 https://www.yuque.com/antv/blog/2020ava
- 設計專文
- 2020，貼地飛行的 AntV 設計： https://www.yuque.com/antv/blog/2020design
- 解決方案專文
- AntV 圖可視分析解決方案，來啦： https://www.yuque.com/antv/g6/solution
AntV 項目連結
歡迎關注我們的 GitHub 項目，點亮 star 了解我們的實時動态，期待 PR：
AntV 官網：
https://antv.vision/G2：
https://github.com/antvis/g2G2 是一套基于可視化編碼的圖形文法，以資料驅動，具有高度的易用性和擴充性，使用者無需關注各種繁瑣的實作細節，一條語句即可建構出各種各樣的可互動的統計圖表。
G2Plot：
https://github.com/antvis/g2plotG2Plot 的定位是開箱即用、易于配置、具有良好視覺和互動體驗的通用圖表庫。
F2：
https://github.com/antvis/f2F2 是一個專注于移動，開箱即用的可視化解決方案，完美支援 H5 環境同時相容多種環境（node, 小程式，weex）。完備的圖形文法理論，滿足各種可視化需求。專業的移動設計指引為你帶來最佳的移動端圖表體驗。
F2Native：
https://github.com/antvis/F2NativeF2Native 是一個專注于用戶端，開箱即用、高性能的可視化解決方案，完備的圖形文法理論，滿足你的各種需求，專業的移動設計指引為你帶來最佳的移動端圖表體驗。
G6：
https://github.com/antvis/g6G6 是 AntV 旗下的圖可視化與圖分析引擎，G 來自于 Graphic、Graph ，意味着我們要基于圖分析技術做圖可視化；6 來自于《六度分隔理論》，表達了我們對關系資料、關系網絡的敬畏和着迷。
Graphin：
https://github.com/antvis/graphinGraphin 是一個基于 G6 封裝的關系可視分析工具 ，簡單，高效，開箱即用，取自 Graph Insight，圖的分析洞察。
X6：
https://github.com/antvis/X6X6 是 AntV 旗下的圖編輯引擎，提供了一系列開箱即用的互動元件和簡單易用的節點定制能力，友善我們快速搭建 DAG 圖、ER 圖、流程圖等應用。
L7：
https://github.com/antvis/l7L7 是一個基于 WebGL 的開源大規模地理空間資料可視分析開發架構。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能為全球位置資料提供可視分析的能力。
AVA：
https://github.com/antvis/AVAAVA 是為了更簡便的可視分析而生的智能可視化架構。
G：
https://github.com/antvis/gG 是 AntV 幾個産品共同的底層 2D 渲染引擎，高效易用，專注于圖形的渲染、拾取、事件以及動畫機制，給上層 G2、F2、G6 提供統一的渲染機制。
ChartCube：
https://chartcube.alipay.comChartCube 是一個可以快速完成圖表制作的線上工具，隻需要三步就可以建立出高品質的圖表。
關注「Alibaba F2E」
把握阿裡巴巴前端新動向