Javascript 如何在Chartjs 3.1中的两条特定线之间添加背景色

Javascript 如何在Chartjs 3.1中的两条特定线之间添加背景色,javascript,chart.js,Javascript,Chart.js,我想在两行之间添加背景色 如何在两行之间添加背景色。如果你检查了图像,我需要在两行之间设置背景色。我查看了官方文档,但没有找到3.1版本的任何内容 请引导我。谢谢 这是我的全部代码 var-selectedPoint; window.ChartColor={ 红色:“rgb(255,99,132)”, 橙色:“rgb(25515964)”, 黄色:“rgb(25520586)”, 绿色:“rgb(75192192)”, 蓝色:“rgb(54162235)”, 紫色:“rgb(15310225

我想在两行之间添加背景色

如何在两行之间添加背景色。如果你检查了图像,我需要在两行之间设置背景色。我查看了官方文档,但没有找到3.1版本的任何内容

请引导我。谢谢

这是我的全部代码

var-selectedPoint;
window.ChartColor={
红色:“rgb(255,99,132)”,
橙色:“rgb(25515964)”,
黄色:“rgb(25520586)”,
绿色:“rgb(75192192)”,
蓝色:“rgb(54162235)”,
紫色:“rgb(153102255)”,
灰色:“rgb(231233237)”
};
var maindaset=[];
mainDataset['line']=[
20, 22, 22 , 22, 23, 12, 13, 14, 22, 25, 27, 27,
20, 20, 21 , 22, 22, 22, 30, 31, 31, 30, 31, 31.5,
];
mainDataset[“月”]=[
"08/04 08:00", "08/04 12:00", "08/04 16:00", "08/04 20:00", "09/04 00:00", 
"09/04 04:00", "09/04 08:00", "09/04 12:00", "09/04 16:00", "09/04 20:00", 
"10/04 00:00", "10/04 04:00", "10/04 08:00", "10/04 12:00", "10/04 16:00", 
"10/04 20:00", "11/04 00:00", "11/04 04:00", "11/04 08:00", "11/04 12:00", 
"11/04 16:00", "11/04 20:00", "12/04 00:00", "12/04 04:00"
];
mainDataset['comments']=[
'', '', '' , '', '', '', '', '', '', '', '', '',
“最后一句话”,
];
变量配置={
键入:“行”,
数据:{
标签:mainDataset['months'],
数据集:
[
{
边框宽度:1,//线条厚度
点半径:2,//点厚度
标签:“测量值”,
填充:假,
背景颜色:window.chartColors.green,
边框颜色:window.chartColors.green,
数据:mainDataset['line'],
},
{
标签:“报警上限”,
填充:假,
背景颜色:“红色”,
},
{
标签:“报警下限”,
填充:假,
背景颜色:“#990000”
}
]
},
选项:{
//事件:[“单击”],
onClick:函数(事件、legendItem、图例){
如果(legendItem[0]){
var dataInd=legendItem[0]。索引;
var lineInd=legendItem[0]。datasetIndex;
var clickedData=legendItem[0]。元素。已解析。y;
//var clickedData=myLine.data.datasets[lineInd].data[dataInd];
var input=prompt(`Value:${clickedData}\n注释:${maindaset['comments'][dataInd]}\n请输入您的注释`,“”);
如果(输入!=null){
/* 
为了实现实时性,
首先通过ajax调用将数据更新到数据库中。
然后获取数据并更新行数组。然后调用更新方法。
*/
mainDataset['comments'][dataInd]=输入;
myLine.update();
}
}
},
回答:是的,
标题:{
显示:对,
文本:“Chart.js折线图”
},
插件:{
工具提示:{
背景颜色:“绿色”,
回调:{
afterLabel:(数据)=>{
var dataInd=data.dataIndex;
var lineInd=data.datasetIndex;
var comment=maindaset['comments'][dataInd];
返回[`${comment}`];
},
/*后体:(数据)=>{
var dataInd=data[0]。dataIndex;
var lineInd=data[0]。datasetIndex;
return[`afterBody:DataSet索引:${lineInd}&数据索引:${dataInd}`];
}*/
}
},
标题:{
显示:对,
文本:“自定义图表标题”
}
},
悬停:{
模式:“最近的”,
是的,
},
比例:{
x:{
显示:对,
scaleLabel:{
显示:对,
标签串:“月”
},
滴答声:{
autoSkip:错误,
最大旋转:90,
年薪:90,
},
},
y:{
显示:对,
scaleLabel:{
显示:真
},
建议分钟:0,
建议最大值:100,
网格:{
抽边线:假,
borderDash:[8,4],
颜色:功能(上下文){
if(context.tick.value==10){
返回“990000”;
}else if(context.tick.value==30){
返回“红色”;
}
返回“#eded”;
},
}
}
},
}
};
var ctx=document.getElementById(“can