Javascript 在chartJS中,更改悬停时的标签颜色

Javascript 在chartJS中,更改悬停时的标签颜色,javascript,chart.js,onhover,Javascript,Chart.js,Onhover,我想在chartJS中将鼠标悬停在数据栏上时更改标签的颜色。但是颜色的变化没有反应。下面显示了我正在使用的onhover代码。有人知道如何改变悬停标签的颜色吗 var chart = new Chart(ctx, { type: 'horizontalBar', data: { labels: ["Label 1", "Label 2", "Label 3", "Label 4", "La

我想在chartJS中将鼠标悬停在数据栏上时更改标签的颜色。但是颜色的变化没有反应。下面显示了我正在使用的onhover代码。有人知道如何改变悬停标签的颜色吗

var chart = new Chart(ctx, {
type: 'horizontalBar',
   data: {
      labels: ["Label 1", "Label 2", "Label 3", "Label 4", "Label 5", "Label 6", "Label 7"],
      datasets: [{
         data: [2000, 4000, 6000, 8000, 10000, 12000, 14000],
         backgroundColor: ["#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8", "#73BFB8"], 
      }]
   },
   options: {
        responsive: true,
        legend: {
            display: false,
        },
        scales: {
            yAxes: [{
                gridLines: {
                    display: true,
                    drawTicks: true,
                    drawOnChartArea: false
            },    
            }],
            xAxes: [{
                gridLines: {
                    display: true,
                    drawTicks: false,
                    tickMarkLength: 5,
                    drawBorder: false
                },  
            }]
        },
        onHover: function (e, item) {
            if (item.length > 0) {
                var i = item[0]._index;
                var $ctx = item[0]._chart.ctx;
                var label = item[0]._chart.config.data.labels[i];
                var data = item[0]._chart.config.data.datasets[0]._meta[0].data[i];
                var startOfBarGraph = data._xScale.left;
                var offset = 9;
                var textWidth = $ctx.measureText(label).width;
                var x = startOfBarGraph - offset - textWidth - 3;
                var y = data._model.y;
                var fontHeight = $ctx.measureText(label).actualBoundingBoxAscent + $ctx.measureText(label).actualBoundingBoxDescent;

                $ctx.fillStyle = 'white';
                $ctx.fillRect(x, y + 3 - fontHeight, textWidth, fontHeight + 4);
                $ctx.fillStyle = 'red';
                $ctx.font = "12px Arial";
                $ctx.fillText(label, x, y + 3);
                
                console.log("onHover", item, e.type);
            }
        }
    }
});
我希望轴标签看起来像下图

在数据集中 数据集:[{ 数据:[2000,4000,6000,8000,10000,12000,14000], 背景色:[“#73BFB8”、“#73BFB8”、“#73BFB8”、“#73BFB8”、“#73BFB8”、“#73BFB8”、“#73BFB8”], }]

尝试添加
hoverBackgroundColor:

感谢您的回复,但不幸的是,这并没有改变标签文本的颜色。我希望在您将鼠标悬停在条形图上时更改标签文本的颜色。如果在工具栏上晃动鼠标,则会更改标签文本的颜色。但我希望更具响应性,并在悬停时立即更改文本的颜色。