简介

G2 一直没有针对超大规模数据进行支持，以在监控场景为例，一天秒级的数据 72000 条，一个页面显示 20+ 图表，这种场景下保证平滑的更新、交互并不容易。同时在一些数据场景下散点图的数据量更加大，现在这类业务越来越多，是时候针对大数据量场景的支持进行设计和改造。

多大的数据时大数据量

对大数据量进行定义，并没有标准的答案，在不同的环境差异更加大。就统计图表的可视化场景，我们可以拍脑袋， 1W 条一下是普通的数据量，1-10W 是大数据量，10W + 是超大规模的数据量，这是否合理？

  • 散点图下显示 1W 个点无论从技术实现还是用户观测的角度都可以接受。
  • 柱状图显示 1W 个柱子，这不太可能！
  • 折线图显示 10W 条数据和 1000 条数据有啥差别？
  • 100100 分辨率的 和 1000 1000 上的关于数据量的定义能一样？

数据量的三个层次定义

因此定义大数据量需要多个方面来考虑，我们将图表上的数据量分为三个层级：

  • 正常的数据量，不需要任何优化，任何特殊处理就能够渲染、动画、交互流畅
  • 大数据量，这个级别，需要进行一些优化，但是要能够达到渲染、动画和交互的流畅
  • 超大规模数据，需要通过一些其他的组件，对数据进行过滤，或者舍弃掉一些交互

定义数据量的两个维度

我们需要从两个维度来考虑数据量：

  • 画布的尺寸： 几个级别 100 100， 500 500， 1000 * 1000，more
    • 100*100 包含了 小于这分辨率的所有场景
    • 500*500 我们定义为正常的图表类型，包括边长为 100-500 的所有情形
    • 1000*1000 我们预计的在页面上的统计图表的最大分辨率，
    • more 分辨率比 1000*1000 更大的场景，一般不会出现，不再列出
  • 图表的类型：不同图表类型能够在画布上展示的细节不同，绘制的成本也不同，对应的解决方案更不一样

定义 G2 各类图表支持的数据量

支持的数据量主要分成 3个级别：

  • 1 正常展示
  • 2 最大适合展示的数据量
  • 3 超出最大数据量，不在下面表格上显示

优化要求

  • 数量 < 1 ，不需要优化，正常显示即可
  • 1< 数量 <2，需要部分优化
  • 2 < 数量，必须进行优化

数量级的原则：综合图表类型的图形的基本大小、间距来考虑

    1. 图形大小适应，间距最优化
    1. 最小的图形，几乎无间距 | | 100100 级 | 500500 级 | 10001000级 | 公式 | | —- | —- | —- | —- | —- | | point |
      1. 1000
      1. 10000
      |
      1. 5000
      1. 50000
      |
      1. 10,000
      1. 100000
      |
      1. 最大维度像素数       10
      1. 最大像素数 100
      | | bubble |
      1. 10
      1. 100
      |
      1. 50
      1. 500
      |
      1. 100
      1. 1000
      |
      1. 单维度素数 / 10
      1. 像素数
      | | line/area |
      1. 100
      1. 1000
      |
      1. 500
      1. 5000
      |
      1. 1000
      1. 10000
      |
      1. 单维度的像素数
      1. 单维度的像素数       10
      | | column/bar |
      1. 10
      1. 50
      |
      1. 50
      1. 250
      |
      1. 100
      1. 500
      |
      1. 像素/10
      1. 像素数 / 2
      | | pie |
      1. 10
      1. 20
      |
      1. 10
      1. 20
      |
      1. 10
      1. 20
      |
      1. 10
      1. 20
      | | schema |
      1. 10
      1. 25
      |
      1. 50
      1. 125
      |
      1. 100
      1. 250
      |
      1. 像素数 / 10
      1. 像素数 / 4
      | | heatmap |
      1. 10 10
      1. 100       100
      |
      1. 50 50
      1. 500       500
      |
      1. 100 100
      1. 1000       1000
      |
      1. (像素数 / 10)(像素数 / 10)
      1. 像素数       像素数
      | | 色块 heatmap |
      1. 10 10
      1. 25       25
      |
      1. 5050
      1. 125       125
      |
      1. 100 100
      1. 250       250
      |
      1. (像素数 / 10)(像素数 / 10)
      1. (像素数 / 4)      (像素数 / 4)
      |

大数据展示和交互的方案

转换图表类型

一些场景下最优的方案是改变图表类型，例如：

  • 10000 条数据的情况下绘制柱状图，改成绘制折线图更合适
  • 100 条数据的饼图，改成柱状图更合适
  • 100000 条数据的散点图，改成热力图更合适

当这个方案无法应用时，再考虑下面的方案

抽样

对数据进行抽样，使得绘制图形和参与交互的数据量最小，但是这里面有一些原则：

  • 不能改变图表的整体外观（分布、趋势、极值点等）
  • 不同的图表要有不同的抽样机制
  • 有些图表不能使用抽样机制

一些举例：

  • 数据量非常大的散点图，进行随机抽样是比较好的选择
  • 折线图和柱状图不能使用随机抽样，要保证相邻的极值点保留，否则会丢失一些趋势
  • k 线图，箱型图之类的每条数据都对图表有影响的图不能使用抽样

  • 已经进行过聚合（统计）的数据不要再抽样，可以通过改变聚合的粒度来进行优化

    聚合

    当数据量非常大的时候，聚合也是一种常见的思路，聚合往往配合改变图表类型一起来做，例如：

  • 散点图，通过划分区域进行聚合，显示成分块热力图

  • k 线图，多个日期的图形进行合并时，重新计算 start,end,min,max
  • 直方图，多个直方图合并

过滤

通过限制数据的范围对数据进行过滤，然后切换数据范围来实现展示超大数据量的一种方案，经常需要组件和特殊交互的配合：

  • 缩略轴（时间轴）、缩略图
  • 框选、滚动条过滤等

图形省略（图形抽样）

  • 图形被遮挡住了，即使绘制也始终不可见
  • 文本太多时，过于杂乱，仅显示重要的文本（权重、离群点、峰值等）

图形叠加（图形聚合）

  • 散点图中，多个点层叠时，仅绘制一个点，通过调整透明度和颜色深浅来表示数据分布

更多

使得 G2 的图表能够满足大数据量的展示、交互需求，没有一个方案能够覆盖到所有场景，需要根据图表类型、数据规模适当的选择多个方案配合使用。接下来我们会根据业务上的优先级来逐个对 G2 的图表进行优化，各种方案都会形成底层的机制。
图表超大规模数据的展示，不仅仅是一个性能问题，而是集成多个方案的系统工程。