Chartjs 禁用悬停时的颜色变化,而不禁用工具提示

问题描述 投票:0回答:2

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

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("");
            }
    }
    })

有没有一种方法可以消除所有颜色变化,而不使用像“event: []”这样同时禁用工具提示的东西?

编辑:在 useEffect 内移动颜色生成解决了问题。我猜它多次不同时间生成颜色。

javascript reactjs hover chart.js
2个回答
0
投票

通过 useEffect 中的移动颜色生成解决了这个问题。我猜它多次不同时间生成颜色。


0
投票

您能详细说明一下答案吗?

© www.soinside.com 2019 - 2024. All rights reserved.