在Vuejs中更新Chartjs图表数据集

omhiaaxx  于 2023-05-17  发布在  Chart.js
关注(0)|答案(1)|浏览(199)

非常感谢您的支持,我想在单击按钮时更新Chartjs数据集
下面是我的代码

<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>

它给予我错误
我尝试了Chart.update(),chart.destroy(),但它不起作用,我可以让它在纯JS中工作,但不能在Vuejs中工作,需要你的支持,使Chartjs的数据集在Vuejs中更新

qgelzfjb

qgelzfjb1#

你得到了dom元素。这样不行您需要获取图表示例。所以你不用

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

您需要用途:

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

相关问题