Javascript 如何更改图表中特定区域的背景色'；使用Chart.js和注释创建网格？

我在尝试在两个yAxis刻度之间更改特定图表区域的背景色时遇到了一些问题。这是我到目前为止得到的结果：

这就是我想要的：

我看到过一些类似的帖子，人们建议使用注释来实现这一点。我试着在我的图表上使用它，但它不起作用。这是我第一次用chart.js构建图表，所以我还在学习。这是我的密码：

var profileChart = new Chart(ctx1, {
type: "line",
data: {
    labels: ["", "D", "I", "S", "C", ""],
    datasets:[{
        data: [],
        borderWidth: 1,
        pointBackgroundColor: "black",
        backgroundColor: "black",
        borderColor: "black",
        fill: false,
        lineTension: 0, 
        yAxisID: 'first-y-axis'
    },
    {
        yAxisID: 'third-y-axis'
    }],
},
options: {
    title: {
        display: true,
        text: 'Gráfico do Perfil DISC',
        fontSize: 20,
    },
    scales: {
        yAxes: [{
            id: 'first-y-axis',
            type: 'linear',
            gridLines: {
                drawOnChartArea: false
            },
            scaleLabel: {
                display: true,
                padding: '15px',
                labelString: 'Intensity'
              },
            ticks: {
                max: 28,
                min: 1,
                stepSize: 1
            }
        },
        {
            id: 'second-y-axis',
            type: 'linear',
            position: 'left',
            gridLines: {
                drawOnChartArea: true
            },
            ticks: {
                display: false,
                min: 1,
                max: 8,
                stepSize: 1
            }
        },
        {
            id: 'third-y-axis',
            position: 'right',
            type: 'linear',
            gridLines: {
                drawOnChartArea: false
            },
            scaleLabel: {
                display: true,
                padding: '10px',
                labelString: 'Segment'
              },
            ticks: {
                max: 7.5,
                min: 0.5,
                stepSize: 1
            },
            afterTickToLabelConversion: function(scaleInstance) {
                scaleInstance.ticks[0] = null;
                scaleInstance.ticks[scaleInstance.ticks.length - 1] = null;
                scaleInstance.ticksAsNumbers[0] = null;
                scaleInstance.ticksAsNumbers[scaleInstance.ticksAsNumbers.length - 1] = null;
              },
        }] 
    },
    legend: {
        display: false
    },
    tooltips: {
        callbacks: {
           label: function(tooltipItem) {
                  return tooltipItem.yLabel;
           }
        }
    }
},
annotation: {
    drawTime: "afterDraw",
    annotations: [{
        id: 'box1',
      type: 'box',
      yScaleID: 'second-y-axis',
      yMin: 12.5,
      yMax: 16.5,
      backgroundColor: 'grey',
    }]
  }
});

---

可以使用直接在画布上绘制矩形。API提供了一系列钩子，可用于执行自定义代码

在下面修改的代码中，我使用

beforeDraw

钩子绘制矩形

var profileChart=新图表（'canvas'{
键入：“行”，
插件：[{
绘制前：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-0']；
var yAxis=图表刻度[‘第一y轴’]；
ctx.save（）；
ctx.fillStyle='浅灰色'；
ctx.beginPath（）；
var yTop=yAxis.getPixelForValue（16.5）；
var yBottom=yAxis.getPixelForValue（12.5）；
ctx.fillRect（xAxis.left，yTop，xAxis.right-xAxis.left，yBottom-yTop）；
ctx.stroke（）；
ctx.restore（）；
}
}],
数据：{
标签：[”、“D”、“I”、“S”、“C”、“I]，
数据集：[{
数据：[，25.5,8,7.5,11]，
边框宽度：1，
pointBackgroundColor:“黑色”，
背景颜色：“黑色”，
边框颜色：“黑色”，
填充：假，
线张力：0，
yAxisID:“第一个y轴”
},
{
yAxisID:“第三个y轴”
}
],
},
选项：{
标题：{
显示：对，
文字：“Gráfico do Perfil DISC”，
尺寸：20，
},
比例：{
雅克斯：[{
id:'第一个y轴'，
类型：'线性'，
网格线：{
drawOnChartArea:假
},
scaleLabel：{
显示：对，
填充：“15px”，
标签字符串：“强度”
},
滴答声：{
最高：28，
民:1,，
步长：1
}
},
{
id:'第二个y轴'，
类型：'线性'，
位置：'左'，
网格线：{
drawOnChartArea：真
},
滴答声：{
显示：假，
民:1,，
最高：8，
步长：1
}
},
{
id:'第三个y轴'，
位置：'右'，
类型：'线性'，
网格线：{
drawOnChartArea:假
},
scaleLabel：{
显示：对，
填充：“10px”，
标签字符串：“段”
},
滴答声：{
最高：7.5，
最小值：0.5，
步长：1
},
后dicktolabelconversion：函数（scaleInstance）{
scaleInstance.ticks[0]=null；
scaleInstance.ticks[scaleInstance.ticks.length-1]=null；
scaleInstance.TicksasNumber[0]=null；
scaleInstance.TicksasNumber[scaleInstance.TicksasNumber.length-1]=空；
},
}
]
},
图例：{
显示：假
},
工具提示：{
回调：{
标签：函数（工具提示项）{
返回tooltipItem.yLabel；
}
}
}
}
});
您可以使用直接在画布上绘制矩形。API提供了一系列钩子，可用于执行自定义代码

在下面修改的代码中，我使用
beforeDraw
钩子绘制矩形


var profileChart=新图表（'canvas'{
键入：“行”，
插件：[{
绘制前：图表=>{
var ctx=chart.chart.ctx；
var xAxis=图表刻度['x轴-0']；
var yAxis=图表刻度[‘第一y轴’]；
ctx.save（）；
ctx.fillStyle='浅灰色'；
ctx.beginPath（）；
var yTop=yAxis.getPixelForValue（16.5）；
var yBottom=yAxis.getPixelForValue（12.5）；
ctx.fillRect（xAxis.left，yTop，xAxis.right-xAxis.left，yBottom-yTop）；
ctx.stroke（）；
ctx.restore（）；
}
}],
数据：{
标签：[”、“D”、“I”、“S”、“C”、“I]，
数据集：[{
数据：[，25.5,8,7.5,11]，
边框宽度：1，
pointBackgroundColor:“黑色”，
背景颜色：“黑色”，
边框颜色：“黑色”，
填充：假，
线张力：0，
yAxisID:“第一个y轴”
},
{
yAxisID:“第三个y轴”
}
],
},
选项：{
标题：{
显示：对，
文字：“Gráfico do Perfil DISC”，
尺寸：20，
},
比例：{
雅克斯：[{
id:'第一个y轴'，
类型：'线性'，
网格线：{
drawOnChartArea:假
},
scaleLabel：{
显示：对，
填充：“15px”，
标签字符串：“强度”
},
滴答声：{
最高：28，
民:1,，
步长：1
}
},
{
id:'第二个y轴'，
类型：'线性'，
位置：'左'，
网格线：{
drawOnChartArea：真
},
滴答声：{
显示：假，
民:1,，
最高：8，
步长：1
}
},
{
id:'第三个y轴'，
位置：'右'，
类型：'线性'，
网格线：{
drawOnChartArea:假
},
scaleLabel：{
显示：对，
填充：“10px”，
标签字符串：“段”
},
滴答声：{
最高：7.5，
最小值：0.5，
步长：1
},
后dicktolabelconversion：函数（scaleInstance）{
斯卡莱因斯塔