蚂蚁金服开源 | 可视化图形语法 G2 3.2：迭变

小蚂蚁说：

G2 是蚂蚁金服数据可视化解决方案 AntV 的一员。去年 11 月，蚂蚁金服正式对外开源了数据库驱动的高交互可视化图形语法 G2。今天，G2 发布了 3.2 版本。这个版本针对最常用的图表使用场景，新增了多种辅助元素 guide，升级和扩展了图例 legend，给大家带来更丰富完备的视觉认知体系，同时优化了坐标轴 Axis、提示信息 Tooltip 的视觉细节，还带来了呼声很高的 chart 级别主题支持，持续对图表的体验进行优化升级。

今天我们就来看看新版本具体升级了哪些地方！

更加丰富完备的视觉认知体系

「让人们在数据世界里获得视觉能力」是 AntV 始终坚持的梦想，G2 开发进入 3.x 以来，我们一直致力于通过探索数据、图形、解释信息三者之间的结合方式，丰富和优化数据可视化认知体系。

1.充分利用接近性原则的尾部跟随图例

格式塔原理的接近性原则告诉我们，在视觉体系中，元素之间的相对距离会影响对我们对群组关系的认知：通常相互靠近的元素更有可能是一组的，距离较远则相反。

根据这个原则，我们针对折线图和面积图的使用场景设计了 tail-legend： 通过 legend 配置项，图例自动跟随在折线的尾部，使折线和对应图例通过临近的空间的关系自然组织在一起，增强了图形和解释信息之间的视觉联系。

tail-legend 应用于折线图中的场景。

2.打破图形色彩固有边界

在可视化体系中，图形是天然的色彩单位，除此之外，我们也在探索其他以数据为驱动的色彩方案。G2 3.2 提供了基于数据空间的色彩组合方式 — guide().regionFilter，它允许以数据空间区域为标准进行色彩渲染，这意味着通过 regionFilter，一个图形可以渲染为不同的分段颜色，同一数据空间内的不同的图形也可以渲染为同一种颜色，丰富了 G2 的图表色彩语义和认知空间。

使用 regionFilter 复现数据可视化先驱者 William Playfair 经典案例。

regionFilter 应用于面积图。

3.数据标注的点线面

G2 3.2 新增了支持特殊数据标注的 guide 类型，帮助用户注意及理解图表中具有某种特殊含义的数据，如“峰值”、“谷值”、“异常数据”等。根据需要进行标注的数据特点，我们将之理解为三种类型：独立数据（点）、序列数据（线）、集群数据（面)，这三种类型同时也暗合可视化图形映射的基本规则。目前独立数据点和序列数据点的标注已经可用，集群数据标注也将在 G2 3.3 与大家见面。

guide.dataMarker(点) | guide.dataRegion(线) 在折线图中的使用。

更灵活的组件配置

在增进视觉认知的新特性之外，一些组件的使用边界也悄悄进行了拓展，组件使用变得更加灵活，比如：

• 图例的定位从“上下左右”四角定位拓展到了 12 个

• 坐标轴样式支持区分连续和分类数据，使用混合图表时，共用一个轴和栅格不会造成误解

之所以说这些拓展是"悄悄"发生的，是因为我们做好了向上兼容，保证了 G2 性能和表现的稳定性，而只需要根据文档开启相应配置项，就可以体验新的组件特性了。

支持 chart 级别主题，久等了

主题对 G2 而言，就是许多配置项的集合。以往修改主题必须要全局修改，牵一发动全身。3.2 在保留全局主题切换的同时，新增了自定义主题的接口，并且支持 chart 级别的主题切换。同一个应用中也能同时存在不同主题的图表了。

试用 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