我在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
});
任何帮助都将不胜感激。提前感谢
1条答案
按热度按时间xa9qqrwz1#
您可以使用
reduce
创建Highcharts所需的数据结构,例如:现场演示:http://jsfiddle.net/BlackLabel/rbdLnf4a/
API引用:https://api.highcharts.com/highcharts/series.column.data