vuechartJs使标签充满活力

Question

我试图用vue chart做一个饼图，我试图将一个对象转换成一个数组，以更新vuechartjs中的标签，并根据api使其动态，但这似乎几乎是不可能的。我的目标是获取标签中的音乐会名称，然后获取(数据(我们每场音乐会的预订量。有人愿意帮忙吗？我什么都试过了。谢谢这是我的代码：

<script>
import { Pie } from 'vue-chartjs'
export default {
extends: Pie,
data () {
return {
bandNames:[],
booking:[],
bandName:[],
data:[],
chartData: {
labels:[],
datasets: [{
borderWidth: 1,
borderColor: [
'rgba(255,99,132,1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)'            
],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',                
],
data: [1000]
}]
},
options: {
legend: {
display: true
},
responsive: true,
maintainAspectRatio: false
}
}
},
created(){
var vm = this;
this.axios
.get('http://localhost:3000/booking', {})
.then(function (response) {

console.log(response.data);
vm.booking = response.data;
});
this.axios
.get('http://localhost:3000/concerts', {})
.then(function (response) {

console.log(response.data);
vm.bandNames = response.data;
vm.bandNames.forEach((item)=>{
vm.bandName.push(item.band)
})
vm.chartData.labels = vm.bandName[0]
var data = []
var i = vm.bandName.length
for(var a = 0 ; a < i ; a++){
data.push([vm.bandName[a]])
vm.chartData.labels = data
}


});
},
mounted () {
this.renderChart(this.chartData, this.options)
}

}

Answer 1

您可以直接将标签推送到循环中的chartOptions，因此更改此项：

vm.bandNames.forEach((item)=>{
vm.bandName.push(item.band)
})
vm.chartData.labels = vm.bandName[0]

发件人：

vm.bandNames.forEach((item)=>{
vm.chartData.labels.push(item.band)
})