G2Plot v2 版本,从今年 8 月开始开发,目前差不多已经快 4 个月了,达成:
- 25+ 常用的统计图表
- 80% 图表在复杂 BI,LowCode 产品中使用验证
- 97% 代码单测覆盖率
- 5+ 积极的社区同学参数
后续我们会继续在几个方面深入:
- 按照业务需求去提升,图表丰富度(桑基图、矩阵树图等),并在复杂业务系统去实践和应用
- 文档、场景 DEMO,降低使用者的门槛和成本
那么,本文会介绍 G2Plot 2.0 版本开发,从业务到技术架构的一个思考,可能比较混乱,轻喷!
首先自我介绍一下,我是蚂蚁大数据部门的前端,主要负责 DeepInsight 这个 BI 产品的数据分析能力,同时会做 AntV 统计图表 G2,G2Plot 的开发和迭代。
从 BI 的角度出发,我们可以理解一下这一张图。
数据可视化对于我们 BI 产品来说,非常重要,并且随着时间的推移,数据量的堆积,可视化能力对于任何一个互联网产品,都是非常重要的。
问题
为了描述 G2Plot 新架构的内容,必须先说一下旧架构存在或者带来的问题。
- 业务问题
去年我们在 G2Plot v1 基础上,做了不少图表体验优化的事情,但是因为代码架构、质量问题,导致我们在业务中只能锁死版本,很难持续迭代。虽然基于 G2Plot,我们解决了很多问题,但是也带来了其他更多的业务迭代问题。
- 架构问题
G2Plot 架构设计上,没有完全依赖 G2,创建一个图表没有一个明显的模式。这个带来的问题是:
- 和 G2 并行发展,不利于积累 G2 的能力
- 代码杂乱,新手参入门槛高,难以贡献代码。1 + 1 远小于 2
- 稳定性、质量难以保障,维护性问题(这一点也和单测不完备有关)
- 开放能力问题
业务上使用 G2 做业务定制图表,或者直接用 G2Plot,都存在一个问题是:如何去做定制、定制的体验优化?目前部分的优化都是 hack 的方式。急需打破隔离
- G2 是否有足够开放的能力,给 G2Plot 或者业务做体验优化?
- G2Plot 是否有足够的配置和配置扩展能力,去做业务自定义?
上手简单 和 灵活扩展能力 两者是一个平衡和取舍,对于业务开发的同学来说,这个就显得非常重要了。
架构设计
新架构的几个宗旨:
- G2Plot 层轻量化
G2Plot 是基于 G2 能力,进行组装成一个一个单独的常用业务统计图表。主要原因有二:
- 常用的统计图表使用量超过 80%
- 便于 G2 层能力的沉淀和提升,包括布局、图形、交互、动画等能力
- 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 成为一个业务可用的可视化图表库。主要包含:
- 尽可能的通过技术手段,去降低 G2 图形语法的使用成本,同时科普可视化技术知识
- 尽可能的提高底层模块的质量、稳定性,不然底层技术模块阻碍业务迭代,甚至给业务代码不稳定因素
欢迎对于可视化技术感兴趣的同学,加入到 G2Plot 后续的持续迭代中,你可以:
- 文档、DEMO、翻译等相对门槛低的事情入门
- G2Plot 的内置图表研发和迭代
- 基于 G2Plot 的开放开放机制,扩展周边非通用图表
感谢!对了,还有项目开源地址:https://github.com/antvis/G2Plot ✨✨✨。更多关于 G2Plot 的文章看这里。