Chart Js 在不禁用工具提示的情况下禁用悬停颜色更改

Question

我一直试图在将鼠标悬停在图表画布上时禁用所有颜色更改，但如果不禁用图表上的所有工具提示和其他交互，我仍然无法删除所有颜色更改。我用来设置颜色的代码是：

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 + '">' +" &nbsp;  &nbsp;  &nbsp; " +'</span>');
                    text.push('<span">' + chart.data.datasets[i].label + '</span>');
                    text.push('</li>');
                }
                text.push('</ul>');
                return text.join("");
            }
    }
    })

有没有办法摆脱所有的颜色变化而不使用像“事件：[]”这样会同时禁用工具提示的东西？

编辑：在 useEffect 中移动颜色生成解决了这个问题。我猜它会多次生成颜色。

Answer 1

在 useEffect 中通过移动颜色生成解决了这个问题。我猜它会多次生成颜色。