Highcharts:使用 JSON 数据创建多个系列,将我的月份和年份分组
Highcharts: create multiple series grouped my month and year using JSON data
我正在尝试使用 JSON 数据创建折线图、样条图。我想要多个系列,但我对如何做到这一点感到困惑。现在我可以在日期格式为 2019-07-06
时创建多个系列。我还有一个 JSON,其中有一个月份列和一个年份列 请帮助我解决这个问题。现在我只有按天分组的代码。
JSON 数据:
[
{ "month": 6,
"year": 2019,
"starts": 21278998,
"completes": 9309458
},
{ "month": 7,
"year": 2019,
"starts": 38850115,
"completes": 17790105
}
]
我使用了这个fiddle中提供的日期格式2019-07-06
的解决方案:https://jsfiddle.net/BlackLabel/tjLvh89b/
请帮助我如何在 x-Axis
上为 Month, Year
创建图表。
您可以简单地通过使用不同的参数创建一个 Date 对象来实现它。
而不是字符串日期参数 new Date('2019-07-07')
使用年份和月份作为单独的参数,如下所示: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
]
});
演示:
日期对象参考:
我正在尝试使用 JSON 数据创建折线图、样条图。我想要多个系列,但我对如何做到这一点感到困惑。现在我可以在日期格式为 2019-07-06
时创建多个系列。我还有一个 JSON,其中有一个月份列和一个年份列 请帮助我解决这个问题。现在我只有按天分组的代码。
JSON 数据:
[
{ "month": 6,
"year": 2019,
"starts": 21278998,
"completes": 9309458
},
{ "month": 7,
"year": 2019,
"starts": 38850115,
"completes": 17790105
}
]
我使用了这个fiddle中提供的日期格式2019-07-06
的解决方案:https://jsfiddle.net/BlackLabel/tjLvh89b/
请帮助我如何在 x-Axis
上为 Month, Year
创建图表。
您可以简单地通过使用不同的参数创建一个 Date 对象来实现它。
而不是字符串日期参数 new Date('2019-07-07')
使用年份和月份作为单独的参数,如下所示: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
]
});
演示:
日期对象参考: