如何为Chart.js柱状图配置内部左右内边距

我完全懂你想要的效果——让单分类单柱子的柱状图整体居中，柱子之间贴得尽可能近，同时左右两侧留出足够的空白空间对吧？之前纠结categoryPercentage和barPercentage没用错方向，但确实这俩参数在单系列场景下的作用容易被忽略，结合另一个关键配置就能完美实现你的需求：

核心解决方案 #

通过调整x轴的三个关键配置，就能搞定：

• 关闭默认的首尾偏移，去掉自带的左右小空白
• 让柱子填满分类宽度，实现最小间距
• 手动设置左右空白大小，让柱子居中

完整代码示例 #

const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: ['分类A', '分类B', '分类C', '分类D', '分类E'],
    datasets: [{
      label: '统计数据',
      data: [24, 31, 17, 29, 12],
      backgroundColor: 'rgba(75, 192, 192, 0.6)',
      borderColor: 'rgba(75, 192, 192, 1)',
      borderWidth: 1
    }]
  },
  options: {
    scales: {
      x: {
        offset: false, // 取消默认的首尾柱子偏移，去掉左右默认的半间距空白
        categoryPercentage: 1, // 让每个分类占满其可用宽度
        barPercentage: 1, // 让柱子占满分类宽度，柱子之间无额外间距
        padding: {
          left: 70, // 自定义左侧空白大小，按需调整
          right: 70 // 自定义右侧空白大小，按需调整
        }
      },
      y: {
        beginAtZero: true
      }
    }
  }
});

参数说明 #

1. offset: false：这是解决默认左右内边距问题的关键。Chart.js默认给单系列柱状图的首尾柱子各加了半个柱子间距的空白，关闭这个配置后，首尾柱子会紧贴轴的边缘，方便我们手动控制空白。
2. categoryPercentage: 1 + barPercentage: 1：这两个参数配合，让每个柱子完全填满所属分类的宽度，柱子之间几乎没有空隙，实现你要的“最小间距”效果。如果觉得柱子太宽，也可以把barPercentage调低一点（比如0.9），这样柱子之间会有细微间距，同时柱子宽度也会缩小。
3. padding.left/right：手动设置左右两侧的空白大小，你可以根据图表的整体尺寸调整数值，直到柱子整体居中且空白符合预期。

内容的提问来源于stack exchange，提问作者noahkuhn