如何將數據 JSON 解析為 highcharts.js 壓縮氣泡類型中的系列

Question

我的 json 輸出如下：

0: {api: 'Cars', method: 'GET', total: 3}
1: {api: 'Cars', method: 'POST', total: 4}
2: {api: 'Trucks', method: 'POST', total: 6}
3: {api: 'Boats', method: 'GET', total: 6}

以及我想重新創建數組以填充 Highchart.js 中的系列，類型為：packedbubble

[
 Cars: [
  {name: "GET", value: 3},
  {name: "PUT", value: 0},
  {name: "POST", value: 4},
  {name: "DELETE", value: 0}
 ], 
 Trucks: [
  {name: "GET", value: 0},
  {name: "PUT", value: 0},
  {name: "POST", value: 6},
  {name: "DELETE", value: 0}
 ],
 Boats: [
  {name: "GET", value: 6},
  {name: "PUT", value: 0},
  {name: "POST", value: 0},
  {name: "DELETE", value: 0}
 ]
]

Answer 1

建議的格式對於packedbubble系列不正確。 檢查API 參考： https ://api.highcharts.com/highcharts/series.packedbubble.data

如果你想轉換你的 json 數據，你可以這樣做：

let data = [{api: 'Cars', method: 'GET', total: 3},
            {api: 'Cars', method: 'POST', total: 4},
            {api: 'Trucks', method: 'POST', total: 6},
            {api: 'Boats', method: 'GET', total: 6}];

let cars = [],
 trucks = [],
 boats = [];

data.forEach(obj => {
  if (obj.api === "Cars") {
    cars.push({
      name: obj.method,
      value: obj.total
    })
  } else if (obj.api === "Trucks") {
    trucks.push({
      name: obj.method,
      value: obj.total
    })
  } else if (obj.api === "Boats") {
    boats.push({
      name: obj.method,
      value: obj.total
    })
  }
})

...

  series: [{
    name: 'Cars',
    data: cars
  }, {
    name: 'Trucks',
    data: trucks
  }, {
    name: 'Boats',
    data: boats
  }]

演示： https ://jsfiddle.net/BlackLabel/juxg964q/