如何在高图中找到分组数据的总和

Question

我在 highcharts 中绘制数据，但我想对分组数据求和，而不是在 highchart 中绘制该和，目前只能绘制单个数字，但我想对分组数据求和，而不是相应地绘制它关于类别。

我正在使用以下代码，但只能打印单个数据点，但我想要数字总和：

const initialSeries = [{
  name: 'Tokyo',
  data: [
    ["tokyo", 10],
    ["tokyo", 63],
    ["tokyo", 50],
    ["tokyo", 54],
    ["tokyo", 49],
    ["tokyo", 33],
    ["tokyo", 17],
    ["tokyo", 15],
    ["tokyo", 11]
  ]

}, {
  name: 'New York',
  data: [
    ['New York', 56],
    ['New York', 79],
    ['New York', 97],
    ['New York', 18.4],
    ['New York', 65],
    ['New York', 140.5],
    ['New York', 43],
    ['New York', 88],
    ['New York', 4]
  ]

}, {
  name: 'London',
  data: [
    ['London', 9],
    ['London', 30],
    ['London', 51],
    ['London', 58],
    ['London', 56],
    ['London', 285],
    ['London', 11],
    ['London', 414],
    ['London', 53],
    ['London', 8],
    ['London', 145],
    ['London', 2]
  ]
}, {
  name: 'Berlin',
  data: [
    ['Berlin', 14],
    ['Berlin', 136],
    ['Berlin', 82],
    ['Berlin', 56],
    ['Berlin', 79],
    ['Berlin', 97],
    ['Berlin', 18],
    ['Berlin', 65],
    ['Berlin', 14],
    ['Berlin', 43],
    ['Berlin', 88],
    ['Berlin', 4]
  ]
}];

const parsedData = initialSeries.map(s => ({
    name: s.name,
    data: s.data.map(d => [d[0].toString(), d[1]])
}));


Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  title: {
    text: 'Monthly Average Rainfall'
  },
  subtitle: {
    text: 'Source: WorldClimate.com'
  },
  xAxis: {
    type:'category',
    crosshair: true
  },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
    }
  },
  tooltip: {
    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
    pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
      '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
    footerFormat: '</table>',
    shared: true,
    useHTML: true
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: parsedData
});

如有任何帮助，我们将不胜感激。提前致谢

Answer 1

您可以使用reduce创建Highcharts需要的数据结构。示例：

const parsedData = initialSeries.map(s => ({
    name: s.name,
    data: [
        s.data.reduce((result, currentEl) => {
            return [result[0], result[1] += currentEl[1]]
        }, [s.name, 0])
    ]
}));

现场演示： http://jsfiddle.net/BlackLabel/rbdLnf4a/

API参考：https://api.highcharts.com/highcharts/series.column.data

如何在高图中找到分组数据的总和

How to find sum of grouping data in highcharts

javascript

angular

typescript

highcharts