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

Question

我一直试图在图表上悬停时禁用所有颜色更改 canvas 但我仍然无法在不禁用图表上的所有工具提示和其他交互的情况下删除所有颜色更改。我用来设置颜色的代码是：

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 中生成移动颜色解决了这个问题。我猜它会多次生成颜色。

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

Chartjs disable color change on hover withouth disabling tooltips

javascript

hover

reactjs

chart.js