如何让Chart.js雷达图hover时显示全量数据列表？

要实现鼠标悬停雷达图任意区域都显示全部数据列表，只需调整tooltip和hover的核心配置即可，之前的问题出在未关闭intersect触发限制，也未配置hover的全局触发规则。

修改后的完整配置代码如下：

const data = {
    labels: Object.keys(currentDict),
    datasets: [{
        label: 'Probabilities',
        data: Object.values(currentDict),
        fill: true,
        backgroundColor: 'rgba(255, 0, 54, 0.7)',
        borderColor: 'rgb(255, 0, 54)',
        pointBackgroundColor: 'rgb(255, 0, 54)',
        pointBorderColor: '#fff',
        pointHoverBackgroundColor: '#fff',
        pointHoverBorderColor: 'rgb(255, 0, 54)',
    }]
};

const config = {
    type: 'radar',
    data: data,
    options: {
        animation: {
            duration: 200
        },
        elements: {
            line: {
                borderWidth: 1,
            },
        },
        scales: {
            r: {
                ticks: {
                    display: false,
                    maxTicksLimit: 5,
                },
                grid: {
                    color: gridColor
                },
                angleLines: {
                    color: gridColor
                },
                pointLabels: {
                    color: gridColor
                }
            },
        },
        // 核心修改：hover全局触发规则
        hover: {
            mode: 'index',
            intersect: false // 关闭仅元素相交触发，允许hover整个图表区域
        },
        plugins: {
            legend: {
                display: false
            },
            tooltip: {
                mode: 'index', // 显示当前索引对应的所有数据（单数据集下即全部数据）
                intersect: false, // 不限制仅精准点到节点时显示tooltip
                // 可选：自定义tooltip标签格式，确保数据展示清晰
                callbacks: {
                    label: function(context) {
                        return `${context.label}: ${context.raw}`;
                    }
                }
            },
        },
    },
};

关键配置说明： #

• hover.intersect: false：让hover事件不再局限于数据点这类图表元素，鼠标进入雷达图的任意区域都会触发hover状态。
• tooltip.intersect: false：配合hover配置，确保tooltip在hover整个区域时直接显示，无需精准定位到数据节点。
• tooltip.mode: 'index'：指定tooltip显示当前鼠标位置对应的全量数据（单数据集场景下就是所有标签和数值的列表）。

修改完成后，鼠标悬停雷达图的任意区域，都会弹出包含所有数据项的tooltip列表。

内容的提问来源于stack exchange，提问作者CMB