Javascript 如何在带填充颜色的折线图上添加带打断的区域

我需要在单个数据集上显示一个带区域中断的折线图。 在单个数据集上，区域将被分成不同的填充颜色。如图所示

---

下面是一个片段，它根据y轴上的值“0”，调整了仅使用单一颜色更改的颜色

此版本在x轴上工作，并将标签值的数组（

范围

）作为设置渐变颜色停止点的起点和终点

let范围=[
['2019-01-02', '2019-01-03'],
['2019-01-06', '2019-01-09']
],
poscolor='rgba（0,255,0,1）'，
NegColor='rgba（255,0,0,1）'，
myBarChart=新图表（document.getElementById（'Chart'）{
键入：“行”，
数据：{
标签：[“2019-01-01”、“2019-01-02”、“2019-01-03”、“2019-01-04”、“2019-01-05”、“2019-01-06”、“2019-01-07”、“2019-01-08”、“2019-01-09”、“2019-01-10”]，
数据集：[{
标签：“系列1”，
数据：[1,10,6,9,3,6,4,5,8,10]
}]
},
选项：{
MaintaintAspectRatio:false，
比例：{
xAxes：[{
键入：“时间”，
时间：{
单位：'天'
}
}]
}
},
插件：[{
beforeRender:函数（c，选项）{
设dataset=c.data.datasets[0]，
x=c.刻度['x轴-0']，
fill=c.ctx.createLinearGradient（0,0,c.width,0），
model=dataset.\u meta[Object.keys（dataset.\u meta）[0].$filler.el.\u model；
填充。添加颜色停止（0，POSCOLOR）；
for（设i=0，ii=ranges.length；i

颜色变化的标准是什么？高于某个y轴值的数字？标准基于x轴值。假设x轴是日期类型，那么日期范围将是标准，并且该范围将是相同的颜色。完美