AntV/G2Plot v2.0 技术架构思考

G2Plot v2 版本，从今年 8 月开始开发，目前差很少已经快 4 个月了，达成：

• 25+ 经常使用的统计图表
• 80% 图表在复杂 BI，LowCode 产品中使用验证
• 97% 代码单测覆盖率
• 5+ 积极的社区同窗参数

后续咱们会继续在几个方面深刻：

1. 按照业务需求去提高，图表丰富度（桑基图、矩阵树图等），并在复杂业务系统去实践和应用
2. 文档、场景 DEMO，下降使用者的门槛和成本

那么，本文会介绍 G2Plot 2.0 版本开发，从业务到技术架构的一个思考，可能比较混乱，轻喷！

---

首先自我介绍一下，我是蚂蚁大数据部门的前端，主要负责 DeepInsight 这个 BI 产品的数据分析能力，同时会作 AntV 统计图表 G2，G2Plot 的开发和迭代。

从 BI 的角度出发，咱们能够理解一下这一张图。

数据可视化对于咱们 BI 产品来讲，很是重要，而且随着时间的推移，数据量的堆积，可视化能力对于任何一个互联网产品，都是很是重要的。

问题

为了描述 G2Plot 新架构的内容，必须先说一下旧架构存在或者带来的问题。

• 业务问题

去年咱们在 G2Plot v1 基础上，作了很多图表体验优化的事情，可是由于代码架构、质量问题，致使咱们在业务中只能锁死版本，很难持续迭代。虽然基于 G2Plot，咱们解决了不少问题，可是也带来了其余更多的业务迭代问题。

• 架构问题

G2Plot 架构设计上，没有彻底依赖 G2，建立一个图表没有一个明显的模式。这个带来的问题是：

1. 和 G2 并行发展，不利于积累 G2 的能力
2. 代码杂乱，新手参入门槛高，难以贡献代码。1 + 1 远小于 2
3. 稳定性、质量难以保障，维护性问题（这一点也和单测不完备有关）

• 开放能力问题

业务上使用 G2 作业务定制图表，或者直接用 G2Plot，都存在一个问题是：如何去作定制、定制的体验优化？目前部分的优化都是 hack 的方式。急需打破隔离

1. G2 是否有足够开放的能力，给 G2Plot 或者业务作体验优化？
2. G2Plot 是否有足够的配置和配置扩展能力，去作业务自定义？

上手简单 和 灵活扩展能力 二者是一个平衡和取舍，对于业务开发的同窗来讲，这个就显得很是重要了。

架构设计

新架构的几个宗旨：

• G2Plot 层轻量化

G2Plot 是基于 G2 能力，进行组装成一个一个单独的经常使用业务统计图表。主要缘由有二：

1. 经常使用的统计图表使用量超过 80%
2. 便于 G2 层能力的沉淀和提高，包括布局、图形、交互、动画等能力
3. G2 基于图形语法，没有图表的概念，没法针对性的图表优化，G2Plot 基于图表分类学，能够进行针对性的处理。

• 配置式 API 使用方式

继续延续 v1 的配置式的使用方式，一方面是确实能够下降用户的入门和使用成本，另外一方面是保证大版本之间的相对兼容性。

总体梳理的架构图以下所示：

架构解读

本质上，G2Plot 这一层是很是简单和轻量的，它作的事情主要包含有三个点：

Schema & Adaptor

定义不一样图形的 schema 配置，而后开发 Adaptor 代码片断，将 schema 配置转化成 G2 的 API。例如对于折线图：

{ xField: 'year', yField: 'sale', data: [ / .../ ], }

转成 G2 的代码即为：

chart.data(data); chart.line().position(${xField}*${yField});

而这其中，legend、tooltip、axis 都直接延续 G2，不会增长任何其余的概念。

图表分类和定制

针对不一样图表的一些体验优化逻辑，例如对于 label 重叠，咱们能够针对不一样的图形去加载不一样的布局函数片断。好比：

• point-adjust-position
• limit-in-canvas
• ...

开放扩展机制

暴露 G2 灵活的自定义能力，提供开发扩展机制。G2Plot 内置的是经常使用的统计图表，而对于不经常使用的定制图表，能够方便的经过扩展机制去基于 G2 自定义。

咱们将 G2Plot 基于 G2 开发图表的 Adaptor 模式直接开放出来，业务同窗能够基于这一个模式去使用 G2 封装定制图表，若是须要给其余业务复用，直接发包，在 G2Plot 的模式上去使用。举个例子：

以上是一个真实的基于 G2 按照 G2Plot 的模式开发一个 QRCode 图形能力，总体代码 100 行左右。基于这样的模式，参考文档开发自定义扩展图表去进行自定义的业务封装和复用。

最后

目前咱们最重要的事情是，让 G2Plot 成为一个业务可用的可视化图表库。主要包含：

1. 尽量的经过技术手段，去下降 G2 图形语法的使用成本，同时科普可视化技术知识
2. 尽量的提升底层模块的质量、稳定性，否则底层技术模块阻碍业务迭代，甚至给业务代码不稳定因素

欢迎对于可视化技术感兴趣的同窗，加入到 G2Plot 后续的持续迭代中，你能够：

• 文档、DEMO、翻译等相对门槛低的事情入门
• G2Plot 的内置图表研发和迭代
• 基于 G2Plot 的开放开放机制，扩展周边非通用图表

感谢！对了，还有项目开源地址：https://github.com/antvis/G2Plot ✨✨✨。更多关于 G2Plot 的文章看这里。