如何在highcharts中求分组数据之和

wko9yo5t  于 2022-11-11  发布在  Highcharts
关注(0)|答案(1)|浏览(141)

我在highcharts中绘制数据,但我想取分组数据的总和,然后在highcharts中绘制该总和,目前可以在一位数内绘制,但我想取分组数据的总和,然后根据类别相应地绘制它。
我正在使用下面的代码,但只能打印单个数据点,但我想要的数字总和:

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
});

任何帮助都将不胜感激。提前感谢

xa9qqrwz

xa9qqrwz1#

您可以使用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

相关问题