Ändern Sie die Farbe anderer Slices beim Hover mit Chart.js 4
Posted: 03 Jan 2025, 16:46
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.
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