javascript - 数据映射到合适的 Highcharts 系列

Question

在我的应用程序中，我使用的是 Highcharts，并且我拥有来自 API 的数据

var data=[
  {Part1:6,Part2:3,Test2:7,Part4:4,Part5:2},
  {Part1:8,Part2:5,Test2:8,Part4:6,Part5:7,Part6:2},
  {Part1:8,Part2:5,Test2:8,Part4:6,Part5:7,Part6:2,Test:3}
]

我需要将其转换为

[
  { name:"Test", data: [null, null, 3] }, 
  { name:"Part6", data: [null, 2, 2] }, 
  { name:"Part5", data: [2, 7, 7] }, 
  { name:"Part4", data: [4, 6, 6] }, 
  { name:"Test2", data: [7, 8, 8] },
  { name:"Part2", data: [3, 5, 5] },
  { name:"Part1", data: [6, 8, 8] }
];

这是我截断的示例应用程序

var data=[
  {Part1:6,Part2:3,Test2:7,Part4:4,Part5:2},
  {Part1:8,Part2:5,Test2:8,Part4:6,Part5:7,Part6:2},
  {Part1:8,Part2:5,Test2:8,Part4:6,Part5:7,Part6:2,Test:3}
]
var expected_result=
[
  {name: 'Test', data: [null, null, 3] }, 
  {name: 'Part6', data: [null, 2,2] }, 
  {name: 'Part5', data: [2, 7, 7] }, 
  {name: 'Part4', data: [4, 6, 6] }, 
  {name: 'Test2', data: [7, 8, 8] },
  {name: 'Part2', data: [3, 5, 5] },
  {name: 'Part1', data: [6, 8, 8] }
];


Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Stacked column chart'
    },
    xAxis: {
        categories: ['Net', 'Brut', 'Others']
    },
   
    tooltip: {
        headerFormat: '<b>{point.x}</b><br/>',
        pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                enabled: true
            }
        }
    },
    series: expected_result
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<figure class="highcharts-figure">
    <div id="container"></div>
</figure>

如何将我的基础数据转换为预期。提前致谢

标签： javascripthighcharts

Answer 1

const data = [
    { Part1: 6, Part2: 3, Part3: 7, Part4: 4, Part5: 2 },
    { Part1: 8, Part2: 5, Part3: 8, Part4: 6, Part5: 7, Part6: 2 },
    { Part1: 8, Part2: 5, Part3: 8, Part4: 6, Part5: 7, Part6: 2, Part7: 3 },
];

const maxNumberPart = Math.max.apply(
    null,
    data.map(d => Object.keys(d).length),
);

const result = new Array(maxNumberPart).fill(null).map((p, i) => ({ name: `Part${maxNumberPart - i}`, data: [] }));

data.forEach(obj => {
    result.forEach(part => {
        part.data.push(obj[part.name] ? obj[part.name] : null);
    });
});

console.log(result);

UPD 动态键名：

const data = [
    { Part1: 6, Part2: 3, Test2: 7, Part4: 4, Part5: 2 },
    { Part1: 8, Part2: 5, Part3: 8, Part4: 6, Part5: 7, Part6: 2 },
    { Part1: 8, Part2: 5, Part3: 8, Test: 6, Part5: 7, Part6: 2, Part7: 3 },
];

const keys = data.reduce((set, val) => {
    Object.keys(val).forEach(key => set.add(key));
    return set;
}, new Set());

const result = [...keys].map(key => ({
    name: key,
    data: [],
}));

data.forEach(obj => {
    result.forEach(part => {
        part.data.push(obj[part.name] ? obj[part.name] : null);
    });
});

console.log(result);