javascript - Chartjs 的多个气泡图数据集

Question

我有一个名为 main_arr 的数组，其中包含多个数据数组。

所以我使用气泡图以不同的颜色显示所有这些不同的数组以区分它们

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

那么如何实现这一点呢？

Answer 1

您可以使用immediately invoked function如下所示:

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 属性。

这是一个 fiddle :https://jsfiddle.net/beaver71/4nf41tq9/