以vuejs显示图表?

Question

我正在使用vuejs制作图形，通过laravel API获取数据。

data() {
return {
startDate: '',
endDate: '',
data: {
labels: [1975, 1980, 1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020],
datasets: [{
data: [70, 95, 100, 120, 257, 271, 300, 321, 383, 450],
label: 'User Active',
borderColor: '#3e95cd'
}
]
},
options: {
title: {
display: true,
text: 'Report user'
},
}
},
created() {
axios
.get("/project/api/user")
.then((res) => {
console.log(res.data); //Result {"datasets":[{"label":"User active","data":[10,0,0,0,0,0,0,0],"fill":false,"borderColor":"#9ec6cb"}],"labels":["2021-09-07","2021-09-08","2021-09-09","2021-09-10","2021-09-11","2021-09-12","2021-09-13","2021-09-14"]};
})
},
methods: {
changevalue() {
axios
.get("/project/api/user", {
params: {
startDate: this.startDate,
endDate: this.endDate
} 
})
.then((res) => {
console.log(res.data);
})
}
}

模板:

<chartjs-component-line-chart
:data="data"
:options="options"
:plugins="plugins"
/>

现在我想在created()中获得res.data数据，而不是在data()中获得默认数据。

我有一个开始和结束日期可供选择，还有一个提交按钮。我希望当我选择开始和结束日期并点击提交时，图表数据将再次更新

<b-form-group>
<label>Start date:</label>
<b-form-datepicker
v-model="startDate"
:value="startDate"
:date-format-options="{
day: '2-digit',
month: '2-digit',
year: 'numeric',
}"
/>
</b-form-group>
</b-col>
<b-col cols="12" md="4" class="mb-md-0 mb-2">
<b-form-group>
<label>End date:</label>
<b-form-datepicker
v-model="endDate"
:value="endDate"
:date-format-options="{
day: '2-digit',
month: '2-digit',
year: 'numeric',
}"
/>
</b-form-group>
<b-button
variant="primary"
class="btn-tour-finish"
@click="changevalue"
>

请帮帮我。实际上我还没有找到解决办法。我也是Vuejs的新手，所以对我来说真的很难。我已经这样做了2天了，但仍然不起作用。谢谢。

Answer 1

所有的代码看起来都是正确的。看起来您的最后一步是将来自API的数据设置到您的图中:

created() {
axios
.get("/project/api/user")
.then((res) => {
this.data = res.data.datasets[0].data
}

相同的changevalue()方法:

changevalue() {
axios
.get("/project/api/user", {
params: {
startDate: this.startDate,
endDate: this.endDate
} 
})
.then((res) => {
this.data = res.data.datasets[0].data
})
}

Answer 2

我做过这个问题，我想和大家分享一下。可以帮助你像我这样的新手:

data() {
return {
startDate: '',
endDate: '',
loaded: false,
data: {
labels: null,
datasets: null,
},
options: {
title: {
display: true,
text: 'Report user'
},
}
},
created() {
this.loaded = false;
axios
.get("/project/api/user")
.then((res) => {
console.log(res.data); //Result {"datasets":[{"label":"User active","data":[10,0,0,0,0,0,0,0],"fill":false,"borderColor":"#9ec6cb"}],"labels":["2021-09-07","2021-09-08","2021-09-09","2021-09-10","2021-09-11","2021-09-12","2021-09-13","2021-09-14"]};
//handle code
var result = JSON.parse(res.data);
this.data.labels = result.labels;
this.data.datasets = result.datasets;
this.loaded = true;
})
},
methods: {
changevalue() {
this.loaded = false;
axios
.get("/project/api/user", {
params: {
startDate: this.startDate,
endDate: this.endDate
} 
})
.then((res) => {
var result = JSON.parse(res.data);
this.data.labels = result.labels;
this.data.datasets = result.datasets;
this.loaded = true
})
}
}


<chartjs-component-line-chart
v-if="loaded"
:data="data"
:options="options"
:plugins="plugins"
/>

文档:在这里输入链接描述