Question

我有一个名为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] ...等等。

所以我想使用循环遍历main_arr的for循环并初始化数据集。

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

这是一个小提琴：https://jsfiddle.net/beaver71/4nf41tq9/

chartjs的多个气泡图数据集

1 个答案: