javascript - 如何正确转换堆栈图chartJS（数据转换）的数据？

Question

有来自服务器的数据

  const groupedChartData = [
    {
      duration: '00:00:10',
      stats: [
        {color: 'red', reason: 'yes', value: 11},
        {color: 'green', reason: 'no', value: 33},
      ]
    },
    {
      duration: '00:01:00',
      stats: [
        {color: 'black', reason: 'call back', value: 32},
        {color: 'green', reason: 'no', value: 77},
      ]
    },
    {
      duration: '00:10:00',
      stats: [
        {color: 'red', reason: 'yes', value: 14},
      ]
    }
  ]

根据来自服务器的数据，需要生成如下对象才能在图表上正确显示数据，即groupedChartData中stats对象的每个第一个值必须对应
next对象中的第一个，第二个到第二个， 和

预期结果

let result = [
  {
    data: [11, 32, 14],
    backgroundColor: ['red', 'black', 'red']
  },
   {
    data: [33,77],
    backgroundColor: ['green', 'green']
  }
]

标签： javascriptreactjschart.js

Answer 1

我希望下面的注释代码对您有所帮助：

const result = []

groupedChartData.forEach(el=>{
  el.stats.forEach((el, ind)=>{
    //checking if position is null
    if(result[ind] == null){
      result[ind] = {data:[], backgroundColor: []}
    }
    //pushing new values to the new array
    result[ind].data.push(el.value)
    result[ind].backgroundColor.push(el.color)
  })
})

console.log(result)