知源· 致遠- AntV 11.22 年度發布

導讀

AntV 是一個數據可視化項目，也是一個團隊，螞蟻金服數據可視化團隊，一群有愛有夢的人，怀揣「讓人們在數據世界裡獲得視覺化思考能力」的夢想前行，希望成就智能時代全球領先的數據可視化解決方案，滿足與日俱增的數據洞察需求。

AntV 目前覆蓋了統計圖表、移動端圖表、圖可視化、地理可視化、2D 繪圖引擎和智能可視化多個領域，主要包含G2、G6、F2、L7 以及一套完整的圖表使用和設計規範。得益於豐富的業務場景和用戶需求挑戰，AntV 經歷多年積累與不斷打磨，已支撐起阿里集團內外20000+ 業務系統，通過了日均千萬級UV 產品的嚴苛考驗，是阿里經濟體數據可視化最重要的基礎設施。

跟往年的品牌日一樣，今天依舊會有幾個底層基礎類庫的大量更新發布，除此之外，非常高興的向大家介紹AntV產品矩陣新添的三個成員：

g2plot，一個基於G2，開箱即用、易於配置、具有良好視覺和交互體驗的通用圖表庫；
Graphin，一個基於G6，專注關係可視分析領域的React 組件庫，簡單，高效，開箱即用；
ChartCube，一個可以快速完成圖表製作的在線工具，只需要三步就可以創建出高品質的圖表；

他們都是AntV 技術棧上的更高抽象的封裝或應用，詳見文稿詳情。

跟往年的品牌日不一樣，今年的品牌日主題為「知源·致遠」，除了上述技術、設計的更新與發布，我們真誠的向大家分享AntV團隊的由來與發展歷程，詳見文末AntV全員出鏡演繹的團隊紀錄片，匠心知源，同行致遠。

匠心打磨，是時候給大家一個圖表庫了

g2plot

g2plot，一個基於G2，開箱即用、易於配置、具有良好視覺和交互體驗的通用圖表庫。
G2 是一套基於可視化編碼的圖形語法，以數據驅動，具有高度的易用性和擴展性，用戶無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣的可交互的統計圖表。

每個人都能製作圖表，但並不是人人都能做出易讀，好用又好看的優秀圖表。如何從無聊的默認設置變成有洞見的數據圖表呢？我們融合了在商業智能（BI）中的可視分析與設計實踐經驗，基於g2 的靈活、強大的可視表達能力，抽象常用圖表類型封裝出全新的可視化圖表庫g2plot。結合真實數據，製作圖表，獲取專業的可視化。

我們曾經說過G2 是一個可以生產圖表庫的圖表庫，如今自證預言的推出g2plot 除了具備G2 無限可能的可視表達能力外，g2plot 最主要的特性還有：

開箱即用：默認好用開箱即用的高質量統計圖表
響應式：針對各種分辨率的響應、文本覆蓋、文本超出限製做了精心的設計
會講故事的圖表：提供了多圖組合、疊加、聯動，共同講述一個數據故事的可能性

提前預告的還有G2 4.0，在G2 1.0 - 2.0 階段我們專注於圖形語法，解決了數據到圖形的映射問題，用戶可以通過自由組合圖形語法快速搭建各種圖表。 G2 3.0 隨著業務對圖表體驗需求不斷升級，我們對圖表組件以及交互進行了改造，提供了更加靈活的配置以及自定義功能。而此次G2 4.0 對我們來說是一個很重要的新起點，我們對底層架構做了大量的重構工作，當前G2 4.0 Alpha 版本已放出，穩定版預計將在兩個月後正式發布，她將是一個專業的、給用戶帶來更多可能性的可視化底層引擎，在保證圖表優雅體驗的同時，4.0 將會更加關注於：

圖形語法，數據到圖形的映射；
交互語法，交互同數據、圖形的連接機制；
組件體系，面向交互、體驗優雅；

更多關於g2plot、G2 的最新進展見文末鏈接。

點線析源遠，洞察關係數據

Graphin

_Graphin，取名自Graph Insight，圖的分析洞察，_一個基於G6，專注關係可視分析領域的React 組件庫，簡單，高效，開箱即用。
G6 AntV旗下的圖分析及圖可視化引擎，G來自於Graphic、Graph ，意味著我們要基於圖分析技術做圖可視化；6來自於《六度分隔理論》，表達了我們對關係數據、關係網絡的敬畏和著迷。

目前圖分析已經被廣泛應用在金融反欺詐，公共安全，基礎設施監控，智慧醫療等領域。在這個過程中，我們需要一個強大的圖計算引擎，解決數據合規，挖掘問題。也需要相應的圖算法去解決圖的構建，分析問題。最後在前端，我們需要一個圖可視化引擎，為我們提供可視化分析能力，發現潛在的價值。

