Highcharts:使用JSON数据创建按月和年分组的多个系列 [英] Highcharts: create multiple series grouped my month and year using JSON data
问题描述
我正在尝试使用JSON数据创建折线,样条图.我想要多个系列,但是我对如何做到这一点感到困惑.现在,当日期为2019-07-06
格式时,我可以创建多个系列.我也有一个JSON,其中包含一个月份的列和一个年份的列.请提供有关如何解决此问题的帮助.现在,我只有按天分组的代码.
I am trying to create a line, spline chart using JSON data. I want multiple series but I am confused on how to do that. Right now I am able to create the multiple series when the date is in 2019-07-06
format. I also have a JSON that has a column for the month and a column for the year Please help on how I can fix this. Right now I only have the code for group by day.
JSON数据:
[
{ "month": 6,
"year": 2019,
"starts": 21278998,
"completes": 9309458
},
{ "month": 7,
"year": 2019,
"starts": 38850115,
"completes": 17790105
}
]
我使用了该提琴中提供的日期格式2019-07-06
的解决方案: https://jsfiddle.净/BlackLabel/tjLvh89b/
I used the solution for the date format 2019-07-06
provided in this fiddle: https://jsfiddle.net/BlackLabel/tjLvh89b/
请帮助我在x-Axis
上为Month, Year
创建图表的方法.
Please help with how I can create a chart for the Month, Year
on the x-Axis
.
推荐答案
您可以简单地通过使用不同的参数创建Date对象来实现它.
You can achieve it simply by creating a Date object using different parameters.
使用年份和月份作为字符串参数,而不是字符串日期参数new Date('2019-07-07')
,例如:new Date(2019, 7)
.
Instead of the string date parameter new Date('2019-07-07')
use year and month as separate parameters like that: new Date(2019, 7)
.
代码:
var json = [{
month: 6,
year: 2019,
starts: 21278998,
completes: 9309458
}, {
month: 7,
year: 2019,
starts: 38850115,
completes: 17790105
}];
var series1 = {
name: 'starts',
data: []
},
series2 = {
name: 'completes',
data: []
};
json.forEach(elem => {
series1.data.push({
x: +new Date(elem.year, elem.month),
y: elem.starts
});
series2.data.push({
x: +new Date(elem.year, elem.month),
y: elem.completes
});
});
Highcharts.chart('container', {
chart: {
type: 'spline'
},
xAxis: {
type: 'datetime'
},
series: [
series1,
series2
]
});
演示:
日期对象参考:
这篇关于Highcharts:使用JSON数据创建按月和年分组的多个系列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!