问题

Really appreciate your support
我非常感谢您的支持
I want to update a Chartjs datasets when a button is clicked
我想在按钮点击时更新 Chartjs 数据集

here is my code below
以下是我的代码如下

<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",
  components: {},
  data: () => ({}),
  watch: {},
  computed: {},
  methods: {
    DataSetTwo() {
      let myChart6 = document.getElementById("myChart6");
      myChart6.data.datasets[0].data = [58, 12, 6, 9, 12, 3, 9, 2];
      myChart6.update();
    },
    DataSetOne() {
      let labels = [1, 2, 3, 4, 5, 6, 7, 9];
      let 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,
          },
        ],
      };
      let config = {
        data: data,
        options: {
          scales: {
            y: {
              beginAtZero: true,
            },
          },
        },
      };
      let myChart6 = new Chart(document.getElementById("myChart6"), config);
      myChart6;
    },
  },
  mounted() {},
};
</script>

it give me error
它给我一个错误

I Tried Chart.update(), chart.destroy() but it doesn't work, I can make it work in plain JS but not in Vuejs, need your support making the datasets of Chartjs update in Vuejs
我尝试了 Chart.update()，chart.destroy() 但它不起作用，在普通的JS中可以使其工作，但在Vuejs中不行，需要您的支持使Chartjs的数据集在Vuejs中更新

<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",
components: {},
data: () => ({}),
watch: {},
computed: {},
methods: {
DataSetTwo() {
let myChart6 = document.getElementById("myChart6"), config;
myChart6.data.datasets[0].data = [58, 12, 6, 9, 12, 3, 9, 2];
myChart6.update();
},
DataSetOne() {
let labels = [1, 2, 3, 4, 5, 6, 7, 9];
let 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,
},
],
};
let config = {
data: data,
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
};
let myChart6 = new Chart(document.getElementById("myChart6"), config);
myChart6;
},
},
mounted() {},
};
</script>

答案1

得分: 1

你正在获取DOM元素。这不会起作用。你需要获取图表实例。所以，不要使用：

let myChart6 = document.getElementById("myChart6");

你需要使用：

let myChart6 = Chart.getChart("myChart6");

let myChart6 = document.getElementById("myChart6");

let myChart6 = Chart.getChart("myChart6");