[[317830]]

話不多說，先上地址：

GitHub：https://github.com/antvis/g2

官網(wǎng)：https://g2.antv.vision/

介紹

G2 是一套面向常規(guī)統(tǒng)計(jì)圖表，以數(shù)據(jù)驅(qū)動(dòng)的高交互可視化圖形語法。

全面擁抱 TypeScript

我們使用 TypeScript 重寫了 G2 以及其相關(guān)的所有模塊，并提供了完整的類型定義文件。

繪圖引擎升級(jí)，多引擎切換

G 是 AntV 旗下一款易用、高效、強(qiáng)大的 2D 可視化渲染引擎，提供 Canvas、SVG 等多種渲染方式的實(shí)現(xiàn)。

新發(fā)布的4.0，給我們帶來了Canvas、SVG 多渲染模式支持、局部刷新、動(dòng)畫體驗(yàn)增強(qiáng)等多種利好。

更新機(jī)制引入

在 G2 之前的版本中，數(shù)據(jù)初始化和數(shù)據(jù)更新的流程本質(zhì)上一樣，區(qū)別僅在于后者需要把之前的圖形清理掉，所以在數(shù)據(jù)更新之后，圖形元素都是重新創(chuàng)建的，與數(shù)據(jù)更新前的圖形元素?zé)o法進(jìn)行關(guān)聯(lián)，這就對(duì)動(dòng)畫、以及交互的一致性造成了影響。所以我們?cè)?4.0 中引入了更新機(jī)制，包括：

1. Geometry 的數(shù)據(jù)更新，為此我們引入了 Element 概念；
2. 可視化組件的更新。

示例一：在圖表發(fā)生數(shù)據(jù)更新后，數(shù)據(jù)更新前的圖形元素并沒有被銷毀，我們?nèi)匀豢梢詫?duì)更新前取到的 Element 實(shí)例進(jìn)行操作。

示例二：更新機(jī)制的加入，細(xì)化了數(shù)據(jù)的處理流程，為圖表的細(xì)粒度動(dòng)畫提供了基礎(chǔ)。以下動(dòng)態(tài)條形圖，當(dāng)每次數(shù)據(jù)發(fā)生更新時(shí)，坐標(biāo)軸文本 Axis、圖形文本標(biāo)注 Label、幾何圖形 Geomtry等圖表元素，均可在更新階段定制對(duì)應(yīng)的動(dòng)畫。

可視化組件體系升級(jí)

結(jié)合 AntV 下各個(gè)產(chǎn)品：G2、F2、G6、L7 的需求，我們重新設(shè)計(jì)了圖表組件，形成了功能更強(qiáng)，自由度更高，擴(kuò)展性更好，面向交互的可視化組件體系。在兼容 3.x 功能的基礎(chǔ)上，增加了動(dòng)畫、約束性布局以及交互等功能。

圖例及坐標(biāo)軸文本自適應(yīng)

Tooltip 坐標(biāo)系自適應(yīng)

強(qiáng)大的 View 模塊

View 是擁有獨(dú)立數(shù)據(jù)源，并且能夠繪制多個(gè)圖形的容器。相比于 3.x，4.0 中 Chart 和 View 的職責(zé)發(fā)生了一些變化：View 是 G2 的畫布容器，負(fù)責(zé)子 View、幾何標(biāo)記以及可視化組件的管理，而 Chart 是繼承 View，直接暴露給開發(fā)者的便捷使用入口，在 4.0 中，用戶可以根據(jù)自己業(yè)務(wù)的定制需求，使用 View 去開發(fā)個(gè)性化的數(shù)據(jù)多維分析圖形。另外我們還支持了 View 嵌套以及組件自動(dòng)布局。

支持各種場(chǎng)景下的自動(dòng)布局：數(shù)據(jù)更新、圖表尺寸變化、坐標(biāo)系變換以及圖表組件位置更新等。

全新的交互語法

G2 4.0 開始，我們從底層的 G 4.0 開始重構(gòu)事件的實(shí)現(xiàn)，可視化組件層統(tǒng)一接口和事件機(jī)制，G2 層 Geometry 拆分出 Element 以適應(yīng)新的交互機(jī)制，當(dāng)這一切就緒，交互語法的新篇章終于開啟。

我們將交互行為拆分成一個(gè)個(gè)交互環(huán)節(jié)，而每個(gè)交互環(huán)節(jié)又由一個(gè)個(gè)觸發(fā)對(duì)象和反饋對(duì)象組成，通過對(duì)觸發(fā)對(duì)象和反饋對(duì)象的拼裝組合，我們就可以搭建出各種各樣的交互行為，而交互行為之間又可以進(jìn)行疊加使用。

以鼠標(biāo) hover 圖形，圖形高亮為例，該交互行為由兩個(gè)交互環(huán)節(jié)組成：

1. 交互環(huán)節(jié) 1：鼠標(biāo)滑入圖形元素，圖形元素高亮

2. 交互環(huán)節(jié) 2: 鼠標(biāo)滑出圖形元素，圖形元素恢復(fù)原始狀態(tài)

對(duì)以上描述，我們可以分析出每個(gè)交互環(huán)節(jié)的觸發(fā)對(duì)象、觸發(fā)事件、反饋對(duì)象以及結(jié)果，如下：

于是我們就可以使用交互語法進(jìn)行組裝：

通過這一套交互語法，我們?yōu)?G2 組裝配置了豐富的交互行為，方便用戶快速上手使用。

將來我們將會(huì)嘗試讓交互語法會(huì)更加自然化，讓用戶可以通過更加符合文法的方式進(jìn)行使用。

細(xì)粒度的動(dòng)畫

得益于更新機(jī)制的引入，G2 4.0 的動(dòng)畫配置更加細(xì)粒度，在原有 Geometry 動(dòng)畫的基礎(chǔ)上，用戶還可以對(duì)圖表組件（Axis、Annotation 等）及 Label 文本標(biāo)注進(jìn)行動(dòng)畫配置。于此同時(shí)，我們還優(yōu)化了各個(gè) Geometry 的內(nèi)置動(dòng)畫。

『暗黑』主題

在圖表主題上，G2 4.0 做了一次設(shè)計(jì)的升級(jí)，同時(shí)新增了 'dark' 主題。

靈活的擴(kuò)展機(jī)制

G2 4.0 重新設(shè)計(jì)并統(tǒng)一了各個(gè)核心模塊的擴(kuò)展機(jī)制，相比 3.x 版本，粒度更新，機(jī)制更靈活，用戶可以基于最核心的模塊，按需加載需要的功能模塊，包括自定義 Shape、主題、交互、組件、動(dòng)畫等，具體使用請(qǐng)閱讀按需引用教程。

除了以上變化之外，我們還對(duì) API 進(jìn)行了大量的優(yōu)化，在最大程度兼容 3.x 語法的基礎(chǔ)上，提供了對(duì)用戶更加友好，更易理解的函數(shù)命名以及更合理的配置項(xiàng)結(jié)構(gòu)，同時(shí)還對(duì)教程及 API 文檔進(jìn)行了重構(gòu)。歡迎訪問 G2 官網(wǎng)了解更多細(xì)節(jié)內(nèi)容。