Programmiererforum

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];
});
}
}
}
}
});

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]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]
[code]


[/code]