Vue集成Chart.js 3.9：无法触发柱状图点击事件

核心问题分析 #

你的代码存在两个关键问题导致点击事件失效：

1. 直接修改Props对象：子组件mounted中直接修改传入的opciones Prop，违反Vue单向数据流规则，且会被父组件后续更新覆盖自定义配置。
2. Watch监听时覆盖整个Options：父组件更新opciones后，子组件直接替换图表的整个options对象，导致原本设置的onClick事件被清除。

分步修复 #

1. 子组件中避免修改Props，使用合并后的本地配置 #

在子组件mounted中，不要直接修改this.opciones，而是创建一个合并了自定义配置和父组件传入配置的本地对象，确保onClick事件不会被覆盖：

// 子组件mounted方法内的配置部分
const mergedOptions = {
  // 基础默认配置
  scales: {
    y: {
      beginAtZero: true
    }
  },
  plugins: {
    datalabels: {
      color: "black",
      textAlign: "center",
      anchor: 'start',
      font: {
        weight: "bold",
        size: 14,
      }
    }
  },
  responsive: true,
  maintainAspectRatio: false,
  hover: {
    mode: 'nearest',
    intersect: true
  },
  interaction: {
    mode: 'index',
    intersect: false
  },
  // 合并父组件传入的配置
  ...this.opciones,
  // 保留自定义点击事件
  onClick: (event, elements) => {
    console.log('onClick event triggered');
    if (elements.length > 0) {
      const element = elements[0];
      const dataIndex = element.index;
      const datasetIndex = element.datasetIndex;
      console.log('Data point clicked:', dataIndex, datasetIndex);
      const data = this.chartData.datasets[datasetIndex].data[dataIndex];
      this.$emit('bar-clicked', { data, dataIndex, datasetIndex });
    } else {
      console.log('No elements clicked.');
    }
  }
};

// 实例化图表时使用合并后的配置
this.chartInstance = new Chart(ctx, {
  type: 'bar',
  data: this.chartData,
  options: mergedOptions
});

2. 修改Watch监听逻辑，合并而非替换Options #

当父组件更新opciones时，不要直接替换图表的整个options，而是将新配置合并到现有配置中，保留onClick事件：

// 子组件的watch部分
watch: {
  chartData(newData) {
    if (this.chartInstance) {
      this.chartInstance.data = newData;
      this.chartInstance.update();
    }
  },
  opciones(newOptions) {
    if (this.chartInstance) {
      // 合并新配置到现有配置，保留原有onClick
      this.chartInstance.options = {
        ...this.chartInstance.options,
        ...newOptions
      };
      this.chartInstance.update();
    }
  }
},

3. 额外排查点 #

• 元素遮挡：检查是否有其他DOM元素（如父容器的伪元素、重叠的div）覆盖在Canvas上方，导致点击事件无法触发。可以临时给Canvas添加border: 1px solid red或pointer-events: auto验证。
• 插件版本兼容：如果使用了chartjs-plugin-datalabels，确认其版本与Chart.js 3.9.x兼容，版本不匹配可能导致交互异常。

修改后的子组件完整代码 #

import { Chart, registerables } from 'chart.js';

Chart.register(...registerables);

export default {
  props: {
    chartData: {
      type: Object,
      required: true
    },
    opciones: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    const canvas = this.$refs.canvas;

    if (!canvas || !canvas.getContext) {
      console.error("No se pudo obtener el contexto del canvas.");
      return;
    }

    const ctx = canvas.getContext('2d');

    const mergedOptions = {
      scales: {
        y: {
          beginAtZero: true
        }
      },
      plugins: {
        datalabels: {
          color: "black",
          textAlign: "center",
          anchor: 'start',
          font: {
            weight: "bold",
            size: 14,
          }
        }
      },
      responsive: true,
      maintainAspectRatio: false,
      hover: {
        mode: 'nearest',
        intersect: true
      },
      interaction: {
        mode: 'index',
        intersect: false
      },
      ...this.opciones,
      onClick: (event, elements) => {
        console.log('onClick event triggered');
        if (elements.length > 0) {
          const element = elements[0];
          const dataIndex = element.index;
          const datasetIndex = element.datasetIndex;
          console.log('Data point clicked:', dataIndex, datasetIndex);
          const data = this.chartData.datasets[datasetIndex].data[dataIndex];
          this.$emit('bar-clicked', { data, dataIndex, datasetIndex });
        } else {
          console.log('No elements clicked.');
        }
      }
    };

    canvas.style.height = '400px';
    canvas.style.width = '100%'; 

    this.chartInstance = new Chart(ctx, {
      type: 'bar',
      data: this.chartData,
      options: mergedOptions
    });
  },
  watch: {
    chartData(newData) {
      if (this.chartInstance) {
        this.chartInstance.data = newData;
        this.chartInstance.update();
      }
    },
    opciones(newOptions) {
      if (this.chartInstance) {
        this.chartInstance.options = {
          ...this.chartInstance.options,
          ...newOptions
        };
        this.chartInstance.update();
      }
    }
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.destroy();
    }
  },
  render(h) {
    return h('canvas', { ref: 'canvas' });
  }
};

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