天天看點

【技術戰疫】G2 4.0 正式版釋出!

【技術戰疫】G2 4.0 正式版釋出!
G2 是一套面向正常統計圖表,以資料驅動的高互動可視化圖形文法。

經曆了為期半年的大規模底層重構和開發疊代,G2 4.0 終于和大家見面了。作為繼 2017 年 11 月 22 日 G2 3.0 正式開源釋出以來 G2 的第二次大版本釋出,4.0 版本仍堅守着『打造資料驅動的高互動圖形文法』的初心,在圖形文法的基礎上,新增了互動文法,同時在産品的功能、體驗、易用性和靈活性等各個方面進行了全面提升。

全新的 4.0

首先歡迎 一波 star ~~~~

嚴格意義上來說,這并不是一次重構,而是一次大規模的重寫,我們自底向上,從代碼到文檔,建構了全新的 G2。

全面擁抱 TypeScript

我們使用 TypeScript 重寫了 G2 以及其相關的所有子產品,并提供了完整的類型定義檔案。

【技術戰疫】G2 4.0 正式版釋出!

繪圖引擎更新,多引擎切換

G 是 AntV 旗下一款易用、高效、強大的 2D 可視化渲染引擎,提供 Canvas、SVG 等多種渲染方式的實作。

随着 AntV 底層渲染引擎 G 4.0 的釋出,為 G2 4.0 帶來了Canvas、SVG 多渲染模式支援、局部重新整理、動畫體驗增強等多種利好。

【技術戰疫】G2 4.0 正式版釋出!

更新機制引入

在 G2 之前的版本中,資料初始化和資料更新的流程本質上一樣,差別僅在于後者需要把之前的圖形清理掉,是以在資料更新之後,圖形元素都是重新建立的,與資料更新前的圖形元素無法進行關聯,這就對動畫、以及互動的一緻性造成了影響。是以我們在 4.0 中引入了更新機制,包括:

  1. Geometry 的資料更新,為此我們引入了 Element 概念;
  2. 可視化元件的更新。

示例一:在圖表發生資料更新後,資料更新前的圖形元素并沒有被銷毀,我們仍然可以對更新前取到的 Element 執行個體進行操作。

【技術戰疫】G2 4.0 正式版釋出!

示例二:更新機制的加入,細化了資料的處理流程,為圖表的細粒度動畫提供了基礎。以下動态條形圖,當每次資料發生更新時,坐标軸文本 Axis、圖形文本标注 Label、幾何圖形 Geomtry等圖表元素,均可在更新階段定制對應的動畫。

【技術戰疫】G2 4.0 正式版釋出!

可視化元件體系更新

結合 AntV 下各個産品:G2、F2、G6、L7 的需求,我們重新設計了圖表元件,形成了功能更強,自由度更高,擴充性更好,面向互動的可視化元件體系。在相容 3.x 功能的基礎上,增加了動畫、限制性布局以及互動等功能。

圖例及坐标軸文本自适應 Tooltip 坐标系自适應
【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!

強大的 View 子產品

View 是擁有獨立資料源,并且能夠繪制多個圖形的容器。相比于 3.x,4.0 中 Chart 和 View 的職責發生了一些變化:View 是 G2 的畫布容器,負責子 View、幾何标記以及可視化元件的管理,而 Chart 是繼承 View,直接暴露給開發者的便捷使用入口,在 4.0 中,使用者可以根據自己業務的定制需求,使用 View 去開發個性化的資料多元分析圖形。另外我們還支援了 View 嵌套以及元件自動布局。

支援各種場景下的自動布局:資料更新、圖表尺寸變化、坐标系變換以及圖表元件位置更新等。

【技術戰疫】G2 4.0 正式版釋出!

全新的互動文法

G2 4.0 開始,我們從底層的 G 4.0 開始重構事件的實作,可視化元件層統一接口和事件機制,G2 層 Geometry 拆分出 Element 以适應新的互動機制,當這一切就緒,互動文法的新篇章終于開啟。

【技術戰疫】G2 4.0 正式版釋出!

我們将互動行為拆分成一個個互動環節,而每個互動環節又由一個個觸發對象和回報對象組成,通過對觸發對象和回報對象的拼裝組合,我們就可以搭建出各種各樣的互動行為,而互動行為之間又可以進行疊加使用。

以滑鼠 hover 圖形,圖形高亮為例,該互動行為由兩個互動環節組成:

  1. 互動環節 1:滑鼠滑入圖形元素,圖形元素高亮
  2. 互動環節 2: 滑鼠滑出圖形元素,圖形元素恢複原始狀态

對以上描述,我們可以分析出每個互動環節的觸發對象、觸發事件、回報對象以及結果,如下:

【技術戰疫】G2 4.0 正式版釋出!

于是我們就可以使用互動文法進行組裝:

通過這一套互動文法,我們為 G2 組裝配置了豐富的互動行為,友善使用者快速上手使用。

【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!

将來我們将會嘗試讓互動文法會更加自然化,讓使用者可以通過更加符合文法的方式進行使用。

細粒度的動畫

得益于更新機制的引入,G2 4.0 的動畫配置更加細粒度,在原有 Geometry 動畫的基礎上,使用者還可以對圖表元件(Axis、Annotation 等)及 Label 文本标注進行動畫配置。于此同時,我們還優化了各個 Geometry 的内置動畫。

【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!
【技術戰疫】G2 4.0 正式版釋出!

『暗黑』主題

在圖表主題上,G2 4.0 做了一次設計的更新,同時新增了 'dark' 主題。

【技術戰疫】G2 4.0 正式版釋出!

靈活的擴充機制

G2 4.0 重新設計并統一了各個核心子產品的擴充機制,相比 3.x 版本,粒度更新,機制更靈活,使用者可以基于最核心的子產品,按需加載需要的功能子產品,包括自定義 Shape、主題、互動、元件、動畫等,具體使用請閱讀

按需引用

教程。

除了以上變化之外,我們還對 API 進行了大量的優化,在最大程度相容 3.x 文法的基礎上,提供了對使用者更加友好,更易了解的函數命名以及更合理的配置項結構,同時還對教程及 API 文檔進行了重構。歡迎通路 G2 官網了解更多細節内容。

如何更新

為了盡可能簡化更新,G2 4.0 保持了最大程度上的相容,但是仍然有一部分 breaking change 需要注意,具體請參考 

G2 4.0 更新指南

最後

非常感謝您的耐心閱讀,如果你對 G2 感興趣,可以通過以下管道關注我們:

相關連結

繼續閱讀