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

小蚂蚁说：

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

今天我们就来看看新版本具体升级了哪些地方，文末有AntV链接全家桶，欢迎大家查阅、试用和共建！

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

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

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

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

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

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

在线链接（https://antv.alipay.com/zh-cn/g2/3.x/demo/other/tail-legend.html）

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

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

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

在线链接（https://antv.alipay.com/zh-cn/g2/3.x/demo/other/regionFilter-guide2.html）

regionFilter 应用于面积图。

在线链接（https://antv.alipay.com/zh-cn/g2/3.x/demo/other/regionFilter-guide1.html）

3.数据标注的点线面

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

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

在线链接（https://antv.alipay.com/zh-cn/g2/3.x/demo/other/dataMarker_dataRegion.html）

更灵活的组件配置

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

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

• 文档链接（https://antv.alipay.com/zh-cn/g2/3.x/demo/other/legend-position.html）

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

之所以说这些拓展是"悄悄"发生的，是因为我们做好了向上兼容，保证了 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

招聘福利

G2 是蚂蚁金服体验技术部 AntV 团队的重要产品之一。感兴趣的小伙伴们欢迎通过以下各种途径关注和联系我们，欢迎投递简历！

• 官网https://antv.alipay.com

• 邮件 antv@antfin.com

• github：https://github.com/antvis

• 知乎 https://zhuanlan.zhihu.com/aiux-antv

• 微博 https://weibo.com/antv2017

github共建

AntV 是蚂蚁金服全新一代数据可视化解决方案，她的主要子产品如下，欢迎关注、欢迎一起共建！

• G2 是统计数据的高交互可视化图形语法：

  https://github.com/antvis/g2

• F2 是专为移动端定制的一套开箱即用的可视化解决方案：

  https://github.com/antvis/f2

• G6 主攻关系型数据的可视化分析和编辑展现：

  https://github.com/antvis/g6

  
  

— END —

蚂蚁金服科技，只为分享干货

您的转发是对我们最大的支持

欢迎在文章下方留言与我们进行交流哦~