Vue中Chart.js动态更新数据提示找不到linechart如何解决

报错Could not find linechart是因为你在mounted生命周期内用const声明的linechart是函数内部局部变量，作用域仅局限在mounted函数里，methods中的方法无法访问到这个变量。另外mounted钩子的返回值不会被Vue自动挂载到组件实例上，你写的return linechart是无效代码。

• 在组件的data配置中新增一个属性，专门存储Chart.js实例，保证整个组件内都能访问到
• 实例化Chart时，把创建好的实例赋值给组件上的这个属性，不要只存为局部变量
• 更新数据时直接操作实例上挂载的data属性，修改完成后调用实例的update()方法触发图表重绘即可

修正后完整代码 #

<template>
  <div class="container center">
    <div class="px-3">
      <label for="Product">Select a:</label>
      <select
        class="border-solid border-2 rounded-md p-1 font-bold"
        @input="outputData()"
        id="Product"
        aria-placeholder="Product"
      >
        <option value="" disabled selected>Product</option>
        <option>1</option>
      </select>
    </div>
    <div>
      <!-- 推荐用ref替代document.getElementById获取元素，更符合Vue开发规范 -->
      <canvas ref="lineChart" id="line-chart"></canvas>
    </div>
  </div>
</template>

<script>
import Chart from "chart.js/auto";

export default {
  name: "line-plot",
  data() {
    return {
      // 新增属性存储图表实例
      lineChartInstance: null,
      chartData: {
        type: "line",
        data: {
          labels: ["a", "b", "c"],
          datasets: [
            {
              label: "Contract",
              data: [5, 5, 5],
              borderColor: "#9B202A",
              borderWidth: 3,
            },
            {
              label: "FWD",
              data: [5, 10, 15],
              borderColor: "#6F6F6F",
              borderWidth: 3,
            },
          ],
        },
      },
      options: [],
    };
  },
  mounted() {
    // 用ref获取canvas元素，避免id重复导致的获取错误
    const ctx = this.$refs.lineChart;
    // 将实例挂载到组件属性上，供全局访问
    this.lineChartInstance = new Chart(ctx, this.chartData);
  },
  methods: {
    outputData() {
      const contractPrice = {
        label: "Contract",
        data: [6, 6, 6],
        borderColor: "#9B202A",
        borderWidth: 3,
      };
      const fwdPrice = {
        label: "FWD",
        data: [10, 10, 10],
        borderColor: "#6F6F6F",
        borderWidth: 3,
      };
      const labels = ["a", "b", "c"];

      // 直接修改图表实例上的数据，避免原始配置和实例数据引用不一致
      this.lineChartInstance.data.labels = labels;
      this.lineChartInstance.data.datasets[0] = contractPrice;
      this.lineChartInstance.data.datasets[1] = fwdPrice;

      // 调用实例方法触发更新
      this.lineChartInstance.update();
    },
  },
};
</script>

<style>
.center {
  margin: auto;
}
</style>

额外说明 #

• 优先使用ref获取DOM元素，不要依赖document.getElementById，在Vue组件嵌套、多实例复用的场景下，id选择器容易获取到错误的元素
• 不要直接修改初始化时传入的原始chartData配置对象，Chart实例化后会把配置深拷贝到自身属性上，修改原始对象不会同步到实例，反而容易引发数据不一致问题

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