你绝对想不到柱形图背后有这么多故事

作者 翎刀 蚂蚁金服·数据体验技术团队

G2Plot 是 AntV 团队打造的开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库，本文介绍 G2Plot 在打造柱形图背后的各种故事。

背景

柱形图——人们最常使用的图表之一，是一种使用矩形条，对不同类别进行数值比较的统计图表。最基础的柱形图，需要一个分类变量和一个数值变量，在柱状图上，分类变量的每个实体都表示为一个矩形(通俗讲即为“柱子”)，而数值则决定了柱子的高度。

作为最常使用的图表之一，柱状图也衍生出多种多样的图表形式，包括将多个并列的类别聚类形成一组形成的簇状柱状图，将类别拆分成多个子类别形成的堆叠柱状图，横向的柱状图条形图等。

如下图所示的柱状图各种类别的商品销售额对比图：

在业务上，之前我们使用了社区开源的图表库，但在实际使用的过程中，在各种业务数据和场景下，会看到各种细节体验问题，其中一些是我们使用竞品过程的遇到的体验问题，我们针对问题一步步解决；有一些是用户在使用过程反馈的。因此，我们 AntV 团队在图形语法 G2 基础上开发了一图一做的图表库解决方案 G2Plot，解决我们在使用社区开源图表库中遇到的各种体验问题，同时增加基础统计图表的能力，打造开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库.

下文我们将先描述我们是如何思考和解决这其中的一些体验问题，然后描述我们在柱状图系列图形中添加的增强功能，最后阐述我们对柱状图的默认配置理解。

体验雕琢

轴标签遮挡问题

💡 使用自动旋转策略来避免轴标签遮挡

在柱状图中的分类变量数量比较多，柱状图中的柱子就比较多，图中横轴的轴标签就可能发生重叠和遮挡问题，如下图所示：

可以看到在上图中，图形区域已经不足以以水平横向方式来清晰地显示所有轴标签了，这时则应尝试对轴标签做旋转，如下图所示：

如果图形区域更小，或者出现了更多的柱子，这时就可能出向即使倾斜了 45 度，也会发生轴标签重叠问题，这时则需要将标签倾斜 90 度变成横向：

在 G2Plot 的轴配置中，开启autoRotateLabel，即可开启轴标签的自动旋转策略来避免上述问题。

💡 使用标签省略策略来避免轴标签遮挡

当然，在使用过程中，用户仍然可以选择指定轴标签的倾斜方案，即用户指定轴标签是横向显示、垂直显示、还是倾斜 45 度显示，这时候遇到轴标签重叠的情况下，则采用抽样省略的方法，抽样规则在横向、倾斜、和垂直显示都能正常进行抽样省略显示一些轴标签，如在选择标签横向时，抽样省略如下图所示：

在选择标签倾斜 45 度时，抽样省略显示如下：

同样，在 G2Plot 中，开启autoHideLabel，即可开启轴标签抽样省略策略。

另外，如果 X 轴为日期型或连续型数据时，省略标签非常合理，但 X 轴为分类数据时，省略标签是不合理的，例如：我们无法推断出上图书架和器具之间省略的标签值，违背了 AntV 设计原则（详见下文）中的有效原则 — 图表需要有效展示数据信息。但如果 X 轴标签全部展示出来会出现遮挡的问题，影响可读性，同样无法有效展示数据信息，而且还会影响图表数据清晰的呈现和图表的美。两害相权取其轻，我们最终选择了提供标签省略策略来避免轴标签遮挡。

轴标签被图形区域遮挡

在我们使用社区图表库中的状图过程中，当用户选择配置 Y 轴的最大值和最小值来限制图形范围时，会出现轴标签和图形区域遮挡的问题，下图用户设置了最大值 20 万，最小值-1 万：

可以看对，图中标注的地方破坏了图表设计原则中有效展示数据信息和图表美的原则。我们在 G2Plot 中优化了这个问题，裁剪了超出最小值和最大值范围的图形，特别要注意一个细节，如果最小值和最大值跨越了 0 值，一定要展示 0 刻度线，如下图所示：

数据标签位置和样式

数据标签：是对当前的一组数据进行的内容标注

数据标签和柱子的对应关系如何更直观的呈现给用户？应该遵循就近原则，数据标签离柱子越近，对应关系越直观，所以：

1. 当柱子宽度大于数字标签长度时，数字标签放在柱子内部
2. 当柱子宽度小于数字标签长度时，数字标签放在柱子顶部
3. 堆积柱状图、堆积条形图的数字标签只能放在柱子内部

数据标签在柱子内部引发的新问题

当数据标签放置在柱子内部时，在柱子颜色不同时，如果继续采用黑色数据标签文本，则会发现数据标签和柱子颜色区分度则不明显，此时我们又做了如下策略

1. 数据标签颜色随柱子颜色变化动态调整

2. 数字标签溢出的问题

在堆积柱状图中，由于堆积的特性，数据标签统一显示在柱子内部，当数字标签宽度小于柱子宽度时，使用动态调整数据标签颜色即可；如果数据标签超出柱子宽度时，溢出的部分在白色背景中看不清，需要对文本描边处理：

数据标签抽样

