使用 AntV/G2/G2Plot 如何优化图表体验

G2Plot v2 版本，从今年 8 月开始开发，目前差不多已经快 4 个月了，达成：

• 25+ 常用的统计图表
• 80% 图表在复杂 BI，LowCode 产品中使用验证
• 97% 代码单测覆盖率
• 5+ 积极的社区同学参数

在 v2 版本中，我们把通用的体验优从业务实现抽取出来，通用化配置化，把大部分体验优化方案内置到 G2 中，让 G2 和 G2Plot 的用户都可以直接配置开启各个图表的体验优化，用户可以方便地通过配置和选项来开启默认内置的体验优化和优化方案。

本文会针对在业务中经常遇到的一些图表体验问题，以及如何在 G2/G2Plot 中去解决这些问题。

---

TL,DR 先说结论，如果你不同懂可视化也不想深入研究，直接最简单高效地满足业务的最基本图表需求，那请直接使用 G2Plot，提供最简化的基本配置即可，G2Plot 会默认自动使用最优的方案来自动优化图表中的大部分体验问题；如果你想更加定制地针对性解决你遇到的体验问题，可以参照我们的文档，阅读配置项，来定制地 在 G2Plot 和 G2 中来解决你的体验问题。

图表组成组件解释

在介绍图表中经常遇到的体验问题之前，这里我们首先再次了解下图表的基本组件部分。一个典型的常规统计图表通常由下图所示各个部分组成：

• Geometry 几何标记：即图表的图表类型，在 G2 中，Geometry 即决定了生成的图表类型；同时不同类型的几何标记都由不同的图形属性 Attribute，其中 Shape 属性决定图形形状。
• Label 文本标签：文本标签是对当前的一组数据进行的内容标注，文本标签需要在附属的几何标记上开启。
• Axis 坐标轴：每个图表通常包含两个坐标轴，在直角坐标系中，分别是 x 轴和 y 轴，在极坐标系中，则分别由角度和半径两个维度组成。坐标轴本身由坐标标题 title、坐标轴标签 axis label、坐标轴刻度 tick、和坐标轴网格线 grid 组成。
• Legend 图例：图表的辅助元素之一，用于标定不同的的数据分类和数据范围，辅助阅读图表，和帮助用户在图表中进行数据的筛选过滤。
• Tooltip 提示信息：但鼠标悬浮在某一组数据上时，会以提示框的形式显示当前对应的数据的信息。
• Annotation 辅助标记：当需要在图表上绘制一些辅助线和标记的时候，可以使用辅助标记。
• Slider 缩略轴：当图表中的数据量比较多，可以使用缩略轴组件，让用户可以关注某个区域的数据。
• Scrollbar 滚动条：当图表中数据量比较多的时候，也可以使用滚动条组件来一次浏览一部分数据，滚动条组件较适用于柱形图和条形图。

常见体验问题和解法

文本标签体验问题

文本便签遮挡是业务中经常遇到的问题点之一，在 G2Plot v2 和 G2 中，我们提供了 label layout 配置来优化文本标签。

配置方式

在 G2Plot 中配置方式如下：

{
  // 开启文本标签
    label: {
    // 配置需要的 label layout，layout 由 type 和 可选的 cfg 组成
    layout: [
      // hide-overlap：隐藏互相遮挡的文本标签
      { type: 'hide-overlap'},
      // limit-in-plot: 限制文本标签不超出图形范围，cfg 自动对超过范围的文本标签做隐藏操作
      { type: 'limit-in-plot', cfg: { action: 'hide' } }
    ]
  },
}

在 G2 中通过下面方式开启：

chart
  .line()
  .position('Year*Deaths')
    // 开启文本标签
  .label('Deaths', {
      // 配置需要的 label layout，layout 由 type 和 可选的 cfg 组成
      layout: [
      // hide-overlap：隐藏互相遮挡的文本标签
      { type: 'hide-overlap' },
      // limit-in-plot: 限制文本标签不超出图形范围，cfg 自动对超过范围的文本标签做隐藏操作
      { type: 'limit-in-plot', cfg: { action: 'hide' }}
    ]
    });

配置前后效果对比：

配置前	配置后

各类图形适用的 layout

知道了使用 layout 来优化文本标签后，这里我们先把 G2/G2Plot 目前内置的 layout 先列举和说明下。

layout	适用范围	说明
overlap	通用	防止文本标签重叠，会尝试将文本标签向四周偏移来防止遮挡
fixed-overlap	通用	同 overlap，但不会移动文本便签的位置
hide-overlap	通用	同 fixed-overlap，在检查文本标签遮挡会考虑文本便签的背景图形
limit-in-canvas	通用	限制文本标签在 canvas 范围内，会简单地将超出 canvas 范围的文本标签移动到 canvas 范围内
limit-in-plot	通用	限制文本标签在图形范围内，可以防止文本标签于图表组件如坐标轴发生重叠遮挡；对超处图形范围的文本表情提供三种处理方式：移动位置 translate：默认处理方式，将超出图形范围的标签移动位置，隐藏 hide：对超过图形范围的文本标签进行隐藏，省略号显示 ellipsis：对超过图形范围的文本标签进行省略号显示
adjust-color	通用	自动调整文本标签文本颜色
path-adjust-position	折线图/面积图	类似 overlap，对发生重叠的文本标签会进行上下调整或者隐藏
point-adjust-positon	折线图/面积图	类似 overlap，对发生重叠的文本标签会进行上下调整或者隐藏，对对 point geometry
interval-adjust-position	柱形图/条形图	自动调整文本标签位置
interval-hide-overlap	柱形图/条形图	类似 fixed-overlap，对文本标签按优先级进行隐藏
distribute	饼图	饼图外部文本标签优化
pie-spider	饼图	饼图蜘蛛标签布局
pie-outer	饼图	饼图环绕标签布局