Graphin 就是在這樣的背景下誕生的，基於G6 的底層能力一方面屏蔽掉一些領域專業的概念，同時又封裝進去很多常用的圖分析功能，進一步降低圖可視化領域的專業門檻，將這些關係數據進行可視化分析與探索。 Graphin 具有如下產品特性：

數據驅動：充分利用React框架特性，支持數據到圖的映射與變化；
自動佈局：內置豐富的佈局，支持佈局切換，滿足不同場景下的佈局需求；
分析組件：內置Toolbar，ContextMenu，MiniMap，Filter等組件，組件化開發，支持自定義；
自定義樣式：內置節點與邊的樣式，支持用戶通過JSON Schema自定義；
基礎分析：支持節點擴散，尋找邊關係等基礎分析方法；
高級分析：開源後計劃新增時序分析（timebar），地理位置分析（map mode）等高級分析方法。

值得一提的是，G6 從18 年開源到現在已經第2 個版本，從基礎關係圖繪製到圖分析與圖編輯底座，而在3.1.版本後的G6 已重新聚焦在圖分析方向，我們將會給出另外一個產品去承載圖編輯方向的需求。有了這個改變，今天我們帶來的G6 3.2 版本能夠更聚焦的提供：

更豐富的元素：內置豐富的節點與邊元素，自由配置，支持自定義；
更可控的交互：內置10+交互行為，支持自定義交互；
更強大的佈局：內置了10+常用的圖佈局，支持自定義佈局；
更便捷的組件：優化內置組件功能及性能；
更友好的體驗：根據用戶需求分層梳理文檔，支持TypeScript類型推斷。

除了上述默認好用、配置自由的內置功能，元素、交互、佈局均具有高可擴展的自定義機制。

豐富的內置元素。菱形、三角形、星型、卡片型節點。 arc 型、自動彎折的折線型邊。

自定義元素及輔助展示及分析的組件—— 邊綁定。

更多關於Graphin、G6 的最新進展見文末鏈接。

圖表製作可以很簡單

ChartCube

ChartCube是一個可以快速完成圖表製作的在線工具，只需要三步就可以創建出高品質的圖表。

圖表製作——這個最常見卻也五花八門的需求，往往因為工具的領域閉塞性而變得麻煩。雖然設計師能畫出任何形式的圖表，但他們常常遇到要做數據的批量改動而手抖；雖然分析師可以使用辦公軟件熟練地製作圖表，但他們會因為靜態的圖片不能交互而發愁；雖然程序員可以繪製高可用的交互式圖表，但他們常常為了學習代碼類庫而撓頭……讓你在製作一張簡單圖表時感受到挫敗的，通常是一個淺淺的門檻。這個門檻可能是“圖例怎麼對不齊”，也可能是“數據怎麼行列轉換”，還可能是“分析這個目標我該用什麼圖表”……困擾你的是哪一種？

為了讓AntV 多年沈淀的專業技術可以一步服務於你，我們開發了一個在線工具：圖表魔方ChartCube。

你可以完全不懂如何處理數據，你可以沒聽說過任何圖表類庫，你也不需要寫一行代碼。通過最直觀的交互，你都能製作出你需要的圖表。

也許你想為你的運營文章製作一張插圖，也許你需要一份滿足格式要求的數據，甚至你需要一份直接插入網頁的代碼，ChartCube 都能支持。

利用ChartCube 製作圖表，過程非常簡單。通常你只需要三步：選擇圖表、配置圖表、導出圖表，歡迎試用。
更多關於ChartCube 的最新進展見文末鏈接。

優雅的AntV 設計來了

優雅的視覺、交互與製圖

過去一年我們在統計圖表、關係可視化、地理可視化、圖表製作以及可視化站點方面投入了大量的設計資源，今天已連同上述各個產品一起對外發布。而今年AntV設計的關鍵詞為“優雅”，我們希望在視覺、交互與製圖三方面給大家帶來些優雅的設計。

在優雅的視覺設計裡，我們最大的改進是對訊息過載的處理，如智能檢測，以數據標籤為例，數據標籤如果不知道它的背景色是深是淺，是疏是密，就會出現標籤過密、顏色看不清等系列問題。這次產品發布中，標籤結合顏色檢測、碰撞檢測、圖形檢測、超區域檢測，我們已能解決這些問題。除此之外還有符合美學選擇和專注的全新視覺樣式，很多人期待的Dark Mode 也會到來，將與Ant Design 相關組件、頁面無縫融合，整體和諧優美。

