将数据从Json过滤到新数组，可以在HighChartsJs中使用

Question

我目前正在使用HighCharts JS。要在HighCharts中显示数据，我必须得到如下最终数据：

[
  {
    name: 'Performing',
    data: [1941404, 1028717, 697370, 0, 0, 0]
  },
  {
    name: 'Non performing',
    data: [0, 0, 0, 1759908, 890857, 280235]
  },
  {
    name: 'Substandard',
    data: [0, 0, 863825, 0, 0, 0]
  },
  {
    name: 'Written-off',
    data: [0, 0, 0, 0, 0, 77146]
  }
]

“数据”是一个由6个对象组成的数组，用于填充图表的xAxis。

但是，我有以下通过MongoDb提供的数据

const chartData = [
  {
    "_id": {
      "data": "90 - 180",
      "status": "Non Performing"
    },
    "value": 1759908
  },
  {
    "_id": {
      "data": "360",
      "status": "Written-off"
    },
    "value": 77146
  },
  {
    "_id": {
      "data": "360",
      "status": "Non Performing"
    },
    "value": 280235
  },
  {
    "_id": {
      "data": "30 - 90",
      "status": "Substandard"
    },
    "value": 863825
  },
  {
    "_id": {
      "data": "30 - 90",
      "status": "Performing"
    },
    "value": 697370
  },
  {
    "_id": {
      "data": "180 - 360",
      "status": "Non Performing"
    },
    "value": 890857
  },
  {
    "_id": {
      "data": "0 - 30",
      "status": "Performing"
    },
    "value": 1028717
  },
  {
    "_id": {
      "data": "0",
      "status": "Performing"
    },
    "value": 1941404
  }
]

我需要过滤后面的代码，以便它像以前的代码一样结束。非常重要的是，在数据数组中，我们最终得到6个对象，以确保我们填充Highcharts的整个xAxis，因此我们看到很多零，没有提供数据。

我真的希望这可以解决问题。感谢所有有帮助的人。我为偏离这么模糊而道歉。

快速注意数据阵列的顺序如下：0,0-30,30-90,90-180,180-360,360

EDITTED

所以这是我目前使用的代码：

const data = this.chartData
        let series

        series = Object.values(data.reduce((acc, currVal) => {
          acc[currVal._id.status] = acc[currVal._id.status] || { 
            name: currVal._id.status, 
            data: [] 
          };

          acc[currVal._id.status].data.push(currVal.totalBookValue) //push the year to data array after converting the same to a Number

          return acc //return the accumulator
        }, {}))

这种工作，但它没有填充6个元素的数据数组。

Answer 1

您的问题可以通过使用reduce()到达object form和map()进行array form（假设您发布的0到360列表完成）的一些遍历来解决。

请参阅下面的实际示例。

// Input.
const input = [
  {
    "_id": {
      "data": "90 - 180",
      "status": "Non Performing"
    },
    "value": 1759908
  },
  {
    "_id": {
      "data": "360",
      "status": "Written-off"
    },
    "value": 77146
  },
  {
    "_id": {
      "data": "360",
      "status": "Non Performing"
    },
    "value": 280235
  },
  {
    "_id": {
      "data": "30 - 90",
      "status": "Substandard"
    },
    "value": 863825
  },
  {
    "_id": {
      "data": "30 - 90",
      "status": "Performing"
    },
    "value": 697370
  },
  {
    "_id": {
      "data": "180 - 360",
      "status": "Non Performing"
    },
    "value": 890857
  },
  {
    "_id": {
      "data": "0 - 30",
      "status": "Performing"
    },
    "value": 1028717
  },
  {
    "_id": {
      "data": "0",
      "status": "Performing"
    },
    "value": 1941404
  }
]

// Depth.
const depth = ['0', '0 - 30', '30 - 90', '90 - 180', '180 - 360', '360']

// Object Form.
const objectform = input.reduce((accumulator, x) => {
  const { _id, value } = x // _id. Value.
  let { data, status } = _id // Status.
  status = status.toLowerCase() // Lower Case.
  const point = {...accumulator[status], [data]: value} // Data.
  return {...accumulator, [status]: point} // Update + Return Accumulator.
}, {})

// Output.
const output = Object.keys(objectform).map((key) => {
  return {
    name: key, // Name.
    data: depth.map((frame) => objectform[key][frame] || 0) // Data.
  }
})

// Log.
console.log(output)