Chart.js：如何在堆叠柱状图的柱体间添加边距/内边距？

Chart.js 原生没有为堆叠柱状图的内部柱体提供直接的padding或margin配置项，但可以通过以下几种实用方法实现你需要的空隙效果：

方法1：用透明边框模拟空隙 #

这是最简单的实现方式，通过给每个数据集设置与图表背景色一致的边框，利用borderWidth控制空隙宽度，同时开启borderSkipped: false确保边框在所有方向都显示。

修改你的数据集配置如下：

const DATA_COUNT = 7;
const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100};

const labels = Utils.months({count: 7});
const data = {
  labels: labels,
  datasets: [
    {
      label: 'One Value',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: '#ffffff', // 替换为你的图表背景色
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5),
      borderWidth: 3, // 空隙宽度，可根据需求调整
      borderRadius: 16,
      borderSkipped: false,
    },
    {
      label: 'Another Value',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: '#ffffff',
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
      borderWidth: 3,
      borderRadius: 16,
      borderSkipped: false,
    },
    {
      label: 'Yet Another Value',
      data: Utils.numbers(NUMBER_CFG),
      borderColor: '#ffffff',
      backgroundColor: Utils.transparentize(Utils.CHART_COLORS.blue, 0.5),
      borderWidth: 3,
      borderRadius: 16,
      borderSkipped: false,
    }
  ]
};

方法2：自定义插件调整柱体尺寸 #

如果需要更灵活的控制（比如不想依赖背景色），可以通过Chart.js的插件机制，在柱子绘制前调整其尺寸，主动留出空隙。

垂直堆叠柱状图的插件示例： #

// 自定义空隙插件
const stackGapPlugin = {
  beforeDraw: (chart) => {
    // 仅针对垂直堆叠的柱状图生效
    if (chart.config.type !== 'bar' || !chart.scales.y.stacked) return;
    
    const gapSize = 2; // 单方向空隙大小，总空隙为2*gapSize
    chart.data.datasets.forEach((_, datasetIndex) => {
      const meta = chart.getDatasetMeta(datasetIndex);
      meta.data.forEach(bar => {
        // 缩小柱子高度并向下偏移，留出上下空隙
        bar.height -= gapSize * 2;
        bar.y += gapSize;
      });
    });
  }
};

// 在图表配置中注册插件
const config = {
  type: 'bar',
  data: data,
  plugins: [stackGapPlugin], // 加入自定义插件
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: 'Chart.js Bar Chart'
      }
    },
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true
      }
    }
  },
};

如果是水平堆叠柱状图，只需修改插件中调整的属性为width和x即可：

meta.data.forEach(bar => {
  bar.width -= gapSize * 2;
  bar.x += gapSize;
});

方法3：数值偏移（不推荐） #

可以手动给每个数据集的数值减去固定值来模拟空隙，但这种方法会扭曲实际数据，仅适用于不关注数值准确性的纯视觉展示场景，不建议在正式项目中使用。

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