Vue Chart.js - 无法将 return 数据用于图表数据集
Vue Chart.js - Can't use the return data for chart data set
我不知道为什么我不能在 async mounted()
部分使用我的 return 数据,如 this.point0, this.point1
,当我调用它们时所有值都保持为 0。 immediate:true
无效,首先计算数据集无效。
我正在尝试做响应时间序列,当我按下不同的按钮时改变值,一切正常,值更新顺利,除了我可以在图表中使用这些值。
您可以在这里试用我的代码:https://jsfiddle.net/1eahf26q/
来自@Saksham 的一个有趣的评论问 "Why do you want to initialize the line chart in mounted(). It can be done whenever you are ready with the data" 我不太清楚他的意思。很抱歉这种问题,我第一次接触 Vue 和 javascript。
extends: Line,
props: ["height","breedKey", "time"],
computed: {
topic() {
return this.breedKey;
}
},
data() {
return {
point0: [],
point1: [],
point2: [],
};
},
watch: {
async breedKey (newVal, oldVal) {
try {
this.promise = axios.get(api_url);
const res = await this.promise;
this.point0 = res.data.data[0].Freq;
this.point1 = res.data.data[1].Freq;
this.point2 = res.data.data[2].Freq;
}
}
},
async mounted() {
await this.promise;
const datapresent = [];
let p0 = this.point0;
let p1 = this.point1;
let p2 = this.point2;
datapresent.push(p0, p1, p2);
this.renderChart(
{
labels: ['First','Second', "Third"],
datasets: [
{
label: "28 FEB",
data: datapresent
},
]
}
我不太了解您代码中的模式,例如 this.promise
的初始化位置。
你为什么不尝试一些更容易理解的东西。
methods: {
async getApiChartData() {
let responseData = (await axios.get(api_url)).data.data;
return [responseData[0], responseData[1], responseData[2]];
}
}
然后在挂载
async mounted() {
let datapresent = await this.getApiChartData();
//rest of your code
}
我不知道为什么我不能在 async mounted()
部分使用我的 return 数据,如 this.point0, this.point1
,当我调用它们时所有值都保持为 0。 immediate:true
无效,首先计算数据集无效。
我正在尝试做响应时间序列,当我按下不同的按钮时改变值,一切正常,值更新顺利,除了我可以在图表中使用这些值。 您可以在这里试用我的代码:https://jsfiddle.net/1eahf26q/
来自@Saksham 的一个有趣的评论问 "Why do you want to initialize the line chart in mounted(). It can be done whenever you are ready with the data" 我不太清楚他的意思。很抱歉这种问题,我第一次接触 Vue 和 javascript。
extends: Line,
props: ["height","breedKey", "time"],
computed: {
topic() {
return this.breedKey;
}
},
data() {
return {
point0: [],
point1: [],
point2: [],
};
},
watch: {
async breedKey (newVal, oldVal) {
try {
this.promise = axios.get(api_url);
const res = await this.promise;
this.point0 = res.data.data[0].Freq;
this.point1 = res.data.data[1].Freq;
this.point2 = res.data.data[2].Freq;
}
}
},
async mounted() {
await this.promise;
const datapresent = [];
let p0 = this.point0;
let p1 = this.point1;
let p2 = this.point2;
datapresent.push(p0, p1, p2);
this.renderChart(
{
labels: ['First','Second', "Third"],
datasets: [
{
label: "28 FEB",
data: datapresent
},
]
}
我不太了解您代码中的模式,例如 this.promise
的初始化位置。
你为什么不尝试一些更容易理解的东西。
methods: {
async getApiChartData() {
let responseData = (await axios.get(api_url)).data.data;
return [responseData[0], responseData[1], responseData[2]];
}
}
然后在挂载
async mounted() {
let datapresent = await this.getApiChartData();
//rest of your code
}