Vue2+PrimeVue中Chart.js环形图按钮触发tooltip报错求助

问题根源 #

报错是因为调用setActiveElements时，Chart.js的tooltip系统缺少必要的事件上下文（比如鼠标位置、图表实例的完整状态），导致内部获取tooltip数据的控制器对象为null。

修复方案 #

1. 修正事件绑定与调用逻辑 #

放弃原生DOM事件绑定，改用Vue的事件绑定来保证上下文正确，同时给setActiveElements传递模拟的事件对象，最后触发图表完整更新：

<template>
  <!-- 循环生成对应数据集的按钮 -->
  <button v-for="(item, idx) in chartData.datasets[0].data" :key="idx" @mouseover="showTooltip(idx)">
    {{ item.label }}
  </button>
  <Doughnut ref="doughnut" :data="chartData" />
</template>

<script>
export default {
  data() {
    return {
      chartData: {
        labels: ['标签1', '标签2', '标签3'],
        datasets: [{
          data: [30, 50, 20],
          backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
        }]
      }
    }
  },
  methods: {
    showTooltip(index) {
      const chart = this.$refs.doughnut?.chart;
      if (!chart) return;

      // 模拟图表内的鼠标事件上下文，Chart.js需要它初始化tooltip控制器
      const mockEvent = {
        type: 'mousemove',
        target: chart.canvas,
        clientX: chart.canvas.offsetLeft + 20,
        clientY: chart.canvas.offsetTop + 20
      };

      // 设置激活的图表元素，同时传入模拟事件
      chart.tooltip.setActiveElements([{ datasetIndex: 0, index }], mockEvent);
      // 触发图表完整更新，渲染tooltip
      chart.update();
    }
  },
  mounted() {
    // 确保图表实例完全初始化后再操作
    this.$nextTick(() => {
      // 可在此处做初始化相关逻辑
    });
  }
}
</script>

2. 避免上下文丢失 #

原代码中用document.getElementById绑定的事件回调里，this指向的是DOM按钮而非Vue实例，导致this.$refs.doughnut无法正确获取。改用Vue的@mouseover绑定能自动保留Vue实例上下文，无需额外处理this指向问题。

3. 替换refresh为chart.update() #

PrimeVue的refresh方法仅刷新图表数据，不会触发Tooltip的完整更新逻辑。直接调用Chart.js实例的update()方法，能同步更新Tooltip的状态。

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