在優雅的交互設計裡，AntV在構建響應式系統時結合Responsive design與Adaptive design，遵循宏觀層面保證核心訊息優先展示，微觀層面保證所有尺寸下細節訊息都有能力獲取到交互兩條基本原則，使得小到mini 圖表，大到大屏顯示，AntV 總能保證重點訊息不丟失的同時輕鬆勝任各種尺寸、多種設備。同時，交互語法的增強使得AntV 在敘事能力有了進一步提升。

在優雅的製圖設計裡，AntV一直致力於提供研發套件，這回我們把關注點聚焦到設計師身上，讓設計者進入圖表製作的全面提效時代，Sketch插件Kitchen以及上面介紹到的ChartCube，只需10 秒，輕鬆做出優雅圖表。

更多關於AntV 設計的最新進展見文末鏈接。

知源· 致遠

這是AntV 發展的第5 個年頭，從2014 年第一位工程師的白手起家，到2017 年第一個項目G2 開源，現如今我們已經有了7 個產品，幾十個項目在GitHub 上發布，團隊的規模也從3-5 個人發展成橫跨螞蟻多個前端、設計部門30+ 人員的專業團隊。

5 年來的起伏跌宕雖然不能說波瀾壯闊，但卻是我們生命中永不磨滅的印跡，藉由這4分鐘的視頻與大家分享過去這5 年AntV 團隊所經歷的歡喜與失落，專注、專業、堅持，希望對這份匠心的知源，能與大家並肩同行致遠。

更多詳情見「知源·致遠- AntV的那些人，那些事兒」

結語

過去一年我們從底向上重構了繪圖引擎G，重寫了所有的組件（Axis、Legend、Annotation等），對G2、G6、L7進行了重構，解決了各種複雜的數據場景適配問題，向著可視化工具開箱即用的方向發展。

我們看到各個產品的界限在不斷模糊，傳統圖表和關係圖混用、地理場景上的關係分析、多端融合要求我們不斷的從渲染引擎、組件、數據處理層面進行重構，使用戶可以無縫的對各個產品進行整合，智能可視化對可視化研發、設計、產品的影響已經出現，顛覆性的產品可能很快就會脫穎而出。

我們已經做好準備了嗎？還沒有，但我們已經在行動，我們是AntV，螞蟻金服數據可視化團隊，一群有愛有夢的人，怀揣「讓人們在數據世界裡獲得視覺化思考能力」的夢想前行。

AntV，知源· 致遠！

-------------------------

附

AntV 品牌日的發布詳情

AntV 項目鏈接

歡迎關注我們的GitHub 項目，點亮star 了解我們的實時動態，期待pr：

AntV官網： https://antv.alipay.com
G2 ： https:// github.com/antvis/g2
G2是一套基於可視化編碼的圖形語法，以數據驅動，具有高度的易用性和擴展性，用戶無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣的可交互的統計圖表。
g2plot： https:// github.com/antvis/g2plo t
g2plot 的定位是開箱即用、易於配置、具有良好視覺和交互體驗的通用圖表庫。
F2 ： https:// github.com/antvis/f2
F2是一個專注於移動，開箱即用的可視化解決方案，完美支持H5環境同時兼容多種環境（node,小程序，weex）。完備的圖形語法理論，滿足各種可視化需求。專業的移動設計指引為你帶來最佳的移動端圖表體驗。
G6 ： https:// github.com/antvis/g6
G6是AntV旗下的圖可視化與圖分析引擎， G來自於Graphic、Graph ，意味著我們要基於圖分析技術做圖可視化；6來自於《六度分隔理論》，表達了我們對關係數據、關係網絡的敬畏和著迷。
Graphin： https:// github.com/antvis/graph in
Graphin是一個基於G6封裝的關係可視分析工具，簡單，高效，開箱即用，取自Graph Insight，圖的分析洞察。
L7 ： https:// github.com/antvis/l7
L7是一個基於WebGL的開源大規模地理空間數據可視分析開發框架。 L7中的L代表Location，7代表世界七大洲，寓意能為全球位置數據提供可視分析的能力。
G ： https:// github.com/antvis/g
G是AntV幾個產品共同的底層2D渲染引擎，高效易用，專注於圖形的渲染、拾取、事件以及動畫機制，給上層G2、F2、G6提供統一的渲染機制。
ChartCube ： https://chartcube.alipay.com
ChartCube是一個可以快速完成圖表製作的在線工具，只需要三步就可以創建出高品質的圖表。

知源· 致遠- AntV 11.22 年度發布

知源· 致遠- AntV 11.22 年度發布

導讀