乐趣区

关于可视化:AntVG2Plot-v20-技术架构思考

jiezi

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 的文章看这里。

退出移动版