Chart.js 2.7.2堆叠折线图数据集背景色重叠问题求助

问题根源在于默认填充逻辑：堆叠折线图的数据集默认会将填充区域从自身折线画到x轴，透明背景色叠加后自然会出现颜色混合。要保留透明度同时避免混叠，只需修改每个数据集的fill属性，让后续数据集的填充区域锚定到前一个数据集的折线，而非x轴。

具体修改方案 #

在动态添加数据集时，根据当前数据集的索引设置fill属性：

• 第一个数据集保持填充到x轴（fill: true）
• 后续数据集设置为填充到前一个数据集的折线（fill: '-1'）

修改后的动态添加代码：

const datasetIndex = chart.data.datasets.length;
chart.data.datasets.push({
     label: LABELS,
     borderColor: COLOR1,
     backgroundColor: COLOR2,
     data: [],
     fill: datasetIndex === 0 ? true : '-1'
});

原理说明 #

设置fill: '-1'后，每个后续数据集的填充区域会从自身折线延伸到前一个数据集的折线，形成上下堆叠的独立区域。透明背景色只会在自身区域内显示，不会和下方数据集的填充区域重叠混合，既保留了透明度的美观度，又解决了颜色混叠问题。

注意：确保y轴stacked: true配置已正确设置（你当前代码已包含该配置），这是堆叠逻辑生效的前提。

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