Angular13中ng2-charts自定义气泡图tooltip回调类型报错问题

报错核心是两个写法不符合新版Chart.js（ng2-charts@4.x 适配Angular13的对应版本）的类型定义：

1. 新版tooltip的title回调只接收一个入参tooltipItems，旧版本传入的第二个data参数已经被移除，你额外声明了这个不存在的形参，直接导致函数签名不匹配——TS校验函数类型时，不允许目标函数的参数数量多于类型定义的参数数量，哪怕把参数标成any也无法绕过这个规则。
2. 声明配置项时没有给ChartConfiguration指定'bubble'泛型，TS会默认按通用图表类型校验回调，你手动把参数写死为TooltipItem<'bubble'>[]窄类型，和通用类型TooltipItem<keyof ChartTypeRegistry>[]不兼容，触发类型报错。

所有你需要的数据集、点位、全量图表数据，都可以从tooltipItems元素挂载的属性上获取，不需要额外传参。

1. 先把配置项的类型声明改为气泡图专属类型，从根源匹配类型校验
2. 删除回调中多余的data形参，通过tooltipItems元素的属性取需要的数据
3. 自定义label的逻辑也可以按同样规则编写

完整示例代码：

import { Component } from '@angular/core';
import { ChartConfiguration, TooltipItem } from 'chart.js';

@Component({
  // 组件元配置省略
})
export class BubbleChartComponent {
  // 注意这里指定<'bubble'>泛型，匹配气泡图专属配置类型
  public bubbleChartOptions: ChartConfiguration<'bubble'>['options'] = {
    plugins: {
      tooltip: {
        callbacks: {
          // 只保留一个入参，TS会自动推导参数类型，无需手动标注
          title: (tooltipItems) => {
            // 直接从第一个tooltip项上取当前数据集
            const currentDataset = tooltipItems[0].dataset;
            return currentDataset.label ?? '';
          },
          // 自定义tooltip内容行的示例
          label: (context) => {
            // context.raw就是当前气泡的原始x/y/r数据
            const bubblePoint = context.raw;
            return [
              `X轴指标：${bubblePoint.x}`,
              `Y轴指标：${bubblePoint.y}`,
              `气泡维度：${bubblePoint.r}`
            ];
          }
        }
      }
    }
  };

  // 其余气泡图数据、配置省略
}

如果确实需要获取全量图表数据（即你之前想传入的data对象），直接通过回调参数上挂载的chart实例获取即可：

title: (tooltipItems) => {
  // 全量图表数据，和旧版传入的data参数完全一致
  const allChartData = tooltipItems[0].chart.data;
  const targetDataset = allChartData.datasets[tooltipItems[0].datasetIndex];
  return targetDataset.label;
}

内容的提问来源于stack exchange，提问作者Welly 林經緯