我有一个名为main_arr
的数组,其中包含多个数据数组。
所以我使用bubble chart
以不同的颜色显示所有这些不同的数组以区分它们
var myBubbleChart = new Chart(ctx, {
type : 'bubble',
data : {
datasets : [
{
label : 'Group 1: ' + main_arr[0].length,
data : main_arr[0],
backgroundColor : 'lightblue'
}, {
label : 'Group 2: ' + main_arr[1].length,
data : main_arr[1],
backgroundColor : 'pink'
}
],
},
options : {
scales : {
yAxes : [{
ticks : {
beginAtZero : true,
min : 0,
max : 100
}
}
],
xAxes : [{
ticks : {
beginAtZero : true,
min : 0,
max : 10
}
}
],
}
}
});
这非常有效。但是我想让它动态化,这样我就不需要main_arr[0]
硬编码,main_arr[1]
......以此类推。
所以我想使用一个 for 循环来循环main_arr
并初始化数据集。
datasets : [
for (var i = 0; i < main_arr.length; i++) { {
label : 'Group ' + i + ': ' + main_arr[i].length,
data : main_arr[i],
backgroundColor : 'lightblue'
}
}
],
这会在控制台中给出错误:
Uncaught SyntaxError: Unexpected token for
那么如何实现这一目标呢?
您可以使用立即调用的函数,如下所示:
datasets:
(function (main_arr) {
var out = [];
for(var i=0; i<main_arr.length; i++) {
out.push({
label: 'Group ' + i + ': ' + main_arr[i].length,
data: main_arr[i],
backgroundColor: 'lightblue'
});
}
return out;
})(main_arr)
},
该函数创建数据集数组并将其返回到图表选项对象的datasets
属性。
这是一个小提琴:https://jsfiddle.net/beaver71/4nf41tq9/