在 chartJS 中，在悬停时更改标签颜色

如何解决在 chartJS 中，在悬停时更改标签颜色

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

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"],}]
   },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],backgroundColor: ["#73BFB8","#73BFB8","#73BFB8"],}]

尝试添加 悬停背景颜色：