此问题用于创建具有多个系列的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]
}
];
[尽一切努力,我最终得到了这个解决方案:
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"]);