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

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

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

背景

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

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

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

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

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

体验雕琢

轴标签遮挡问题

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

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

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

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