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

32次阅读

共计 2005 个字符,预计需要花费 6 分钟才能阅读完成。

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

正文完
 0