Highcharts：使用JSON數據創建按月和年分組的多個系列

Question

我正在嘗試使用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 : 2019-07-06

請幫助我如何在x-Axis Month, Year創建Month, Year的圖表。

Answer 1

您可以簡單地通過使用不同的參數創建Date對象來實現。

代替字符串date參數， new Date('2019-07-07')使用年和月作為單獨的參數，例如： new Date(2019, 7) 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/

日期對象參考：

• https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date