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

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

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. 数字标签溢出的问题

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

数据标签抽样

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

能够看到，这里简单地将全部地数据标签直接显示出来了，有不少标签被遮挡，用户根本没法阅读，显示的标签根本没起做用，因此在图形体验升级过程当中，对数据标签的抽样省略也是咱们一个重点：

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

体验加强

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

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

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

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

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

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

1. 缩略轴能够搭配折线图、柱状图多种统计图表
2. 缩略轴左右文本会根据位置自动调整文本位置

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

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

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…