Highcharts:创建多个系列分组我的月和年使用JSON数据(Highcharts: creat

2019-10-29 02:52发布

我试图创建一个使用JSON数据线,样条曲线图。 我想多个系列,但我对如何做到这一点困惑。 现在我能够创造出多个系列的日期是2019-07-06的格式。 我也有一个具有月一列,在今年一栏请我如何可以解决此帮助JSON。 现在,我只有按天计算组代码。

JSON数据:

[ 
 { "month": 6, 
   "year": 2019, 
   "starts": 21278998, 
   "completes": 9309458 
 }, 
 { "month": 7, 
   "year": 2019, 
   "starts": 38850115, 
   "completes": 17790105 
 } 
]

我用的日期格式的解决方案2019-07-06在该提琴提供: https://jsfiddle.net/BlackLabel/tjLvh89b/

请我如何可以创建的图表帮助Month, Yearx-Axis

Answer 1:

你可以简单地通过创建使用不同的参数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
  ]
});

演示:

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

Date对象参考:

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


文章来源: Highcharts: create multiple series grouped my month and year using JSON data