Столбчатая диаграмма с накоплением Highcharts из JSON не отображает правильные значения

Question

Я пытаюсь построить столбчатую диаграмму с накоплением, но получаю результат, не соответствующий данным JSON.

У меня есть 3 категории, но график не отображается в последней категории.

Почему это происходит?

Мой код:

let cat = [];
vals = json.map(val => {
            return val.type;
        });
console.log(vals);
vals.forEach(v=>{
if (cat.indexOf(v) === -1) cat.push(v);
});
console.log(cat);

const group_data = (array, key) => {
    return array.reduce((a, c) => {
        (a[c[key]] = a[c[key]] || []).push(c);
        return a;
    }, {});
}

const get_grouped = group_data(json, 'date');
console.log(get_grouped);

for (a in get_grouped) {
            cat.forEach(t => {
                if (!get_grouped[a].some(v => v.type == t)) {
                    get_grouped[a].push({
        "date": get_grouped[a][0].date,
        "metric": 0,
        "type": t
      });
    }
  })
}
console.log(get_grouped);
        let series = Object.entries(get_grouped).map(([key, group]) => ({
            ['name']: key,
            ['data']: group.map(entry => entry['metric']),
            ['marker']: {
                symbol: 'circle'
            }
        }));
console.log(series);

Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: cat
    },
    legend: {
      align: 'right',
      x: -30,
      verticalAlign: 'top',
      y: 25,
      floating: true,
      backgroundColor:
      Highcharts.defaultOptions.legend.backgroundColor || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      headerFormat: '<b>{point.x}</b><br/>',
      pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
      column: {
        stacking: 'normal'
      }
    },
    series: series
}); 

Вот моя скрипка: https://jsfiddle.net/noob0605/1y58t3fn/22/

От что я могу сказать, это из-за категорий заказов и несоответствия данных. Как мне это исправить?

Answer 1

Вы правы, проблема в том, что порядок категорий не соответствует порядку данных в объекте get_grouped. Вы можете исправить это, добавив сортировку (чтобы порядок объектов в каждом массиве соответствовал порядку в cat) к for (a in get_grouped) l oop:

for (a in get_grouped) {
            cat.forEach(t => {
                if (!get_grouped[a].some(v => v.type == t)) {
                    get_grouped[a].push({
        "date": get_grouped[a][0].date,
        "metric": 0,
        "type": t
      });
    }
  });
  get_grouped[a].sort((a, b) => cat.indexOf(a.type)-cat.indexOf(b.type));
}

Answer 2

Вместо использования pu sh используйте splice для установки данных в конкретный индекс категории.

 for (a in get_grouped) {
  cat.forEach((t, index) => {
    if (!get_grouped[a].some(v => v.type == t)) {
      const obj = {
        "date": get_grouped[a][0].date,
        "metric": 0,
        "type": t
      }
      get_grouped[a].splice(index, 0, obj);
    }
  })
}

Обновлено Fiddle https://jsfiddle.net/technochamp/wj82bk60/1/