作者 翎刀 蚂蚁金服·数据体验技术团队
G2Plot 是 AntV 团队打造的开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库,本文介绍 G2Plot 在打造柱形图背后的各种故事。
背景
柱形图——人们最常使用的图表之一,是一种使用矩形条,对不同类别进行数值比较的统计图表。最基础的柱形图,需要一个分类变量和一个数值变量,在柱状图上,分类变量的每个实体都表示为一个矩形(通俗讲即为“柱子”),而数值则决定了柱子的高度。
作为最常使用的图表之一,柱状图也衍生出多种多样的图表形式,包括将多个并列的类别聚类形成一组形成的簇状柱状图,将类别拆分成多个子类别形成的堆叠柱状图,横向的柱状图条形图等。
如下图所示的柱状图各种类别的商品销售额对比图:
在业务上,之前我们使用了社区开源的图表库,但在实际使用的过程中,在各种业务数据和场景下,会看到各种细节体验问题,其中一些是我们使用竞品过程的遇到的体验问题,我们针对问题一步步解决;有一些是用户在使用过程反馈的。因此,我们 AntV 团队在图形语法 G2 基础上开发了一图一做的图表库解决方案 G2Plot,解决我们在使用社区开源图表库中遇到的各种体验问题,同时增加基础统计图表的能力,打造开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库.
下文我们将先描述我们是如何思考和解决这其中的一些体验问题,然后描述我们在柱状图系列图形中添加的增强功能,最后阐述我们对柱状图的默认配置理解。
体验雕琢
轴标签遮挡问题
使用自动旋转策略来避免轴标签遮挡
在柱状图中的分类变量数量比较多,柱状图中的柱子就比较多,图中横轴的轴标签就可能发生重叠和遮挡问题,如下图所示:
可以看到在上图中,图形区域已经不足以以水平横向方式来清晰地显示所有轴标签了,这时则应尝试对轴标签做旋转,如下图所示:
如果图形区域更小,或者出现了更多的柱子,这时就可能出向即使倾斜了 45 度,也会发生轴标签重叠问题,这时则需要将标签倾斜