Chart.js提示框回调函数：取消图例选择时忽略隐藏数据集

我明白你遇到的问题了——当通过图例隐藏某个数据集后，Tooltip里的总计依然包含了隐藏数据集的值，这是因为你之前的代码没有实时获取数据集的可见状态。

问题根源 #

你之前使用的data.datasets是初始化时的原始配置，它不会随着图例的选择动态更新隐藏状态。Chart.js中，数据集的实时可见状态存储在图表实例的数据集元数据里，而不是原始的data对象中。

解决方案 #

修改Tooltip的label回调函数，通过图表实例获取每个数据集的实时隐藏状态，只累加可见的、且索引小于等于当前数据集索引的数值。

修改后的完整回调代码如下：

callbacks: {
  label: function(tooltipItem, data) {
    // 获取当前图表实例
    const chart = tooltipItem.chart;
    const currentDatasetIndex = tooltipItem.datasetIndex;
    // 处理空值，避免NaN
    const currentValue = data.datasets[currentDatasetIndex].data[tooltipItem.index] || 0;
    let total = 0;

    // 遍历从0到当前数据集的索引，仅累加可见数据集的值
    for (let i = 0; i <= currentDatasetIndex; i++) {
      // 检查当前数据集是否可见（hidden为false表示可见）
      const isDatasetVisible = !chart.getDatasetMeta(i).hidden;
      if (isDatasetVisible) {
        const datasetValue = data.datasets[i].data[tooltipItem.index] || 0;
        total += datasetValue;
      }
    }

    // 保留两位小数
    total = Math.floor(total * 100) / 100;
    return `Value: ${currentValue} Total: ${total}`;
  }
}

关键说明 #

1. 获取图表实例：通过tooltipItem.chart拿到当前的Chart实例，这是获取实时状态的关键。
2. 判断可见状态：chart.getDatasetMeta(i).hidden会实时返回数据集的隐藏状态——当你取消图例选择时，该值会变为true，我们就跳过这个数据集的累加。
3. 空值处理：添加|| 0避免数据为空时出现NaN的情况。

这样修改后，当你隐藏某个数据集时，Tooltip里的总计就会自动排除该数据集的值，完全符合你的需求。

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