Vue.js中更新Chart.js图表数据集的问题求助

问题根源 #

1. DataSetTwo方法里错误把canvas DOM元素当成Chart实例操作，DOM元素没有data属性，必然报错。
2. Chart实例是DataSetOne内的局部变量，其他方法无法访问，导致更新操作找不到正确实例。

修改后的完整代码 #

<template>
  <v-card>
    <v-layout>
      <v-main style="height: 250px">
        <v-btn @click="DataSetOne">Add Chart</v-btn>
        <v-btn @click="DataSetTwo">Change Data</v-btn>
        <canvas id="myChart6" style="height: 400px"></canvas>
      </v-main>
    </v-layout>
  </v-card>
</template>

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

export default {
  name: "HomeView",
  data: () => ({
    myChart6: null // 存储Chart实例，供所有方法共享访问
  }),
  methods: {
    DataSetTwo() {
      if (!this.myChart6) return; // 确保实例已创建再执行更新
      // 直接操作实例的数据集
      this.myChart6.data.datasets[0].data = [58, 12, 6, 9, 12, 3, 9, 2];
      this.myChart6.update(); // 调用Chart实例的update方法刷新图表
    },
    DataSetOne() {
      // 避免重复创建实例，先销毁已存在的实例
      if (this.myChart6) {
        this.myChart6.destroy();
      }
      const labels = [1, 2, 3, 4, 5, 6, 7, 9];
      const data = {
        labels: labels,
        datasets: [
          {
            type: "line",
            label: "Graph",
            backgroundColor: "rgb(171, 235, 198)",
            borderColor: "rgb(171, 235, 198)",
            data: [8, 12, 6, 9, 12, 3, 9, 2],
            hidden: false,
          },
        ],
      };
      const config = {
        data: data,
        options: {
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      };
      // 创建实例并存储到data中
      this.myChart6 = new Chart(document.getElementById("myChart6"), config);
    },
  },
};
</script>

关键改动说明 #

• 在Vue的data中声明myChart6变量，专门存储Chart实例，保证所有方法都能访问同一个实例。
• DataSetOne中添加实例存在判断，重复点击时先销毁旧实例再创建新的，避免Canvas重复绑定报错。
• DataSetTwo中直接从this.myChart6获取实例，修改数据后调用update()方法，这是Chart实例的正确更新方式。

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