Vue3升级vue-chartjs至v5后点击事件chart获取及方法报错问题

核心变化说明 #

vue-chartjs v5 基于 Chart.js 3.x 重构，实例暴露方式和事件 API 均有变更：

• 不再通过 _data._chart 暴露 Chart 实例，直接访问组件的 chart 属性即可
• Chart.js 3.x 废弃了 getElementAtEvent 方法，需改用新的事件处理方式

方案1：直接在图表配置中处理点击（推荐） #

无需通过 ref 获取实例，直接在 chartOptions 的 onClick 回调中利用内置参数获取点击元素：

const chartOptions = {
  onClick: (event, activeElements) => {
    // 确保有点击到条形元素
    if (activeElements.length) {
      const clickedItem = activeElements[0];
      // 从数据源中获取对应标签
      const clickedLabel = chartData.labels[clickedItem.index];
      console.log('点击的条形标签：', clickedLabel);
    }
  }
}

方案2：通过 ref 获取实例绑定事件（适合外部触发场景） #

如果需要在组件外部方法中处理点击，需确保组件已挂载完成后再访问实例：

<template>
  <Bar v-if="loaded" ref="chartRef" :data="chartData" :options="chartOptions" />
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Bar } from 'vue-chartjs';
import { Chart, registerables } from 'chart.js';

// 注册 Chart.js 必要组件
Chart.register(...registerables);

const chartRef = ref(null);
const loaded = ref(false);
const chartData = ref({
  labels: ['标签A', '标签B', '标签C'],
  datasets: [{ data: [15, 25, 35] }]
});
const chartOptions = ref({});

onMounted(() => {
  loaded.value = true;
  // 给已挂载的图表绑定点击事件
  chartRef.value.chart.options.onClick = (event, activeElements) => {
    if (activeElements.length) {
      const label = chartData.value.labels[activeElements[0].index];
      console.log('点击的标签：', label);
    }
  };
});
</script>

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