AntV/G2Plot 开源 - 精雕细琢,打造极致可视化图表体验

AntV/G2Plot 开源 - 精雕细琢,打造极致可视化图表体验

TL;DR:极致体验图表库 G2Plot 开源地址: github.com/antvis/G2Plo

我们目前所在的产品是 DeepInsight,主要负责 DeepInsight 跟可视化相关的问题,为了解决 DeepInsight 在可视化体验上的一些问题,我们深度参入了 G2 整个技术栈的开发。

背景

DeepInsight 是一个数据分析和洞察工具,通过简单的页面操作,就快速可以生成一份业务报表。我们可以先看一个简单的视频介绍,了解一下 DeepInsight 到底是什么?

其实,我们可以更加简单的理解为,DeepInsight 主要包含有两大部分:

  • 数据源:可以连接各种各样的本地、远程数据源,获得数据
  • 可视化能力:拥有不同种类的数据可视化图表

上述两者结合起来,将数据灌入到可视化图表中,然后通过页面上的布局,就可以形成一份有业务含义的数据报表。

目前,DeepInsight 上包含有 50+ 的可视化图表组件,每天图表在集团内部曝光量搞到 50 万+,是目前集团内最大的 BI 产品,也在内部获得了一些奖项,比如“2019 年阿里人最喜爱的办公神器”。DeepInsight 通过数据可视化带来的数据洞察,影响了不计其数的公司决策。

然而,在迭代过程中,我们收到了很多的跟数据可视化相关的体验问题。我们简单看几个例子:

像这样的数据可视化体验问题,在产品迭代过程中,我们收集到 100+ 个。



这些问题除了带来数据可视化体验上的问题之外,一部分也可能会导致用户在数据阅读中,产生错误的数据洞察,从而产生错误的数据决策。所以修复这些体验问题,变得不仅紧急,而且非常重要。


AntV + DeepInsight

DeepInsight 在可视化技术上,使用了开源社区上比较活跃的三方图表库,要在这个基础上,修复上述 100+ 问题,会存在很多问题:

  1. 发现任何问题,都无法得到快速的响应
  2. 部分体验问题的修复,需要底层架构,不进行架构改造,无法彻底完美解决
  3. 而如果在上层进行 hack 修复,不仅花费大量时间,而且收获的也仅仅是一个不稳定的解决方案

而于此同时,蚂蚁内部自研的 G2。

  1. 基于图形语法,具有厚实的理论基础,这套理论也是目前所有顶尖 BI 产品的可视化基础。
  2. 具有很强的扩展性,可以幻化万千可视化表达
  3. 而且经过 5 年的迭代,服务公司内网 20000 个业务系统,已经趋于成熟



基于上述的原因,我们最终决定放弃使用三方图表库,而直接使用 G2 去解决上述的图表体验问题。

为了做成这个事情,我们主要做了两件大的事情。

  • 架构升级 —— G2 4.0
  • 打磨图表体验


G2 4.0 新架构



G2 4.0 的架构可以描述成以上架构图。我们可以理解成它主要包含的两大部分:

  • 静态渲染
  • 动态交互

图形静态渲染就是将可视化组件(Axis、Legend...)和图形(Line、Interval...) 这些元素组织到一起,然后通过一个布局逻辑,将他们有序的绘制到画布上。

图形动态交互是指图形的交互能力,这个对于数据分析来说非常重要。G2 中通过提供丰富的事件、元素的状态量,来构建一层基础的交互机制,然后基于这个交互机制,去实现一套配置式的自定义交互语法,降低交互开发成本。

那么我会着重介绍两点和图标体验打磨相关的技术点,以及它在新旧版本中的对比:

  1. 画布的约束布局
  2. 交互语法


Auto Padding vs 约束布局

  • G2 3.x 中的 Auto Padding



大搞的流程是:

  1. 在一个 400*300 的画布中,首先将图形部分绘制到画布中,占满整个画布;
  2. 然后根据 x y 数据字段,来绘制 x y 轴,并放到画布下方和左方;
  3. 根据分组字段绘制图形,并放置到下方;
  4. 然后将超出画布的部分,座位图形的 padding
  5. 向内收缩图形,形成最终的图表

这是一个通用的方案,所有类型的图表绘制,都是用这样的一个方案,带来的问题有:

  1. 因为坐标做标签超长,导致左侧的 padding 太多,所以画布左边空白比较多
  2. 因为左侧图例的大小不对,导致左侧 padding 过小,所以图例和坐标轴挤到一起
  3. x 轴在画布收缩过程中,因为宽度变小,导致轴标签进行了自动旋转,导致被画布裁剪

等等,这些有和画布布局相关的问题,80% 都是和 auto padding 相关,并且因为是一个通用布局方案,所以这些问题很难进行修复。

为了解决可视化图表在静态渲染中遇到的裁剪、碰撞问题,我们将约束布局引入到可视化中。
  • G2 4.0 中的约束布局

约束布局的理论依据是线性等式、不等式的非负解求解算法。我们看个例子。

这个求解算法是非常成熟的算法,在不同语言上都有对应的算法实现。而且在 Android、iOS 中,都提供对应在 UI 布局上的约束布局能力。结合这个算法,我们将约束布局的能力引入到可视化图表渲染中来。

举个例子:

首先,我们规定,所有的图表元素都有四个变量 x y width height,他们决定了元素在画布中的决定定位。

基于图形中元素的相对位置关系,我们可以列出这样的约束关系方程组。然后代入算法求解:

就可以获得所有元素的位置大小信息,拿到这些信息,再进行画布的渲染,就没有任何难度了。使用约束给我们带来了哪些好处呢?

  1. 将画布布局的问题转化成数学求解问题
  2. 解除了因为组件之间的位置依赖关系带来的布局代码耦合
  3. 强大的布局能力,是响应式图表的基础
