堆叠柱状图未占满100%高度问题求助

嘿，我来帮你排查这个问题！你遇到的50+50堆叠后没占满100%高度的情况，核心原因是Chart.js默认会根据单个数据集的最大值自动调整Y轴范围，而没有强制锁定到0-100的区间。

举个例子：你的两个数据集最大值都是50，Chart.js可能会把Y轴的默认最大值设为50，虽然堆叠后总和是100，但Y轴只显示到50，看起来柱子就只占了一半高度。

解决方案：强制设置Y轴范围 #

在你的options.scales.y配置里，加上min: 0和max: 100，同时可以把刻度格式改成百分比，让显示更直观：

new Chart(draw, {
  type: 'bar',
  data: {
    labels: [currentYear],
    datasets: [
      {
        label: 'Legend 1',
        data: [50],
        backgroundColor: '#fdfd96', // yellow
      },
      {
        label: 'Legend 2',
        data: [50],
        backgroundColor: '#77b5fe', // blue
      },
    ],
  },
  options: {
    scales: {
      x: {
        stacked: true,
      },
      y: {
        stacked: true,
        min: 0, // 强制Y轴从0开始
        max: 100, // 强制Y轴最大值为100
        ticks: {
          // 把刻度显示为百分比格式
          callback: function(value) {
            return value + '%';
          }
        }
      },
    },
    animation: {
      onComplete: function () {
        saveChartAsImage(
          this.toBase64Image(),
          currentYear,
          companyId,
          'actif',
          manualMode,
        );
      },
    },
  },
});

为什么这样有效？ #

• *min: 0*确保Y轴从底部开始，不会截断柱子的底部部分；
• *max: 100*锁定Y轴的最高值为100，刚好匹配你两个数据集的总和（50+50），这样堆叠后的柱子就能完全占满Y轴高度；
• ticks.callback把数值转成百分比显示，让图表的含义更清晰。

如果还有问题，可以检查一下Chart.js的版本（某些旧版本的堆叠逻辑可能有差异），不过这个方案在v3及以上版本都是有效的哦！

备注：内容来源于stack exchange，提问作者aksl95