如何为含两个数据集的Chart.js环形图添加第二组标签？

我完全懂你遇到的这个困扰——用单个标签数组做两个数据集的环形图时，鼠标悬停第二个数据集的扇区，提示框里会重复显示办事处名称，而不是你想要的「正式员工/合同员工」这类细分标签对吧？咱们可以通过自定义Chart.js的tooltip回调来完美解决这个问题，让提示内容精准对应每个数据集的含义。

核心思路 #

默认情况下，Chart.js会把全局的labels数组复用给所有数据集的tooltip提示，所以第二个数据集也会显示办事处名称。我们要做的就是给不同数据集指定不同的提示文本规则。

具体实现步骤 #

1. 自定义Tooltip标签回调 #

在图表的options配置里，添加plugins.tooltip的回调函数，根据数据集的索引来判断要显示的内容：

const chart = new Chart(ctx, {
  type: 'doughnut',
  data: {
    labels: ['北美办事处', '欧洲办事处', '亚太办事处'],
    datasets: [
      {
        label: '总员工数',
        data: [45, 62, 78],
        // 第一个数据集的样式配置...
      },
      {
        label: '员工细分',
        data: [30, 15, 40, 22, 55, 23],
        // 第二个数据集的样式配置...
      }
    ]
  },
  options: {
    plugins: {
      tooltip: {
        callbacks: {
          label: function(context) {
            // 第一个数据集（总员工数）：显示办事处名称+数值
            if (context.datasetIndex === 0) {
              return `${context.label}: ${context.parsed}`;
            }
            // 第二个数据集（员工细分）：显示员工类型+数值
            else {
              // 这里对应每个数据点的员工类型，顺序要和data数组一致
              const employeeTypes = ['正式员工', '合同员工', '正式员工', '合同员工', '正式员工', '合同员工'];
              return `${employeeTypes[context.dataIndex]}: ${context.parsed}`;
            }
          }
        }
      }
    }
  }
});

2. 更灵活的数据集配置（可选） #

如果你不想在回调里硬写员工类型数组，也可以把类型信息直接存在第二个数据集的自定义属性里，这样维护起来更方便：

datasets: [
  // 第一个数据集...
  {
    label: '员工细分',
    data: [30, 15, 40, 22, 55, 23],
    // 自定义属性存储员工类型
    employeeCategories: ['正式员工', '合同员工', '正式员工', '合同员工', '正式员工', '合同员工'],
    // 样式配置...
  }
]

然后在tooltip回调里读取这个自定义属性：

label: function(context) {
  if (context.datasetIndex === 0) {
    return `${context.label}: ${context.parsed}`;
  } else {
    return `${context.dataset.employeeCategories[context.dataIndex]}: ${context.parsed}`;
  }
}

这样调整后，当你hover第二个数据集的扇区时，提示框就会显示对应的「正式员工/合同员工」标签，再也不会重复办事处名称了！如果还想优化tooltip的标题显示，也可以通过重写title回调来进一步定制。

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