英文:
Update Chartjs Chart datasets inside a Vuejs
问题
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中更新
英文:
Really appreciate your support
I want to update a Chartjs datasets when a button is clicked
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"), 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>
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
答案1
得分: 1
你正在获取DOM元素。这不会起作用。你需要获取图表实例。所以，不要使用：
let myChart6 = document.getElementById("myChart6");
你需要使用：
let myChart6 = Chart.getChart("myChart6");
英文:
You are getting the dom element. This won't work. You need to get the chart instance. So instead of
let myChart6 = document.getElementById("myChart6");
You need to use:
let myChart6 = Chart.getChart("myChart6");
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论