chartjs的多个气泡图数据集

Question

I have an array called main_arr which has multiple data arrays within it.

So i am using a bubble chart to show all these different arrays in different colors to distinguish them

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
                    }
                }
            ],
        }
    }
});

This works perfectly. But i want to make it dynamic so that i dont need to hard code main_arr[0], main_arr[1]...so on for each array.

So i want to use a for loop that loops through the main_arr and initialize the dataset.

datasets : [
    for (var i = 0; i < main_arr.length; i++) { {
            label : 'Group ' + i + ': ' + main_arr[i].length,
            data : main_arr[i],
            backgroundColor : 'lightblue'
        }
    }
],

This gives an error in the console:

Uncaught SyntaxError: Unexpected token for

So how to achieve this ?

Answer 1

You can use an immediately invoked function like below:

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)
},

The function creates the datasets array and returns it to datasets property of chart options object.

Here is a fiddle: https://jsfiddle.net/beaver71/4nf41tq9/