当鼠标的流动站超出数据集放置位置时，将显示 2 个数据集圆环图的工具提示

Question

我有一个使用 Chart.js 4.4.1 实现的圆环图。该图表有 2 个数据集，一个位于外部数据集甜甜圈中，另一个位于内部数据集甜甜圈中。

每个数据集都有自己的工具提示。仅当鼠标悬停在相应数据集顶部时才应显示工具提示。

但这并不总是发生，如下图和 GIF 所示。如果我将鼠标移到数据集顶部而不离开，工具提示会将显示的数据从一个数据集更改为另一个数据集。

当鼠标悬停在相应数据集之外的其他位置时，也会出现此问题。

图表代码：

chart_pie_sistemas = new Chart(ctx_chart_pie_sistemas, {
    type: "doughnut",
    data: {
        labels: ['Cherwell Service Management - Atendentes', 'SZ.Chat - Omni Channel', 'Google Chat'],
        datasets: [
            {
                label: "Sistema",
                data: [10953, 6332, 0],
                backgroundColor: ['#F16A6A', '#2196F3', '#0F9D58'],
            },
            {
                label: "UI",
                data: [0, 0, 17285],
                backgroundColor: ['#F16A6A', '#2196F3', '#0F9D58'],
            },
        ]
    },
    options: {
        locale: 'pt-BR',
        responsive: true,
        interaction: {
            intersect: false,
            mode: 'dataset',
        },
        plugins: {
            legend: {
                display: true,
                position: 'top',
            },
            title: {
                display: true,
                text: 'Notificações por sistema e UI',
                font: {
                    size: 24,
                }
            },
            tooltip: {
                filter: function(context) {
                    var valor = context.dataset.data[context.dataIndex];
                    return valor > 0;
                },
                callbacks: {
                    footer: function(context) {
                        let sum = 0;
                        var contador = 0;
                        context.forEach(function(tooltipItem) {
                            contador++;
                            sum += tooltipItem.parsed;
                        });
                        var total_texto = (contador > 1 ? 'Total: ' + formatLocale(sum) : "");
                        return total_texto;
                    }
                }
            },
        }
    }
});

请参考这个jsfiddle来测试代码。

是否可以配置此图表以根据鼠标悬停在相应数据集中的位置显示正确的工具提示？

Answer 1

正如上面 @kikon 所评论的，工具提示问题的原因是属性

intersect

设置为

false

。当我将值更改为

intersect: true

（或者只是删除该属性，考虑到默认值为

true

）时，问题就解决了。

重要的是，我声明了

interaction

组来设置属性

mode: dataset

，考虑到我希望我的工具提示对于所有数据集都是唯一的，显示所有数据值，加上页脚中的总和，如图像中所示发布在上面的问题中。