【技术战疫】G2 4.0 正式版发布!

简介: ![image.png](https://ata2-img.cn-hangzhou.oss-pub.aliyun-inc.com/b38d8b3099e0f743dffb1e0f535b0f0c.png) > G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法。 经历了为期半年的大规模底层重构和开发迭代,G2 4.0 终于和大家见面了。作为继 2017 年 11 月 2

image.png

G2 是一套面向常规统计图表,以数据驱动的高交互可视化图形语法。

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

全新的 4.0

首先欢迎 一波 star ~~~~

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

全面拥抱 TypeScript

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

image.png

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

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

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

2020-02-28 10-06-29.2020-02-28 10_09_57.gif

更新机制引入

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

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

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

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

可视化组件体系升级

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

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

强大的 View 模块

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

支持各种场景下的自动布局:数据更新、图表尺寸变化、坐标系变换以及图表组件位置更新等。

2020-02-24 20-15-20.2020-02-24 20_56_47.gif

全新的交互语法

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

image.png

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

以鼠标 hover 图形,图形高亮为例,该交互行为由两个交互环节组成:

  1. 交互环节 1:鼠标滑入图形元素,图形元素高亮
  2. 交互环节 2: 鼠标滑出图形元素,图形元素恢复原始状态

对以上描述,我们可以分析出每个交互环节的触发对象、触发事件、反馈对象以及结果,如下:

image.png

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

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

ie8.gif ie5.gif 2.gif
12.gif 13.gif A_s-JWTrKjUP4AAAAAAAAAAABkARQnAQ.gif

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

细粒度的动画

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

a1.gif a2.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 path.gif a3.gif

『暗黑』主题

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

image.png

灵活的扩展机制

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

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

如何升级

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

最后

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

相关链接
相关文章
|
云安全 人工智能 安全
重磅发布,阿里云安全大模型正式投入使用
2023年云栖大会,阿里云安全正式宣布基于通义千问大模型训练的安全大模型投入使用。首期开放的功能包括为用户提供定制化的安全告警解读、事件调查及处置建议服务,覆盖全网超过99%的告警事件类型。即日起,用户可在阿里云安全中心免费使用体验。
1518 4
重磅发布,阿里云安全大模型正式投入使用
|
6月前
|
供应链 安全 IDE
重磅发布|OpenSCA SaaS全新上线
OpenSCA SaaS全新上线!
88 0
|
存储 缓存 监控
新品发布 | Cloudpods 3.9.8 版本上线!
3月17日,Cloudpods 新版本 v3.9.8 正式发布。本次更新主要支持虚拟机整机更换块存储及其他一些修复优化,以下为版本更新详情。
新品发布 | Cloudpods 3.9.8 版本上线!
|
存储 Kubernetes 监控
新品发布 | Cloudpods 3.10版本上线!
Cloudpods 3.10版本上线!此版本对私有云和云管功能做了大量优化,新增了报表、费用分摊等企业版功能。
|
数据采集 监控 Dubbo
官宣!Hippo4j 1.4.x 新版本正式发布,探索更多玩法
官宣!Hippo4j 1.4.x 新版本正式发布,探索更多玩法
334 0
|
Android开发 iOS开发
微信7.0.23内测版发布,又有新功能推出
2020年12月,微信更新了安卓7.0.22版本,修复了部分已知问题,主要还是以修复Bug为主。1月13日和1月14日,微信又分别推出了安卓和iOS的7.0.23和7.0.22内测版本。与此前更新内容不同,这次微信推出了不少新功能,一起来看一下吧。
238 0
微信7.0.23内测版发布,又有新功能推出
|
存储 弹性计算 关系型数据库
阿里云新品发布周刊第36期 丨 移动开发平台mPaaS重磅发布
新产品、新版本、新技术、新功能、价格调整,评论在下方,下期更新!关注更多新品发布会!
803 0
阿里云新品发布周刊第36期 丨 移动开发平台mPaaS重磅发布
|
开发者
2019北京Elastic开发者大会日程重磅上线 | 由阿里云联合赞助
2019年度Elastic中国开发者大会(北京)是由Elastic官方在中国举办的第三次开发者大会。阿里云作为Elasticsearch云上生态的主要推动者,很荣幸作为本次大会战略级合作伙伴参与其中,届时将和Elastic技术社区联合发布《Elasticsearch中国开发者报告》。
7848 0
2019北京Elastic开发者大会日程重磅上线 | 由阿里云联合赞助
|
Linux
阿里云贡献者荣誉榜财年首秀,有重磅内容推出
截止2018年04月初,聆听平台上线一年, 荣誉榜单也如约迎来了第2年的第一期,5月7日第13期贡献者荣誉榜单对外发布。同时,阿里云聆听正在不断的走进用户,聆听用户,与用户资源共享,互融互通。
2010 0
|
UED
微软承诺很快发布IE9正式版
微软在上周发布了IE9 RC(9.0.8080.16413),面向全球用户提供了约40种语言。IE9 RC在性能、用户体验、安全性、隐私性等方面都取得了长足进步,尤其是速度方面,IE9 RC不仅比Beta快很多,还超过了其它所有对手。
707 0