高图中的多线图

时间:2018-02-13 16:36:34

标签: javascript json highcharts

如何在highcharts中为以下json数据创建折线图。

[{x: "2018-02-12 17:10:48.000",y: "0.5", z: "1.4"},{x: "2018-02-14 15:10:48.000",y: "0.84", z: "3.45"},{x: "2018-0-15 17:10:48.000",y: "0.9", z: "2.5"}]

我搜索了文档和演示,但无法找到任何可以使用上述JSON格式数据的内容。 Y和Z值是要在Y轴上绘制的值,以及X轴上的x值,即日期。

像这样:enter image description here

1 个答案:

答案 0 :(得分:1)

我们必须使用Date.parse()将其转换为所需的格式。

var jsonD = [{
  x: "2018-02-12 17:10:48.000",
  y: "0.5",
  z: "1.4"
}, {
  x: "2018-02-14 15:10:48.000",
  y: "0.84",
  z: "3.45"
}, {
  x: "2018-02-15 17:10:48.000",
  y: "0.9",
  z: "2.5"
}];
var seriesData1 = [];
var seriesData2 = [];
jsonD.map((el) => {
  seriesData1.push({
    x: Date.parse(el.x), //conert to millisecond
    y: (Number(el.y)) //conert to Number
  });
  seriesData2.push({
    x: Date.parse(el.x),
    y: Number(el.z)
  })
})

Fiddle演示