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

根据chartjs网站[bottom（）]中的以下代码，必须单独分配每个数据点，这也会占用大量空间。假设我把所有的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
      }]
    }

---

而不是：

---

首先，您需要检查

xList

、

yList

、

rList

和

labelList

是否具有相同的长度，否则我们显然无法执行此操作

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

labelList=[“中国”、“丹麦”、“德国”、“日本”]
xList=[2126901725870239790834931877]
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]））{
数据集=[…数组（labelList.length）.keys（）].map（i=>({
标签：labelList[i]，
数据：[{
x:xList[i]，
y:yList[i]，
r:rList[i]
}]
}))
console.log（数据集）；
}

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