ChartJS 4.x迁移：如何在tooltip回调中访问其他数据集？

在ChartJS 3.x及之后的版本中，虽然移除了tooltip回调里的data参数，但你可以通过tooltipItem.chart访问到整个图表实例，进而获取所有数据集的数据。同时注意，原tooltipItem.index已改名为tooltipItem.dataIndex，这也是迁移时容易忽略的细节。

修改后的回调函数如下：

callbacks: {
    label: function(tooltipItem) {
        // 通过chart实例获取完整数据对象
        const chartData = tooltipItem.chart.data;
        // 当前数据集
        const dataset = tooltipItem.dataset;
        
        // 获取对应索引的两个数据集数值
        const count_with = chartData.datasets[0].data[tooltipItem.dataIndex];
        const count_without = chartData.datasets[1].data[tooltipItem.dataIndex];
        const total = count_with + count_without;

        const this_dataset_count = dataset.data[tooltipItem.dataIndex];
        const this_dataset_perc = (this_dataset_count / total * 100).toFixed(1);

        let label = dataset.label + ": ";
        label += this_dataset_count + " (" + this_dataset_perc + "%)";
        return label;
    }
}

关键说明： #

• tooltipItem.chart包含了图表的所有配置和数据，chart.data就是你初始化时传入的完整数据对象，和旧版回调中的data参数完全一致。
• 必须使用tooltipItem.dataIndex替代旧版的tooltipItem.index，否则会无法正确定位到对应位置的数据。

这样修改后，就能和旧版逻辑一致，计算堆叠部分的百分比并生成自定义tooltip内容。

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