![蚂蚁金服开源 | 可视化图形语法 G2 3.2:迭变](https://static001.infoq.cn/resource/image/6b/a5/6b38ac0ef921d5d708441b31b25ff0a5.jpg)
小蚂蚁说:
G2 是蚂蚁金服数据可视化解决方案 AntV 的一员。去年 11 月,蚂蚁金服正式对外开源了数据库驱动的高交互可视化图形语法 G2。今天,G2 发布了 3.2 版本。这个版本针对最常用的图表使用场景,新增了多种辅助元素 guide,升级和扩展了图例 legend,给大家带来更丰富完备的视觉认知体系,同时优化了坐标轴 Axis、提示信息 Tooltip 的视觉细节,还带来了呼声很高的 chart 级别主题支持,持续对图表的体验进行优化升级。
今天我们就来看看新版本具体升级了哪些地方!
![](https://static001.infoq.cn/resource/image/76/2c/76eb5e5421ecbe7356a2d491d150522c.png)
更加丰富完备的视觉认知体系
「让人们在数据世界里获得视觉能力」是 AntV 始终坚持的梦想,G2 开发进入 3.x 以来,我们一直致力于通过探索数据、图形、解释信息三者之间的结合方式,丰富和优化数据可视化认知体系。
1.充分利用接近性原则的尾部跟随图例
格式塔原理的接近性原则告诉我们,在视觉体系中,元素之间的相对距离会影响对我们对群组关系的认知:通常相互靠近的元素更有可能是一组的,距离较远则相反。
根据这个原则,我们针对折线图和面积图的使用场景设计了 tail-legend: 通过 legend 配置项,图例自动跟随在折线的尾部,使折线和对应图例通过临近的空间的关系自然组织在一起,增强了图形和解释信息之间的视觉联系。
![](https://static001.infoq.cn/resource/image/b1/b8/b1084e9922b8834ac5ddaa7b820caeb8.png)
tail-legend 应用于折线图中的场景。
2.打破图形色彩固有边界
在可视化体系中,图形是天然的色彩单位,除此之外,我们也在探索其他以数据为驱动的色彩方案。G2 3.2 提供了基于数据空间的色彩组合方式 — guide().regionFilter,它允许以数据空间区域为标准进行色彩渲染,这意味着通过 regionFilter,一个图形可以渲染为不同的分段颜色,同一数据空间内的不同的图形也可以渲染为同一种颜色,丰富了 G2 的图表色彩语义和认知空间。
![](https://static001.infoq.cn/resource/image/10/f1/10dce88a5954e36252501859badba6f1.png)
使用 regionFilter 复现数据可视化先驱者 William Playfair 经典案例。
![](https://static001.infoq.cn/resource/image/bf/d5/bfd995129af4ed60f3cef799fc5139d5.png)
regionFilter 应用于面积图。
3.数据标注的点线面
G2 3.2 新增了支持特殊数据标注的 guide 类型,帮助用户注意及理解图表中具有某种特殊含义的数据,如“峰值”、“谷值”、“异常数据”等。根据需要进行标注的数据特点,我们将之理解为三种类型:独立数据(点)、序列数据(线)、集群数据(面),这三种类型同时也暗合可视化图形映射的基本规则。目前独立数据点和序列数据点的标注已经可用,集群数据标注也将在 G2 3.3 与大家见面。
![](https://static001.infoq.cn/resource/image/f0/bd/f0c59c06a6aa923beccfcbd7f0bf80bd.png)
guide.dataMarker(点) | guide.dataRegion(线) 在折线图中的使用。
更灵活的组件配置
在增进视觉认知的新特性之外,一些组件的使用边界也悄悄进行了拓展,组件使用变得更加灵活,比如:
图例的定位从“上下左右”四角定位拓展到了 12 个
![](https://static001.infoq.cn/resource/image/a1/15/a1f3cd64777e6fd9e1a8c356f8302d15.png)
坐标轴样式支持区分连续和分类数据,使用混合图表时,共用一个轴和栅格不会造成误解
![](https://static001.infoq.cn/resource/image/2d/5e/2de7cd5da25d98528cbbf52fe034d15e.png)
之所以说这些拓展是"悄悄"发生的,是因为我们做好了向上兼容,保证了 G2 性能和表现的稳定性,而只需要根据文档开启相应配置项,就可以体验新的组件特性了。
支持 chart 级别主题,久等了
主题对 G2 而言,就是许多配置项的集合。以往修改主题必须要全局修改,牵一发动全身。3.2 在保留全局主题切换的同时,新增了自定义主题的接口,并且支持 chart 级别的主题切换。同一个应用中也能同时存在不同主题的图表了。
![](https://static001.infoq.cn/resource/image/1c/57/1c8aa8782596fdea0b9efae62e8a8a57.png)
![](https://static001.infoq.cn/resource/image/57/9f/57ea2469526ebbe276373ad119d4ac9f.png)
试用 3.2 & 致谢
3.2 已经发布为 @antv/g2 包的最新版本(latest,3.2.4),可以通过以下途径尝鲜:
通过 npm 安装: npm install @antv/g2 --save
使用 CDN 链接:https: //gw. alipayobjects.com/os/antv/pkg/_antv.g2-3.2.4/dist/g2.min.js
欢迎试用、加 star / 提 issue / 提 pull request。也借此机会感谢对 3.2 版本鼎力支持的社区小伙伴们(排名不分先后):
https:// github. com/aa1011372655
https:// github. com/guisturdy
https:// github. com/janjakubnanista
本文转载自公众号蚂蚁金服科技(ID:Ant-Techfin)。
原文链接:
https://mp.weixin.qq.com/s/AAZmP32kk707_zJiR-gKaQ
评论