蚂蚁金服 AntV G2 4.0 正式版发布!

1.jpeg

G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法。
经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了。作为继 2017 年 11 月 22 日 G2 3.0 正式开源发布以来 G2 的第二次大版本发布,4.0 版本仍坚守着『打造数据驱动的高交互图形语法』的初心,在图形语法的基础上,新增了交互语法,同时在产品的功能、体验、易用性和灵活性等各个方面进行了全面提升。

全新的 4.0

首先欢迎一波 star ~~~~

严格意义上来说,这并不是一次重构,而是一次大规模的重写,我们自底向上,从代码到文档,构建了全新的 G2。

全面拥抱 TypeScript

我们使用 TypeScript 重写了 G2 以及其相关的所有模块,并提供了完整的类型定义文件

2.png

绘图引擎升级,多引擎切换

G 是 AntV 旗下一款易用、高效、强大的 2D 可视化渲染引擎,提供 Canvas、SVG 等多种渲染方式的实现。

随着 AntV 底层渲染引擎 G 4.0 的发布,为 G2 4.0 带来了Canvas、SVG 多渲染模式支持局部刷新动画体验增强等多种利好。

更新机制引入

在 G2 之前的版本中,数据初始化和数据更新的流程本质上一样,区别仅在于后者需要把之前的图形清理掉,所以在数据更新之后,图形元素都是重新创建的,与数据更新前的图形元素无法进行关联,这就对动画、以及交互的一致性造成了影响。所以我们在 4.0 中引入了更新机制,包括:

  1. Geometry 的数据更新,为此我们引入了 Element 概念;
  2. 可视化组件的更新。

示例一:在图表发生数据更新后,数据更新前的图形元素并没有被销毁,我们仍然可以对更新前取到的 Element 实例进行操作。<br />

2020-02-28 11-09-27.2020-02-28 11_10_38.gif
2020-02-28 11-09-27.2020-02-28 11_10_38.gif

示例二:更新机制的加入,细化了数据的处理流程,为图表的细粒度动画提供了基础。以下动态条形图,当每次数据发生更新时,坐标轴文本 Axis、图形文本标注 Label、几何图形 Geomtry等图表元素,均可在更新阶段定制对应的动画。

2020-02-28 11-20-25.2020-02-28 11_22_16.gif
2020-02-28 11-20-25.2020-02-28 11_22_16.gif

可视化组件体系升级

结合 AntV 下各个产品:G2、F2、G6、L7 的需求,我们重新设计了图表组件,形成了功能更强,自由度更高,扩展性更好,面向交互的可视化组件体系。在兼容 3.x 功能的基础上,增加了动画、约束性布局以及交互等功能。

图例及坐标轴文本自适应 Tooltip 坐标系自适应
111.gif
111.gif
222.gif
222.gif

强大的 View 模块

View 是拥有独立数据源,并且能够绘制多个图形的容器。相比于 3.x,4.0 中 Chart 和 View 的职责发生了一些变化:View 是 G2 的画布容器,负责子 View、几何标记以及可视化组件的管理,而 Chart 是继承 View,直接暴露给开发者的便捷使用入口,在 4.0 中,用户可以根据自己业务的定制需求,使用 View 去开发个性化的数据多维分析图形。另外我们还支持了 View 嵌套以及组件自动布局。

支持各种场景下的自动布局:数据更新、图表尺寸变化、坐标系变换以及图表组件位置更新等。<br />**
2020-02-24 20-15-20.2020-02-24 20_56_47.gif
2020-02-24 20-15-20.2020-02-24 20_56_47.gif

全新的交互语法

G2 4.0 开始,我们从底层的 G 4.0 开始重构事件的实现,可视化组件层统一接口和事件机制,G2 层 Geometry 拆分出 Element 以适应新的交互机制,当这一切就绪,交互语法的新篇章终于开启

image.png
image.png

