图表响应式适配——柱状图篇

随着设备形态和屏幕尺寸的不断增加，图表的响应式设计的诉求也愈加关键和迫切。

针对柱状图来说，不只是在不同尺寸时应该随之适配，同一尺寸下的不同柱子个数时，也应该有一个规则。但竞品观察下来发现要么是响应式做的不够好要么是只适用本身产品。于是自己尝试推导下，下面是思考及推导过程。

虽然说图表是一个将数据更直观显示的一种功能性比较强的组件，但我们抛开这一点，抽象地从视觉层面来看：

将这个基本形抽象出来，随着屏幕尺寸的变化，实际需要考虑变化的是柱子的柱宽与基本形宽度的变化。我们要做的就是确定一个变化规则。

从柱状图的使用目的和我们的场景出发，我们想强调出每个分类下数量的大小以及不同分类的比较，那么肯定希望去强调柱子本身。这里就想到格式塔中的

。在柱状图的场景中，将柱子作为主体呈现，其他区域通过留白， 提供必要的“呼吸空间”，让每个柱子能得到聚焦展示。

这里用AI生成一个预览器页面（感谢AI可以少画很多图），用来看不同比例条件下，柱状图在不同展示尺寸的表现效果。

可以发现当柱子比例超过60%时，已经失去了这种主体呈现的感觉。而且在大尺寸下，比例过大导致柱子过于粗壮，柱状图的视觉标记长度应有的作用在减弱，即不好去比较数量大小。

经过尝试，我们认为40%比例这个数值是一个比较合适的选择，即不管屏幕尺寸如何变化，柱宽占基本形宽度的比例始终为40%。

同时为了避免按比例变化的话，在柱子数量较少时，柱子太粗壮，设置了一个柱宽上限；也设置一个柱宽下限保证可识别性。

最终效果如下：

当考虑完单柱状图（堆叠柱状图也包含在内）后，接下来要处理的是分组柱状图。分组柱状图的特点是，在每个组内的柱子之间也存在一个间隙，用来区分不同内容。

当然也有一些产品选择不使用间隙，直接挨在一起。但考虑到颜色相邻可能有强烈的对比，还是选择使用间隙来分隔。

这个间隙的占比分两步考虑：

1）由于柱宽是根据比例进行的，组内间隙也应该按照比例制定，这样规则通用。

2）比例应该是多少。不能太宽，太宽会导致分组不够聚拢，形成一个整体（格式塔-接近律）；也不能太窄，太窄在小尺寸的可识别性不好，失去分隔的意义。

同样最后是用AI来快速测试几种比例的方案，最后定为

。

1）上述探索过程只基于我的产品和场景使用，如果你有其他考量因素，可以按照自己的思路定义。如：柱状图在场景中，经常与日期搭配，展示一个月内每天的销量。这样首先个数可能很多，柱子不可能太宽；其次需要连续地看变化，那么根据格式塔的连续律，柱子的间隔就不应该占比太大。

2）且由于我们的产品设备形态没有很多，其他如手表端，则需要考虑信息的删减等。

3）同理上述适配方式也可以应用在折线图、面积图等有轴图表。