Javascript 在chartJS中,更改悬停时的标签颜色
我想在chartJS中将鼠标悬停在数据栏上时更改标签的颜色。但是颜色的变化没有反应。下面显示了我正在使用的onhover代码。有人知道如何改变悬停标签的颜色吗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
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:感谢您的回复,但不幸的是,这并没有改变标签文本的颜色。我希望在您将鼠标悬停在条形图上时更改标签文本的颜色。如果在工具栏上晃动鼠标,则会更改标签文本的颜色。但我希望更具响应性,并在悬停时立即更改文本的颜色。