将数据结构分配给 chartjs 属性，而不是单独分配答案

【问题标题】：Assigning data structures to chartjs properties, NOT individually将数据结构分配给 chartjs 属性，而不是单独分配
【发布时间】：2019-08-07 01:12:03
【问题描述】：

鉴于以下来自 chartjs 网站的代码 [在底部 (http://tobiasahlin.com/blog/chartjs-charts-to-get-you-started/#10-bubble-chart)]，必须单独分配每个数据点，这也占用了大量空间。假设我有一个列表中的所有 x、y 和 r。这是一种开放式问题，而不是寻找受限的解决方案。我将如何实现类似下面的伪代码？

labelList=['China','Denmark','Germany','Japan']
xlist= [21269017,258702, 3979083,4931877]
ylist = [5.245,7.526,6.994,5.921]
rlist = [15,10,15,15]

datasets: [
    {
      label: labelList,
      data: [{
        x: xlist,
        y: ylist,
        r: rlist
      }]
    }

代替：

new Chart(document.getElementById("bubble-chart"), {
type: 'bubble',
data: {
  datasets: [
    {
      label: ["China"],
      data: [{
        x: 21269017,
        y: 5.245,
        r: 15
      }]
    }, {
      label: ["Denmark"],
      data: [{
        x: 258702,
        y: 7.526,
        r: 10
      }]
    }, {
      label: ["Germany"],
      data: [{
        x: 3979083,
        y: 6.994,
        r: 15
      }]
    }, {
      label: ["Japan"],
      data: [{
        x: 4931877,
        y: 5.921,
        r: 15
      }]
    }
  ]
},
options: {
  title: {
    display: true,
    text: 'Predicted world population (millions) in 2050'
  }, scales: {
    yAxes: [{ 
      scaleLabel: {
        display: true,
        labelString: "Happiness"
      }
    }],
    xAxes: [{ 
      scaleLabel: {
        display: true,
        labelString: "GDP (PPP)"
      }
    }]
  }
}
});

【问题讨论】：

标签： javascript charts chart.js visualization

【解决方案1】：

首先您需要检查xList、yList、rList 和labelList 的长度是否相同，否则显然我们不能这样做。

之后，我们可以使用如下的简单代码生成必要的数据结构：

labelList = ['China', 'Denmark', 'Germany', 'Japan']
xList = [21269017, 258702, 3979083, 4931877]
yList = [5.245, 7.526, 6.994, 5.921]
rList = [15, 10, 15, 15]

if ([labelList.length, xList.length, yList.length, rList.length].every((v, i, arr) => v == arr[0])) {
  datasets = [...Array(labelList.length).keys()].map(i => ({
    label: labelList[i],
    data: [{
      x: xList[i],
      y: yList[i],
      r: rList[i]
    }]
  }))

  console.log(datasets);
}

【讨论】：