约束布局可以解决了静态渲染中常见的组件裁剪、遮挡问题。另外一个大的部分就是动态交互的优化和增强。

Event + API vs 交互语法

  • G2 3.x Event + API

在我们进行 web 页面上的交互开发的时候,我们常常的逻辑是这样的(以 jQuery 为例):

基本逻辑就是通过找到对应的元素,监听事件,然后在事件触发的时候,执行相应的动作和命令。(比如上图是清理缓存的交互)

而在 G2 3.x 中,采用了类似的形式去开发交互,比如下面在图例 hover 的时候,高亮图形。

基于 Event + API 的方式,可以很灵活的开发自定义交互,完全没有任何限制,这是他的优点,但是缺点也很明显:

  1. 需要精通底层的架构和 API,开发成本高
  2. 开发交互的流程代码很繁杂丑陋
  3. 代码逻辑几乎无法复用
为了解决这些问题,降低自定义交互开发的成本,我们在 G2 4.0 中提出了交互语法。
  • G2 4.0 交互语法

首先,我们将一个交互过程定义为 5 个阶段:

  1. 示能
  2. 开始
  3. 持续
  4. 结束
  5. 回滚

每个阶段又包含有:

  • 触发:触发这个交互阶段的事件和来源;G2 4.0 内置 200+ 组合事件
  • 反馈:触发之后,对应执行的 Action;G2 4.0 内置 30+ 多个 Action

通过这些之后,我们开发一个交互就是配置的过程,我们看一个例子:


这是一个圈选图形,生成 mark 展示全选区域,然后选中的图形进行高亮。对应各个阶段的触发和反馈配置就是:

而最终用到代码中的交互配置就是:

通过这样的方式,我们可以大大降低自定义交互的自定义成本,开发者只需要利用 G2 提供的丰富的内置事件和 Action,通过拼接组合就是完成交互的开发。

最后总结一下 G2 这部分的内容。G2 包含有三大部分:

  1. 图形语法,可以提供图表变换的丰富度
  2. 约束布局,提供强大图表静态渲染和布局能力
  3. 交互福安,可以让我们低成本的开发复杂交互

基于这些我们就去做我们新的一个产品 G2Plot,去逐一打磨可视化图表的体验细节。

打磨图表体验

对于图表体验的打磨,我们其实很多很多事情,这里我们就以折柱饼的数据标签为例,来进行介绍。

另外,我们对于可视化图表的体验打磨,都是基于 AntV 可视化设计原则,他是 Ant Design 在可视化方向的扩展。概括起来就是四个词:准确,有效,清晰,美。

下面我们就逐一介绍折柱饼得数据标签(多图预警)。

折线图




最后我们做一个简单的竞品对比:

柱形图






最后同样,我们看一下竞品的对比情况:

饼图

饼图的数据标签问题,其实是比较常见的问题。对于饼图,我们先介绍其中一种数据标签的迭代逻辑。


这个是标签布局逻辑,算是在数量大的情况下,比较符合效果的。当然除了这个布局之外,我们还提供多种布局效果:



当然,对于饼图,我们也有对应的最佳实践规范:

  1. 饼图区块数量不超过 8 个
  2. 超出的区域合并到“其他”区块中,然后 tooltip 显示其他区块的详细信息

最后我们看下在饼图数据标签中,和竞品的对比情况。





总体效果来看,G2Plot 是都是最优的效果。


其他

除了上述对于折柱饼的数据标签优化之外,我们还做了其他很多的可视化图表体验优化。

缩略轴标签自动切换位置,防止被裁剪。
跟随图例,一个很经典的storytelling 案例
联通区间,让数据对比更加清晰。

等等,还有很多的优化点,篇幅原因,不一一赘述。

DeepInsight 体验问题

最后利用这些体验优化的成果,我们应用到我们业务产品 DeepInsignt 中。现阶段:


总结

最后,对我们做的事情做一个简单的总结。



  1. G2 是一个基于图形语法理论的统计图表引擎,支持丰富的图表渲染能力,目前官网上支持 250 多种可视化图表组件,在这个强大的图表渲染能力上,我们增加了交互语法,让图形的动态交互扩展变得更加容易。
  2. 基于强大的 G2,我们创建了我们新的开源产品 —— G2Plot。G2Plot 是一个配置式的、易于接入的统计图表库,通过一个简单、灵活的配置项,就可以生成一个可视化图形。此外,它最重要的关注点就在于,他专注于可视化图表的极致体验,花费大量的精力去解决其他产品不愿意解决的体验问题。
  3. 然后基于 G2Plot 图表库,我们会继续打造出 AVA 智能可视化。直接接入数据,即可智能推荐出合适的可视化图形。然后通过页面上的操作,就可以对生成的图形进行配置,基本实现零成本接入可视化,进一步降低使用成本,提升用户体验。

当然最重要的是,我们所有的工作,都开源在 GtiHub,所有社区上的同学,都可以免费的使用我们图标体验优化的成果。



最后欢迎一起进行技术交流。


qr.dingtalk.com/action/ (二维码自动识别)

欢迎关注:

https://github.com/antvis/G2Plotgithub.com

我的演讲视频和 PPT 都已经上传到:SEE Conf 的语雀专栏,欢迎下载,同时也欢迎到 知乎问答 跟我互动。

SEE Conf 是蚂蚁金服体验科技大会,是一个“看见者的大会”,希望技术能看见设计的价值,希望设计能看见技术的力量,彼此看见中互相融合成长,一起让世界更美好。
编辑于 01-13

文章被以下专栏收录