導讀

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 將會更加關注於：

• 圖形語法，資料到圖形的對映；
• 互動語法，互動同資料、圖形的連線機制；
• 元件體系，面向互動、體驗優雅；

點線析源遠，洞察關係資料

—— 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+ 常用的圖佈局，支援自定義佈局；
• 更便捷的元件：最佳化內建元件功能及效能；
• 更友好的體驗：根據使用者需求分層梳理文件，支援 Type 型別推斷。

除了上述預設好用、配置自由的內建功能，元素、互動、佈局均具有高可擴充套件的自定義機制。

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

自定義元素及輔助展示及分析的元件——?邊繫結。

圖表製作可以很簡單

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

影片： 螞蟻金服 AntV - 知源·致遠

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

結語

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

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

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

AntV，知源 · 致遠！

AntV 專案連結

• AntV 官網： 
• G2：

G2 是一套基於視覺化編碼的圖形語法，以資料驅動，具有高度的易用性和擴充套件性，使用者無需關注各種繁瑣的實現細節，一條語句即可構建出各種各樣的可互動的統計圖表。

• G2Plot： plot

G2Plot 的定位是開箱即用、易於配置、具有良好視覺和互動體驗的通用圖表庫。

• F2：h ttps://github.com/antvis/f2

F2 是一個專注於移動，開箱即用的視覺化解決方案，完美支援 H5 環境同時相容多種環境（node, 小程式，weex）。完備的圖形語法理論，滿足各種視覺化需求。專業的移動設計指引為你帶來最佳的移動端圖表體驗。

• G6：

G6 是 AntV 旗下的圖視覺化與圖分析引擎，G 來自於 Graphic、Graph ，意味著我們要基於圖分析技術做圖視覺化；6 來自於《六度分隔理論》，表達了我們對關係資料、關係網路的敬畏和著迷。

• Graphin：

Graphin 是一個基於 G6 封裝的關係可視分析工具 ，簡單，高效，開箱即用，取自 Graph Insight，圖的分析洞察。

• L7：

L7 是一個基於 WebGL 的開源大規模地理空間資料可視分析開發框架。L7 中的 L 代表 Location，7 代表世界七大洲，寓意能為全球位置資料提供可視分析的能力。

• G：

G 是 AntV 幾個產品共同的底層 2D 渲染引擎，高效易用，專注於圖形的渲染、拾取、事件以及動畫機制，給上層 G2、F2、G6 提供統一的渲染機制。

• ChartCube： https://chartcube.alipay.com

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