layout 的组合使用

此外，文本标签的 layout 可是组合配置，可以按照自定义的顺序来依次对文本标签进行优化，如下面例子配置中，我们首先对柱形图的标签位置进行调整，然后按照文本标签对应柱子的颜色调整文本标签的标签的颜色，再对发出重叠的进行隐藏，最后对超过图形的统一进行隐藏：

chart
  .interval()
  .position('type*sales')
  .color('series')
  .label('sales', {
      layout: [
      { type: 'interval-adjust-position' },
      { type: 'interval-hide-overlap' },
      { type: 'adjust-color' },
      { type: 'limit-in-plot', cfg: { action: 'hide' } },
    ]});

默认配置

在 G2 中，我们没有提供默认配置，文本标签的开启和优化均需要手动开启。在 G2Plot v2 中，我们这为每个图形配置了默认的最佳 layout 配置，如果你没有指定配置，则会自动使用默认的配置。

坐标轴体验问题

在实际业务图表中，坐标轴也是体验问题点之一，我们除了对坐标轴的提供的全面的样式配置外，还对轴标签提供了 autoRotate、autoHide、和 autoEllipsis 三种优化方式。

配置方式

在 G2Plot 中，对坐标轴标签的配置方式如下：

{
  // 对 X 轴进行配置
  xAxis: {
    label: {
      // 开启 autoHide
      autoHide: true,
      // 关闭 autoRatate
      autoRotate: false,
    }
  }
}

在 G2 中，配置方式如下

// 对 Date 字段配置坐标轴
chart.axis('Date', {
  label: {
    // 开启 autoHide，并指定使用 equidistance 处理方法，和配置最小间距6像素
    autoHide: { type: 'equidistance', cfg: { minGap: 6} },
    // 关闭 autoRotate
    autoRotate: false,
  }
});

autoRotate 配置

autoRatate 支持的处理方法如下：

type	说明
fixedAngle	如果发生了轴标签遮挡，则使用固定角度(45°)旋转文本
unfixedAngle	如果发生了轴标签遮挡，则自动计算合适的角度并新进行旋转

autoRotate 配置默认使用 fixedAngle 处理方法，即当配置 autoRotate: true 时等价于配置
{ type: 'fixedAngle' }

autoHide 配置

autoHide 支持的处理方法如下：

type	说明
equidistance	如果发生了轴标签文本重叠，这进行均匀抽样，保证 label 均匀显示 和 不出现重叠
equidistanceWithReverseBoth	同 equidistance， 首先会保证 labels 均匀显示，然后会保留首尾
reserveBoth	保证第一个最后一个 label 可见，其他的发生遮挡这进行隐藏
reserveFirst	保证首个 label 可见，其他的发生遮挡这进行隐藏
reserveLast	保证最后一个 label 可见，其他的发生遮挡这进行隐藏

autoHide 可选配置最小间距：

{
  minGap: number
}

autoHide 配置默认使用 equidistance 处理方法，即当配置 autoHide: true 时等价于配置：
{ type: '`equidistance', cfg: { minGap: 0 } }`

autoEllipsis 配置

autoEllipsis 支持的处理方法如下：

type	说明
ellipsisTail	如果发生了轴标签文本重叠，这对文本尾部进行省略显示
ellipsisHead	对文本头部进行省略显示
ellipsisMiddle	对文本中间进行省略显示

autoEllipsis 默认使用 ellipsisTail 处理方法，即当配置 autoEllipsis: true 时等价于配置：
{ type: '`ellipsisTail' }`

图例体验问题

图例位置

在 G2Plot v2 和 G2 中，均可以通过 position 属性来指定图例的位置。但对不同图形，我们建议针对性的指定图例的位置，这里的原则是缩短用户对照图例看图形的本能路径，提升信息获取效率。虽然图例的位置从技术上支持了 12 个位置，我们总结了图例在不同的图表类型中不同的位置后，经过克制收敛为两类，在 G2Plot 中我们会默认没每种图表类型配置最佳的图例位置。

图例翻页

当在图例数量比较多时，图例会占据图表大部分的的位置，我们会自动开启分类图例的翻页功能。你也可以使用 flipPage 来控制翻页的开关。

总结

非常感谢你的耐心阅读，最后总结重述下结论，如果想简单高效率，直接使用我们的默认建议，那请直接使用 G2Plot，提供最简化的基本配置即可，G2Plot 会默认自动使用最优的方案来自动优化图表中的大部分体验问题；如何需要定制针对行的解决你的体验问题，可以参照我们的文档指定适合你的配置。

---

欢迎对于可视化技术感兴趣的同学，加入到 G2Plot 后续的持续迭代中，你可以：

• 文档、DEMO、翻译等相对门槛低的事情入门
• G2Plot 的内置图表研发和迭代
• 基于 G2Plot 的开放开放机制，扩展周边非通用图表

感谢！对了，还有项目开源地址：https://github.com/antvis/G2Plot ✨✨✨。更多关于 G2Plot 的文章看这里。