与轴标签一样，数据标签在数据密集的情况下，也同样会出现数据标签之间的重叠和遮挡问题，如下图中各种柱状图中优化前示例：

可以看到，这里简单地将所有地数据标签直接显示出来了，有很多标签被遮挡，用户根本无法阅读，显示的标签根本没起作用，所以在图形体验升级过程中，对数据标签的抽样省略也是我们一个重点：

• 对于基础柱形图，可以检查对发生重叠的数据标签进行隐藏，同时优先显示首位的数据标签，效果如下：
• 对于簇状柱状图，考虑每一簇分组中靠右的数据标签优先原则进行隐藏显示：
• 对于堆积柱状图，处理则较简单，对于柱子高度不足以显示数据标签的则直接省略显示

体验增强

在上文中，我们挑选了轴标签和数据标签在使用过程的问题，描述了我们是怎样一步步的改善和解决的。此外，我们也对柱状图的一些使用场景支持了一些新特性。

增强一：海量柱子下的交互增强方案

首先看下图所示的柱状图，可能第一眼都可能几乎看不出这是一个柱状图，其实这是一个横轴分类变量非常多的柱状图，其中分类变量是中国城市：

在这种场景下，用户很难区分具体某个城市的销售额情况，更谈不上对比了，那这种情况应该如何应对呢？

• 缩略轴交互：使用缩略轴组件用户可以只关注数据其中某个区间的场景

Js中文网 – 前端进阶资源教程 www.javascriptC.com,typescript 中文文档
一个帮助开发者成长的社区，你想要的，在这里都能找到

通常图表库都会提供缩略轴交互，在 G2Plot 中也同样提供了，G2Plot 相比其他社区图表库的体验友好之处：

1. 缩略轴可以搭配折线图、柱状图多种统计图表
2. 缩略轴左右文本会根据位置自动调整文本位置
3. 码农进阶题库,每天一道面试题 or Js小知识https://www.javascriptc.com/interview-tips/

• 滚动交互：更加自然的交互方式

另外，我们也提供了滚动条交互，用户可以在使用滚动来一次浏览一部分数据，包括对条形图的垂直滚动支持

1. 柱状图的水平滚动

2. 条形图的垂直滚动

增强二：区域联动带来更直观的对比效果

在上文背景中，我们提到了柱状图的主要作用是用来对不同类别进行数值比较的图表，为了更加方便用户直观进行比较分支，我们还提供了区域联通组件，如下图所示，用户可以通过区域联通组件来直观地进行对比查看。

默认最佳配置

为了给用户提供最优的图表体验，我们在柱状图系列中按照设计原则默认使用最佳的配置。

案例一：图例的默认位置

图例是对图形本身的概括。通常人的视觉动线是从上至下，从左到右。默认把图例放在左上角去做一个通用的方案看起来没毛病。但更好的做法是：缩短用户对照图例看图形的本能路径，提升信息获取效率

左侧簇状图柱子颜色从左到右排序，图例亦从左到右排序，右侧堆叠柱状图柱子颜色从上倒下排序，图例亦从上到下排序，一一映射，信息获取效率更高。

虽然图例的位置从技术上支持了 12 个位置，我们总结了图例在不同的图表类型中不同的位置后，经过克制收敛为两类。
设计者和观看者甚至并不会感知到位置的变化，但是对应图形获取信息的效率就在不经意间提升了。
**

案例二：数据标签默认显示规则

上文我们已经提到我们对柱状图的数据标签做了很多的优化和调整，那对柱状图条形图中各种具体的图形的数据标签应该给怎样的默认配置呢？在 G2Plot 数据标签的默认配置中，我们主要考虑数据标签文本是否能够在柱子内显示完全，首先确定的是数据标签文本是从左往右的书写和阅读顺序，那在柱状图和条形图中的柱子中就需要区分对待，这里列出一种简单的策略：

1. 在柱状图等垂直的柱子中，由于柱子宽度大部分情况下可能不能完全显示数据标签文本，因此在柱状图中默认不显示数据标签
2. 在条形图等水平的柱子中，由于柱子是水平的，文本方向和柱子方向一致，因此默认显示数据标签

**

AntV 设计原则

总结一下，我们对柱状图的体验优化遵循的原则即是 AntV 数据可视化设计原则。AntV 设计原则是基于  Ant Design  设计体系衍生的，具有数据可视化特性的指导原则。它遵循 Ant Design 设计价值观的同时，对数据可视化领域的进一步解读，如色彩、字体的指引。
我们经过大量的项目实践和经验总结，总结了以下四条核心原则，并以重要等级进行排序，四条原则相辅相成且呈递进关系，希望你在设计时也可以采纳：

• 准确：从数据转化到可视表达时不歪曲，不误导，不遗漏，忠实反映数据里包含的信息。
• 有效：信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）表达对用户最有用的信息
• 清晰：表现方式清楚易读，具条理性，可以帮助用户快速达成目标，在最少的时间内获取更多的信息。
• 美：对数据的完美表达，合理利用视觉元素进行艺术创作，不过度修饰，给用户优雅的体验。

G2Plot: g2plot.antv.vision

github原文地址：github.com/ProtoTeam/b…

作者：蚂蚁金服数据体验技术
链接：https://juejin.im/post/5df894ca518825123509446d