Javascript 如何在折线图中添加多个背景色

在我的要求中，我想在带有静态背景色的线形图中显示没有线条的点。我几乎做到了，但我无法在图表中设置特定轴的背景色。我使用了chart.js（折线图）。请看我下面的代码，我试了这么多请看附件的图片，我想发展像那样的图形（o-10轴1颜色一样，背景颜色是固定的轴）

新图表（document.getElementById（“折线图”）{
键入：“行”，
数据：{
标签：[0,10,20,30,40,50,60,70,80,90]，
数据集：[{
数据：[035040015098220410]，
标签：“Man引擎”，
//边框颜色：“3e95cd”，
背景颜色：“rgba（244,81,30,0.8）”，
边框颜色：“rgba（244,81,30,0.8）”，
pointBackgroundColor:“rgba（244,81,30,0.5）”，
pointBorderColor:“rgba（244,81,30,0.8）”，
填充：假，
点半径：5，
展示路线：错误
}
]
},
选项：{
//标题：{
//显示：对，
//正文：“每个区域的世界人口（百万）”
// }, 
比例：{
xAxes：[{
网格线：{
drawOnChartArea:假
},
//滴答声：{
//min:1
// }
}],
雅克斯：[{
网格线：{
drawOnChartArea:假
}
}]
}
//图例：{display:false}，
//fillColor:'rgba（255128,0,0.8）'，
}
});
不应使用
类型：行
，而应使用
类型：分散

然后，您可以使用在图表上绘制单个框和文本


新图表（document.getElementById（“折线图”）{
键入：“散布”，
数据：{
数据集：[{
数据：[{x:3，y:398}，{x:5，y:350}，{x:12，y:396}，{x:20，y:160}，{x:25，y:100}，{x:30，y:195}，
标签：“Man引擎”，
边框颜色：“rgba（244,81,30,0.8）”，
pointBackgroundColor:“rgba（0,0,0,1）”，
pointBorderColor:“rgba（244,81,30,0.8）”，
点半径：5
}
]
},
选项：{
图例：{
显示：假
},
比例：{
xAxes：[{
scaleLabel：{
显示：对，
标签字符串：“BN[mgKOH/g]”，
字体：“粗体”
},
网格线：{
drawOnChartArea:假
},
滴答声：{
分:0,，
最高：70，
步长：10
}
}],
雅克斯：[{
scaleLabel：{
显示：对，
标签字符串：“铁（Fe）总量[mg/kg]”，
字体：“粗体”
},
网格线：{
drawOnChartArea:假
},
滴答声：{
分:0,，
最高：500，
步长：100
}
}]
},
注释：{
事件：[“单击”]，
附注：[
{
drawTime:“beforeDatasetsDraw”，
输入：“盒子”，
xScaleID：“x轴-1”，
yScaleID：“y轴-1”，
xMin:0，
xMax:100，
yMin:0，
yMax:500，
背景色：“rgba（212,0,0,0.8）”，
边框宽度：0
},
{
drawTime:“beforeDatasetsDraw”，
输入：“盒子”，
xScaleID：“x轴-1”，
yScaleID：“y轴-1”，
xMin:10，
xMax:100，
yMin:-10，
yMax:300，
背景色：“rgba（255,255,0,0.8）”，
边框颜色：“rgba（255,128,0,0.5）”，
边框宽度：6
},
{
drawTime:“beforeDatasetsDraw”，
输入：“盒子”，
xScaleID：“x轴-1”，
yScaleID：“y轴-1”，
xMin:15，
xMax:45，
yMin:-10，
yMax:200，
背景色：“rgba（0,128,0,0.8）”，
边框颜色：“rgba（128255,0,0.5）”，
边框宽度：6
},
{
drawTime:“afterDatasetsDraw”，
键入：“行”，
模式：“水平”，
scaleID:'y轴-1'，
价值：400，
边框颜色：“rgba（0,0,0,0）”，
边框宽度：0，
标签：{
fontStyle:'正常'，
尺码：18，
fontColor:'白色'，
背景色：“rgba（0,0,0,0）”，
内容：“危险-请勿在此区域内操作”，
已启用：true
}
},
{
drawTime:“afterDatasetsDraw”，
键入：“行”，
模式：“水平”，
scaleID:'y轴-1'，
价值：250，
边框颜色：“rgba（0,0,0,0）”，
边框宽度：0，
标签：{
xAdjust:40，
fontStyle:'正常'，
尺码：18，
fontColor:'黑色'，
背景色：“rgba（0,0,0,0）”，
内容：“警戒区-可能需要调整进料速度”，
已启用：true
}
},
{
drawTime:“afterDatasetsDraw”，
键入：“行”，
模式：“水平”，
scaleID:'y轴-1'，
价值：150，
边框颜色：“rgba（0,0,0,0）”，
边框宽度：0，
标签：{
xAdjust:-50，
fontStyle:'正常'，
尺码：18，
fontColor:'白色'，
背景色