Question

如何使用循环渲染数据

（for; v-for）内部：{ labels ：[]}和数据集：[{data：[]}]

使用（Vue-Chart.js）在图表中

data: {
                    labels: [

                        ***HERE***

                    ],
                    datasets: [{
                        label: "Assets",
                        backgroundColor: ["#4285F6"],
                        data: [

                            ***HERE***

                        ],                 
                    }],
                },

到目前为止，我的（渲染）数据是（一个数组，其中的数据-一些对象-以及我所有数据所需的每个对象中的数据）：

LABELS: 
this.array[0] ? this.array[0].asset.name : '',
this.array[0] ? this.array[1].asset.name : '',
this.array[0] ? this.array[2].asset.name : '',

DATASETS:
this.array[0] ? this.array[0].amount : '',
this.array[0] ? this.array[1].amount : '',
this.array[0] ? this.array[2].amount : '',

Answer 1

在图表配置之前，创建一个新数组，然后使用它：

var labelsArray = [];
var amountArray = [];
for (var i = 0; i < this.array.length; i++) {
    labelsArray.push(this.array[i] ? this.array[i].asset.name : '');
    amountArray.push(this.array[i] ? this.array[i].amount : '');
}

Vue图表配置如下：

data: {
    labels: labelsArray ,
    datasets: [{
        label: "Assets",
        backgroundColor: ["#4285F6"],
        data: amountArray,                 
    }],
},

在vue-chart.js中使用循环渲染标签和数据

1 个答案: