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

原创
2020/11/30 13:33
阅读数 3.7K

G2Plot v2 版本,从今年 8 月开始开发,目前差不多已经快 4 个月了,达成:

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

后续我们会继续在几个方面深入:

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

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


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

从 BI 的角度出发,我们可以理解一下这一张图。

image.png

数据可视化对于我们 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 的配置式的使用方式,一方面是确实可以降低用户的入门和使用成本,另一方面是保证大版本之间的相对兼容性。

整体梳理的架构图如下所示:

image.png

架构解读

本质上,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 的模式上去使用。举个例子:

image.png

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

最后

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

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

欢迎对于可视化技术感兴趣的同学,加入到 G2Plot 后续的持续迭代中,你可以:

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

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

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部