High-Chart агрегат JSON данных

Question

Попытка использовать старшие диаграммы в реакции, и мои данные представлены в следующем формате:

data: [{
        country: 'USA',
        color: '#00FF00',
        population: 10
    }, 
    {
        country: 'USA',
        color: '#00FF00',
        population: 2
    },
    {
        country: 'Canada',
        color: '#00FF00',
        population: 13
    }]

Чего я хочу достичь: столбчатая диаграмма с одним столбцом для каждой уникальной страны (в этом примере два столбца) США и Канда) и каждый столбец должен показывать сумму населения. То есть США с 12 и Канада с 13. Также имена xAxis должны быть USA и Canada.

. Есть ли возможность сгруппировать / суммировать, что старшая диаграмма предлагает из коробки для решить мое дело?

Когда я запускаю в Google 'агрегирование данных старшей диаграммы', первый результат приводит меня к документации , но это не помогает. Похожие jsfiddle: https://jsfiddle.net/smj8qwun/1/

Answer 1

Вам нужно будет привести данные к нужному формату, например:

let o = {
  data: [{
      country: "USA",
      color: "#00FF00",
      population: 10,
    },
    {
      country: "USA",
      color: "#00FF00",
      population: 2,
    },
    {
      country: "Canada",
      color: "#00FF00",
      population: 13,
    },
  ]
}

let formattedData = o.data.reduce((p, c) => {
  let found = p.find((o) => o.country === c.country);
  if (found) {
    found.y += c.population;
  } else {
    let {
      population,
      ...rest
    } = c;
    p.push({ ...rest,
      y: population
    });
  }
  return p;
}, []);

Highcharts.chart('container', {
  chart: {
    type: 'column'
  },

  xAxis: {
    categories: formattedData.map(o => o.country)
  },
  plotOptions: {
    series: {
      // general options for all series
      dataGrouping: {
        enabled: true,
      }
    },
  },

  series: [{
    data: formattedData
  }]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

Answer 2

Вы также можете преобразовать только country в name, population в y и включить суммирование:

series: [{
  type: 'column',
  stacking: true,
  data: [{
      name: 'USA',
      color: '#00FF00',
      y: 10
    },
    {
      name: 'USA',
      color: '#00FF00',
      y: 2
    },
    {
      name: 'Canada',
      color: '#00FF00',
      y: 13
    }
  ]
}]

---

Демонстрация в реальном времени: http://jsfiddle.net/BlackLabel/6m4e8x0y/4980/

Справочник по API: https://api.highcharts.com/highcharts/series.column.stacking