Chart.js环形图（doughnut graph）hover时获取对应标签和数据的实现方法

Chart.js 内置的onHover回调默认提供三个参数，你当前只用到了第一个事件参数，补充另外两个参数即可拿到悬停扇区的对应数据，修改逻辑如下：

• 补充onHover的第二个入参activeElements：该数组存储当前悬停命中的图表元素，悬停在扇区上时数组长度为1
• 补充第三个入参chart：即当前图表实例，可以直接读取配置的labels和dataset数据
• 先判断activeElements是否非空，避免鼠标离开扇区时报错

修改后的完整代码如下：

new Chart('tot_pop_chart', {
    type: 'doughnut',
    data: {
      labels: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'],
      datasets: [{
          data: [1,2,3,4,5,6,7,8],
          backgroundColor: ['rgba(200,88,120, 1)',
            'rgba(205,81,54, 1)',
            'rgba(200,134,68, 1)',
            'rgba(153,154,62, 1)',
            'rgba(87,169,91, 1)',
            'rgba(69,178,196, 1)',
            'rgba(114,120,203, 1)',
            'rgba(184,94,188, 1)'
          ],
          borderWidth: 1,
          borderColor: '#fff3e3'
        }
      ]
    },
    options: {
      animation: {},
      plugins: {
        title: {
          display: true,
          text: "Chart",
          font: {
            size: 16
          }
        },
        legend: {
          display: false
        },
        tooltip: {
          enabled: true,
        },
      },
      onHover: (e, activeElements, chart) => {
        // 只有悬停在扇区上时才执行打印
        if (activeElements.length) {
          const index = activeElements[0].dataIndex;
          const label = chart.data.labels[index];
          const value = chart.data.datasets[0].data[index];
          console.log('当前悬停扇区：', {label, value});
        }
      }
    }
  }
);

修改后鼠标悬停到对应扇区时，控制台就会输出对应label和数值。

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