Chart.js 使用ChartJS在堆叠折线图上添加线条

我正试图用背景线上的堆叠选项重新创建下图

但是我的尝试失败了，结果是下面的图片

$（函数（）{
var areaChartCanvas=$（'#areaChart'）.get（0.getContext（'2d'））
var areaChartData={
标签：[''，''，
数据集：[{
背景色：“透明”，
边框颜色：“黑色”，
pointRadius:false，
数据：[32,12,28]，
类型：“行”
}, {
背景颜色：“红色”，
pointRadius:false，
数据：[20,20,20]
}, {
背景颜色：“橙色”，
pointRadius:false，
数据：[40,40,40]
}, {
背景颜色：“青色”，
pointRadius:false，
数据：[60,60,60]
}]
}
var区域图表选项={
MaintaintAspectRatio:false，
回答：是的，
图例：{
显示：假
},
比例：{
xAxes：[{
网格线：{
显示：对，
}
}],
雅克斯：[{
网格线：{
显示：对，
},
是的
}]
}
}
var areaChart=新图表（areaChartCanvas{
键入：“行”，
数据：区域图表数据，
选项：区域图表选项
})
})

---

如果我理解正确，我考虑了不同的方法，并用[1]扩展了图表（灵感来自）

Chart.pluginService.register({
绘制前：功能（图表、缓和）{
if（chart.config.options.fillColor）{
var ctx=chart.chart.ctx；
var chartArea=chart.chartArea；
ctx.save（）；
设δ=0；
const chartHeight=chartArea.bottom-chartArea.top；
const bottomBarHeight=chart.height-chartHeight-chartArea.top；
chart.config.options.fillColor.map（颜色=>{
常量colorHeight=图表高度*（颜色[0]/100）；
const colorBottom=chartArea.bottom+colorHeight；
ctx.fillStyle=颜色[1]；
常数x=图表区域。左侧，
y=图表高度-底部条形高度-颜色高度-增量，
宽度=chartArea.right-chartArea.left，
高度=颜色高度；
δ+=高度；
ctx.fillRect（x，y，宽度，高度）；
ctx.restore（）；
})
}
}
});
var图表数据={
标签：['a'，'b'，'c'，'d']，
数据集：[{
标签：“值”，
边框颜色：“蓝色”，
数据：[30,50,25,10]
}]
};
var ctx=document.getElementById（“myChart”）.getContext（“2d”）；
var myBar=新图表（ctx{
键入：“行”，
数据：图表数据，
选项：{
比例：{
雅克斯：[{ticks:{max:60}]
},
图例：{display:false}，
填充颜色：[
[20，‘红色’]，
[20，‘蓝色’]，
[20，‘绿色’]，
[20，‘粉色’]，
[20，‘黄色’]，
]
}
});

+1非常好。曲线下区域的背景色如何？它能像OP的例子一样透明吗？谢谢！当然这只是一个例子。更新了答案。插件部分有点让我不知所措，但这正是我想要达到的结果。顺便问一下，我如何指定yAxes刻度之间的增量间隔？我添加了一个关于插件的解释（但官方文档也很棒）。如果有什么不清楚的地方，请告诉我。关于滴答声，您要查找的是
步长
：