将组 json 转换为 Highcharts 甜甜圈图

Question

This question for creating the Highcharts Donut chart with multiple series.

I have dynamic key properties xData, yData of JSON input data model:

  xData= ["Phase", "Step", "Task"];
  yData = ["VPhase", "VStep", "VTask"]

  inputArray = [
    { Phase: "Phase 1", VPhase: 100, Step: "Step 1", VStep:50, Task: "Task 1", VTask: 20 },
    { Phase: "Phase 1", VPhase: 100, Step: "Step 1", VStep:50, Task: "Task 2", VTask: 30 },
    { Phase: "Phase 1", VPhase: 100, Step: "Step 2", VStep:50, Task: "Task 1", VTask: 25 },
    { Phase: "Phase 1", VPhase: 100, Step: "Step 2", VStep:50, Task: "Task 2", VTask: 25 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 1", VStep:100,Task: "Task 1", VTask: 60 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 1", VStep:100,Task: "Task 2", VTask: 40 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 2", VStep:50, Task: "Task 1", VTask: 15 },
    { Phase: "Phase 2", VPhase: 150, Step: "Step 2", VStep:50, Task: "Task 2", VTask: 35 }
  ];

I need group and distinct consecutive index xData, yData for creating output result similar:

outputArray = [
    {
      Phase: ["Phase 1", "Phase 2"],
      VPhase: [100, 150]
    },
    {
      Step: ["Step 1", "Step 2", "Step 1", "Step 2"],
      VStep: [50, 50, 100 ,50]
    },
    {
      Task: ["Task 1", "Task 2", "Task 1", "Task 2", "Task 1", "Task 2", "Task 1", "Task 2"],
      VTask: [20, 30, 25, 25, 60, 40, 15, 35]
    }
  ];

Answer 1

With some effort I end up with this solution:

 const inputArray = [ { Phase: "Phase 1", VPhase: 100, Step: "Step 1", VStep:50, Task: "Task 1", VTask: 20 }, { Phase: "Phase 1", VPhase: 100, Step: "Step 1", VStep:50, Task: "Task 2", VTask: 30 }, { Phase: "Phase 1", VPhase: 100, Step: "Step 2", VStep:50, Task: "Task 1", VTask: 25 }, { Phase: "Phase 1", VPhase: 100, Step: "Step 2", VStep:50, Task: "Task 2", VTask: 25 }, { Phase: "Phase 2", VPhase: 150, Step: "Step 1", VStep:100,Task: "Task 1", VTask: 60 }, { Phase: "Phase 2", VPhase: 150, Step: "Step 1", VStep:100,Task: "Task 2", VTask: 40 }, { Phase: "Phase 2", VPhase: 150, Step: "Step 2", VStep:50, Task: "Task 1", VTask: 15 }, { Phase: "Phase 2", VPhase: 150, Step: "Step 2", VStep:50, Task: "Task 2", VTask: 35 } ]; function getGroupedData(data, firsts, seconds) { const reduced = data.reduce(function(m, d) { if(!m) m = {}; firsts.forEach(function(key) { if(!m[key]) m[key] = []; m[key].push(d[key]); }); seconds.forEach(function(key) { if(!m[key]) m[key] = []; m[key].push(d[key]); }); return m; }, {}); const obj = []; for(var i in firsts){ const o = {}; o[firsts[i]] = reduced[firsts[i]] o[seconds[i]] = reduced[seconds[i]] obj.push(o); } const final = []; obj.forEach(c=>{ var keys = Object.keys(c); for(var i in c[keys[0]]){ const o = {}; o[keys[0]] = c[keys[0]][i]; o[keys[1]] = c[keys[1]][i]; if(!final.some(p => p[keys[0]] == c[keys[0]][i] && p[keys[1]] == c[keys[1]][i])) final.push(o); } }) const output = []; for(var i in firsts){ const o = {}; o[firsts[i]] = []; o[seconds[i]] = []; final.forEach(c=>{ if(c[firsts[i]]){ o[firsts[i]].push(c[firsts[i]]); o[seconds[i]].push(c[seconds[i]]); } }) output.push(o); } console.log(output); } getGroupedData(inputArray, ["Phase", "Step", "Task"], ["VPhase", "VStep", "VTask"]);

https://stackblitz.com/edit/typescript-vryxjl