Skip to content

Latest commit

 

History

History
315 lines (173 loc) · 23.2 KB

044.精雕细琢，打造极致可视化图表体验.md

File metadata and controls

315 lines (173 loc) · 23.2 KB
Raw

精雕细琢，打造极致可视化图表体验

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

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

背景

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

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

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

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

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

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

image.png image.png image.png image.png image.png

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

image.png

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

AntV + DeepInsight

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

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

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

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

image.png

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

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

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

G2 4.0 新架构

image.png

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

  • 静态渲染
  • 动态交互

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

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

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

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

Auto Padding vs 约束布局

  • G2 3.x 中的 Auto Padding

image.png

大搞的流程是：

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

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

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

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

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

  • G2 4.0 中的约束布局

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

image.png

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

举个例子：

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

image.png

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

image.png

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

  1. 将画布布局的问题转化成数学求解问题
  2. 解除了因为组件之间的位置依赖关系带来的布局代码耦合
  3. 强大的布局能力，是响应式图表的基础

约束布局可以解决了静态渲染中常见的组件裁剪、遮挡问题。另外一个大的部分就是动态交互的优化和增强。

Event + API vs 交互语法

  • G2 3.x Event + API

在我们进行 web 页面上的交互开发的时候，我们常常的逻辑是这样的（以 jQuery 为例）：

image.png

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

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

image.png

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

  1. 需要精通底层的架构和 API，开发成本高
  2. 开发交互的流程代码很繁杂丑陋
  3. 代码逻辑几乎无法复用

为了解决这些问题，降低自定义交互开发的成本，我们在 G2 4.0 中提出了交互语法。

  • G2 4.0 交互语法

**
image.png

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

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

每个阶段又包含有：

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

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

Dec-21-2019 17-22-41.gif

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

image.png

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

image.png

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

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

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

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

打磨图表体验

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

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

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

折线图

image.png

image.png

image.png

image.png

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

image.png

柱形图

image.png
image.png

image.png

image.png

image.png

image.png

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

image.png

饼图

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

image.png

image.png

image.png

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

image.png

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

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

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

image.png

image.png

image.png

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

其他

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

Dec-19-2019 17-47-25.gif 1578106109655-eed7980f-4893-4d49-8778-b9d6e287059f.gif 1575824038407-46f54b90-e637-47b5-8b63-546d46088e63.gif
缩略轴标签自动切换位置，防止被裁剪。 跟随图例，一个很经典的 storytelling 案例 联通区间，让数据对比更加清晰。

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

image.png

DeepInsight 体验问题

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

image.png

总结

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

image.png

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

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

image.png

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

image.png

G2Plot: https://github.com/antvis/G2Plot