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

Question

如何使用循环渲染数据

(for; v-for) inside: { labels: [] } and datasets: [{ 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 中使用循环渲染标签和数据

Render labels and data with loop inside vue-chart.js

javascript

charts

vue.js