Сопоставление данных с подходящими сериями Highcharts - PullRequest
Новая
       3

Сопоставление данных с подходящими сериями Highcharts

0 голосов
/ 18 июня 2020

В моем приложении я использую 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>

Как я могу преобразовать свои базовые данные в ожидаемые. Заранее спасибо

Ответы [ 2 ]

2 голосов
/ 18 июня 2020 

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 Dynami c имена клавиш: 

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);
1 голос
/ 18 июня 2020

Вы можете сначала сгруппировать числа с помощью foreach, а затем заполнить нулевое значение после

вы можете попробовать это ключевое значение c 

 var 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}
    ]
    
 p={}
  res=[]
   for(let o of data ){
     Object.entries(o).forEach(k=>{
      if(!p[k[0]]) res.push({name:k[0],data:p[k[0]]=[]})
            p[k[0]].push(k[1])
     })
   }
   i=0
   while(i<res.length){
     while(res[i].data.length<3){
      res[i].data.unshift(null)}
     i++
   }
      console.log(res.reverse())

если у вас разные ключи и каждый раз они могут отличаться, вы можете попробовать это 

 var data=[
      {Test: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}
    ]
    
   p={}
  res=[]
   for(let o of data ){
    obarr= Object.entries(o)
     obarr.forEach((k)=>{
      if(!p[obarr.indexOf(k)]) res.push({name:k[0],data:p[obarr.indexOf(k)]=[]})
            p[obarr.indexOf(k)].push(k[1])
     })
   }
   
   i=0
   while(i<res.length){
     while(res[i].data.length<3){
      res[i].data.unshift(null)}
     i++
   }
   console.log(res.reverse())
...