高图汇总JSON数据

Question

试图在react中使用highcharts，我的数据是下面的格式。

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

我想实现的是： 一个柱状图，每个国家有一个柱状图（在这个例子中，两个柱状图美国& Canda），每个柱状图应该显示人口的总和。也就是说，美国有12条，加拿大有13条。此外，我还想实现 xAxis 名字应该是 USA 和 Canada.

有没有任何选项来分组bysum，Highchart提供的盒子来解决我的情况？

当我在谷歌上搜索 "Highchart数据聚合 "时，第一个结果是带我到了以下网站 文件 但却无济于事.相关jsfiddle:https:/jsfiddle.netsmj8qwun1

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.netBlackLabel6m4e8x0y4980。

API参考。 https:/api.highcharts.comhighchartsseries.column.stacking。