我一直在尝试在将鼠标悬停在图表画布上时禁用所有颜色更改,但在不禁用图表上的所有工具提示和其他交互的情况下,我仍然无法删除所有颜色更改。我用来设置颜色的代码是:
const color = array.map(a => getRandomColorWithAlphaOf(0.7))
const dataTest = {
labels: turns,
datasets: array.map((a,i) => (
{
label: a.nick,
fill: false,
data: a.data.map(d => d.cost),
borderColor: color[i],
backgroundColor: color[i],
hoverBackgroundColor: color[i],
hoverBorderColor: color[i],
pointBackgroundColor: color[i],
pointBorderColor: color[i],
pointHoverBackgroundColor: color[i],
pointHoverBorderColor: color[i]
}
))
}
当鼠标悬停在点上时,它仍然会改变颜色。
图表创建代码在这里:
const lineChart = new Chart (ctx, {
type: "line",
data: dataTest,
options: {
legend: {
display: false
},
legendCallback: (chart) => {
var text = [];
text.push('<ul>');
for (var i=0; i <chart.data.datasets.length; i++) {
console.log(chart.data.datasets[i]);
text.push('<li>');
text.push('<span style="background-color:' + chart.data.datasets[i].borderColor + '">' +" " +'</span>');
text.push('<span">' + chart.data.datasets[i].label + '</span>');
text.push('</li>');
}
text.push('</ul>');
return text.join("");
}
}
})
有没有一种方法可以消除所有颜色变化,而不使用像“event: []”这样同时禁用工具提示的东西?
编辑:在 useEffect 内移动颜色生成解决了问题。我猜它多次不同时间生成颜色。
通过 useEffect 中的移动颜色生成解决了这个问题。我猜它多次不同时间生成颜色。
您能详细说明一下答案吗?