Ändern Sie die Farbe anderer Slices beim Hover mit Chart.js 4 ⇐ HTML

[Guest]

Ich versuche, die Farbe anderer Slices zu ändern, wenn ich mit der Maus darüber fahre, aber das ist manchmal etwas fehlerhaft und ich versuche zu verstehen, warum.
Wie im gezeigt Es gibt beispielsweise ein Flackern, wenn man mit der Maus von einem Slice zum anderen fährt und die Farben ändern sich nicht sofort, und auch beim Verlassen des Slice sollten die Farben zurückgesetzt werden, aber manchmal funktioniert es nicht.

Code: Select all

const colors = ["red", "green", "blue"];
const colorsRGBA = ["rgba(255,0,0,.25)", "rgba(0,255,0,.25)", "rgba(0,0,255,.25)"];

new Chart(document.getElementById("doughnut"), {
type: "doughnut",
data: {
labels: ["A", "B", "C"],
datasets: [
{
data: [1, 2, 3],
backgroundColor: ["red", "green", "blue"],
hoverBackgroundColor: ["red", "green", "blue"]
}
]
},
options: {
plugins: {
tooltip: {
enabled: false
},
legend: {
display: false
}
},
onHover(event, elements, chart) {
if (event.type === "mousemove") {
if (elements.length) {
chart.getDatasetMeta(0).data.forEach((data, index) => {
if (index !== elements[0].index) {
data.options.backgroundColor = colorsRGBA[index];
}
});
} else {
chart.getDatasetMeta(0).data.forEach((data, index) => {
data.options.backgroundColor = colors[index];
});
}
}
}
}
});

Code: Select all