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

演示:

• https://jsfiddle.net/BlackLabel/xtefuLsp/1/

日期对象参考:

• https://developer.mozilla.org /en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

这篇关于Highcharts:使用JSON数据创建按月和年分组的多个系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！