Chart.js堆叠水平条形图左侧空白间隙去除问题

AI 小北

2026-4-8

兄弟，我之前在Vue3项目里用Chart.js做水平堆叠条形图时，也碰到过这个左侧莫名留白的糟心问题，完全懂你不想用负边距这种hack手法的心情！给你几个亲测有效的解决思路：

强制x轴从0开始并关闭额外留白
水平条形图的数值轴是x轴，Chart.js默认会在轴的两端加一点缓冲空间。你可以在配置里给x轴设置beginAtZero: true，再加上grace: 0（这个是Chart.js 3及以上版本的属性，专门控制轴两端的额外留白），代码示例如下：

options: {
  indexAxis: 'y', // 确保是水平条形图的基础配置
  scales: {
    x: {
      stacked: true, // 对应你的堆叠需求
      beginAtZero: true,
      grace: 0, // 彻底关闭轴两端的额外留白
      min: 0 // 保险起见，直接指定x轴最小值为0
    },
    y: {
      stacked: true
    }
  }
}

检查全局布局内边距
有时候可能是全局的layout.padding不小心给左侧加了默认值，你可以直接把左内边距设为0：
```
options: {
  layout: {
    padding: {
      left: 0,
      // 其他方向如果不需要额外留白也可以统一设为0
    }
  }
}
```
调整条形占比配置（备选方案）
如果上面的方法还没解决，试试调整条形图的barPercentage和categoryPercentage，这两个属性控制条形的宽度和分类区间的占比，设为1可以让条形尽可能占满分类空间：
```
data: {
  datasets: [{
    label: '你的数据集名称',
    data: [/* 你的数据 */],
    barPercentage: 1,
    categoryPercentage: 1
  }]
}
```