Vue3监听器中销毁重绘Chart.js图表触发类型错误问题

问题分析 #

你遇到的两个报错分别源于：

1. 销毁图表后立即重绘时，DOM元素状态不稳定或DOM查找不可靠，导致Chart.js调用getComputedStyle时拿到无效元素
2. 更新图表时，自定义属性needleValue的处理不符合Chart.js插件逻辑，引发未定义属性访问错误

解决方案一：可靠的销毁重绘方案 #

步骤1：用Vue Ref替代原生DOM查找 #

在组件模板中给canvas绑定ref，避免document.getElementById的不确定性：

<canvas ref="chartCanvas" :id="id"></canvas>

步骤2：修改renderChart方法 #

增加元素校验、实例判空，确保创建图表前的环境有效：

methods: {
  renderChart() {
    const canvas = this.$refs.chartCanvas;
    if (!canvas) return;
    
    const ctx = canvas.getContext('2d');
    // 提前销毁已有实例（如果存在）
    if (this.forecastChart) {
      this.forecastChart.destroy();
      this.forecastChart = null;
    }

    this.forecastChart = new Chart(ctx, {
      type: 'doughnut',
      plugins: [{
        beforeDraw: (chart) => {
          const { ctx } = chart;
          // 你的自定义绘制逻辑
        }
      }],
      data: {
        // 基于Vuex状态的数据集配置
        datasets: [{
          // 你的数据项
        }]
      },
      options: {
        // 图表配置项
      }
    });
  }
}

步骤3：修正监听器逻辑 #

销毁实例后置空，并用$nextTick等待DOM更新完成后再重绘：

watch: {
  '$store.state.weather': {
    async handler() {
      if (this.forecastChart) {
        this.forecastChart.destroy();
        this.forecastChart = null;
      }
      await this.$nextTick();
      this.animation = 0;
      this.renderChart();
    },
    deep: true
  }
}

解决方案二：修复Update方法报错 #

如果坚持使用update方式更新，需确保自定义属性的处理符合Chart.js插件规范：

步骤1：调整自定义属性的存储位置 #

将needleValue移至插件的options配置中（而非datasets），确保插件能稳定读取：

this.forecastChart = new Chart(ctx, {
  // ...其他配置
  options: {
    plugins: {
      customNeedle: {
        needleValue: this.weather.airQuality - 0.5
      }
    }
  },
  plugins: [{
    id: 'customNeedle',
    beforeDraw: (chart) => {
      // 从options中读取自定义值
      const needleValue = chart.options.plugins.customNeedle.needleValue;
      // 你的绘制逻辑
    },
    defaultOptions: {
      needleValue: 0
    }
  }]
});

步骤2：修改updateChart方法 #

updateChart() {
  if (!this.forecastChart) return;
  // 更新插件配置中的值
  this.forecastChart.options.plugins.customNeedle.needleValue = this.weather.airQuality - 0.5;
  // 指定无动画更新，避免插件逻辑冲突
  this.forecastChart.update('none');
}

关键注意事项 #

• 始终在操作图表前校验实例是否存在，避免重复销毁/更新报错
• Vue3中优先使用ref获取DOM元素，原生DOM查找可能因组件更新导致元素丢失
• 自定义Chart.js插件时，尽量将动态配置项放在options中，而非datasets，确保update时能正确识别变化

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