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

導讀

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

AntV 目前覆蓋了統計圖表、移動端圖表、圖可視化、地理可視化、2D 繪圖引擎和智能可視化多個領域，主要包含 G二、G六、F二、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等），對 G二、G六、L7進行了重構，解決了各類複雜的數據場景適配問題，向着可視化工具開箱即用的方向發展。

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

咱們已經作好準備了嗎？尚未，但咱們已經在行動，咱們是 AntV，螞蟻金服數據可視化團隊，一羣有愛有夢的人，懷揣「讓人們在數據世界裏得到視覺化思考能力」的夢想前行。

AntV，知源 · 致遠！

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

---

附

AntV 品牌日的發佈詳情

• 知源 · 致遠 - AntV 11.22 年度發佈
• 技術
  • 這張圖表「不簡單」- AntV 的圖表工廠
  • 洞察關係數據 - AntV 的圖可視化與圖分析
  • 突破專業門檻 - AntV 的地理可視化
  • 高效易用的 2D 渲染引擎 - G 4.0 升級
• 設計
  • 2019，優雅的 AntV 來了
  • 打造默認好用的企業級圖表-g2plot
  • 始於探索 - G6 圖可視化設計
  • 從「心」出發之 L7 地圖可視化設計
• 產品
  • 圖表製做能夠很簡單 - 圖表魔方 ChartCube
• 知源 · 致遠 - AntV 的那些人，那些事兒

AntV 項目連接

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

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