我们将交互行为拆分成一个个交互环节,而每个交互环节又由一个个触发对象和反馈对象组成,通过对触发对象和反馈对象的拼装组合,我们就可以搭建出各种各样的交互行为,而交互行为之间又可以进行叠加使用。

以鼠标 hover 图形,图形高亮为例,该交互行为由两个交互环节组成:<br />交互环节 1:鼠标滑入图形元素,图形元素高亮<br />交互环节 2: 鼠标滑出图形元素,图形元素恢复原始状态<br />对以上描述,我们可以分析出每个交互环节的触发对象、触发事件、反馈对象以及结果,如下:<br />
image.png
image.png

于是我们就可以使用交互语法进行组装:

11.png
11.png
<br /><br />
22.gif
22.gif

通过这一套交互语法,我们为 G2 组装配置了丰富的交互行为,方便用户快速上手使用。

ie8.gif
ie8.gif
ie5.gif
ie5.gif
2.gif
2.gif

<br />
12.gif
12.gif
13.gif
13.gif
A_s-JWTrKjUP4AAAAAAAAAAABkARQnAQ.gif
A_s-JWTrKjUP4AAAAAAAAAAABkARQnAQ.gif

将来我们将会尝试让交互语法会更加自然化,让用户可以通过更加符合文法的方式进行使用。

细粒度的动画

得益于更新机制的引入,G2 4.0 的动画配置更加细粒度,在原有 Geometry 动画的基础上,用户还可以对图表组件(Axis、Annotation 等)及 Label 文本标注进行动画配置。于此同时,我们还优化了各个 Geometry 的内置动画。

a1.gif
a1.gif
a2.gif
a2.gif
2020-02-28 13-38-01.2020-02-28 13_38_28.gif
2020-02-28 13-38-01.2020-02-28 13_38_28.gif
2020-02-28 13-34-51.2020-02-28 13_35_29.gif
2020-02-28 13-34-51.2020-02-28 13_35_29.gif
path.gif
path.gif
a3.gif
a3.gif

『暗黑』主题

在图表主题上,G2 4.0 做了一次设计的升级,同时新增了 'dark' 主题。

image.png
image.png

灵活的扩展机制

G2 4.0 重新设计并统一了各个核心模块的扩展机制,相比 3.x 版本,粒度更新,机制更灵活,用户可以基于最核心的模块,按需加载需要的功能模块,包括自定义 Shape、主题、交互、组件、动画等,具体使用请阅读按需引用教程。

除了以上变化之外,我们还对 API 进行了大量的优化,在最大程度兼容 3.x 语法的基础上,提供了对用户更加友好,更易理解的函数命名以及更合理的配置项结构,同时还对教程及 API 文档进行了重构。欢迎访问 G2 官网了解更多细节内容。

如何升级

为了尽可能简化升级,G2 4.0 保持了最大程度上的兼容,但是仍然有一部分 breaking change 需要注意,具体请参考 G2 4.0 升级指南

最后

非常感谢您的耐心阅读,如果你对 G2 感兴趣,可以通过以下渠道关注我们:

相关链接

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,163评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,301评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,089评论 0 352
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,093评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,110评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,079评论 1 295
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,005评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,840评论 0 273
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,278评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,497评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,667评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,394评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,980评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,628评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,796评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,649评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,548评论 2 352

推荐阅读更多精彩内容

  • 听风听雨过清明,愁草瘗花铭。楼前绿暗分携路,一丝柳,一寸柔情。料峭春寒中酒,交加晓梦啼莺。 西园日日扫林亭,依旧赏...
    俱像阅读 681评论 0 4
  • 发现当你心情不爽时,坏的能量场就会包围你,坏事情就会一件接一件到来。 心情对一个人实在太重要了。说别人格局小,其实...
    新明半岛阅读 339评论 0 0
  • 什么是block Blocks是C语言的扩充功能,可以用一句话来表示Blocks的扩充功能:带有自动变量(局部变量...
    MichealXXX阅读 173评论 0 1