共计 2005 个字符,预计需要花费 6 分钟才能阅读完成。
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 的文章看这里。