Highchart聚合JSON数据

Question

尝试在react中使用highcharts，我的数据格式如下：

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

我想要实现:一个柱状图与每个独特的国家(在这个例子中，美国和加拿大的两个条形)和每个条形应显示总人口。也就是说，美国有12个，加拿大有13个。而且xAxis名称应该是USA和Canada。

是否有按/sum分组的选项，其中highchart提供了开箱即用的解决方案？

当我在谷歌上搜索“highchart data aggregation”时，第一个结果会把我带到documentation，但它没有帮助。相关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/

接口参考： https://api.highcharts.com/highcharts/series.column.stacking