Highcharts：使用 JSON 数据创建多个系列，将我的月份和年份分组

Posted 2023-05-08

【中文标题】Highcharts：使用 JSON 数据创建多个系列，将我的月份和年份分组

【英文标题】：Highcharts: create multiple series grouped my month and year using JSON data

【发布时间】：2019-12-09 06:25:48

【问题描述】：

我正在尝试使用 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/

请帮助我如何在x-Axis 上为Month, Year 创建图表。

【参考方案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/

日期对象引用：

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

【讨论】：

嗨，你能帮忙***.com/questions/57601555/…

我在那里回答了你。

你能帮忙***.com/questions/61650530/…

你能帮忙***.com/questions/66897720/…