为 Highcharts 圆环图转换组 json答案

【问题标题】：Convert group json for Highcharts Donut chart为 Highcharts 圆环图转换组 json
【发布时间】：2020-03-26 02:53:03
【问题描述】：

这个问题用于创建具有多个系列的 Highcharts 圆环图。

我有 JSON 输入数据模型的动态键属性xData, yData：

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

我需要组和不同的连续索引xData, yData 来创建类似的输出结果：

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

【问题讨论】：

嗨@Moslem Shahsavan，您使用了highcharts 标签，但问题似乎与图表无关，而是与数据有关。如果您在使用 Highcharts 时遇到问题，请提供带有硬编码示例数据的演示。

标签： javascript json highcharts jsonconvert

【解决方案1】：

经过一番努力，我最终得到了这个解决方案：

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

【讨论】：

برویره。 لطفا تصویر نمونه که فرستاده شده توجه فرمایید