如何在ChartJs饼图的图例悬停时触发提示框？

我懂你想让饼图不仅在切片悬停时弹出提示框，鼠标放到图例上也能触发对应切片的提示框对吧？你之前写的legend.onHover函数没效果，是因为这个函数只是返回了label，但Chart.js不会自动帮你触发提示框，得我们手动调用tooltip的显示方法才行。

下面是修改后的完整配置，我把关键逻辑标出来了：

optionsPagamenti = {
    maintainAspectRatio: false,
    legend: {
        display: true,
        position: "right",
        labels: {
            usePointStyle: true,
            boxWidth: 6
        },
        onHover: function (event, legendItem) {
            // 获取当前图表实例
            const chart = this.chart;
            // 构造tooltip需要的item数组：饼图datasetIndex固定为0，legendItem.index是对应切片的索引
            const tooltipItems = [{
                datasetIndex: 0,
                index: legendItem.index,
                // 传入鼠标位置，让tooltip显示在正确位置
                x: event.clientX,
                y: event.clientY
            }];
            // 手动触发tooltip显示
            chart.tooltip.show(tooltipItems);
            // 把鼠标样式改成指针，提升交互体验
            event.target.style.cursor = 'pointer';
        },
        onLeave: function(event, legendItem) {
            // 鼠标离开图例时隐藏tooltip
            const chart = this.chart;
            chart.tooltip.hide();
            // 恢复默认鼠标样式
            event.target.style.cursor = 'default';
        }
    },
    tooltips: {
        backgroundColor: '#f5f5f5',
        titleFontColor: '#333',
        bodyFontColor: '#666',
        bodySpacing: 4,
        xPadding: 12,
        // 把intersect改成false，不然tooltip可能无法在图例悬停时正常显示
        intersect: false,
        displayColors: false,
        callbacks: {
            title: function (tooltipItem, data) {
                return data['labels'][tooltipItem[0]['index']];
            },
            label: function (tooltipItem, data) {
                return "€" + data['datasets'][0]['data'][tooltipItem['index']].toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,').replace(/[,.]/g, m => (m === ',' ? '.' : ','));
            }
        }
    },
    responsive: true,
};

关键细节说明： #

• legend.onHover核心逻辑：手动构造tooltip需要的参数对象，包含切片索引和鼠标位置，再调用chart.tooltip.show()强制触发提示框显示。
• legend.onLeave事件：必须加上这个逻辑，不然鼠标离开图例后tooltip会一直停留在页面上。
• 修改tooltips.intersect为false：原来的intersect:1等价于true，意味着tooltip只有在鼠标和图表元素相交时才显示，改成false后，手动触发的tooltip才能正常展示。
• 鼠标样式优化：悬停图例时切换成指针样式，让用户清晰感知这是可交互元素。

这样调整后，不管是悬停切片还是对应的图例项，都会弹出对应的提示框啦！

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