使用 JSON 数据绘制 Highchart 多系列折线图答案

【问题标题】：Plot Highchart multiple series line chart using JSON data使用 JSON 数据绘制 Highchart 多系列折线图
【发布时间】：2017-07-25 03:42:10
【问题描述】：

我尝试使用 JSON 数据绘制 JSON 数据。JSFiddle 下面是我在 JavaScript 中的 JSON 数据。

var JSON = [
{ name:"Maintenance",
  data:[[2017-06-26,1.5],
          [2017-07-03,5.2],
          [2017-07-10,1.65],
          [2017-07-17,2.5],
          [2017-07-24,1.5]
  ] 
},
{ name:"Others",
  data:[[2017-06-26,1.5],
          [2017-07-03,1.5],
          [2017-07-10,1.5],
          [2017-07-17,1.25],
          [2017-07-24,1.5]
  ] 
},
{ name:"Project",
  data:[[2017-06-26,6.5],
          [2017-07-03,6.1],
          [2017-07-10,6.7],
          [2017-07-17,7],
          [2017-07-24,6.5]
  ] 
},
{ name:"Training",
  data:[[2017-06-26,0],
          [2017-07-03,0.75],
          [2017-07-10,1.9],
          [2017-07-17,0.5],
          [2017-07-24,1]
  ] 
},
{ name:"Day-Off",
  data:[[2017-06-26,0],
          [2017-07-03,0],
          [2017-07-10,0],
          [2017-07-17,0],
          [2017-07-24,1]
  ] 
}]

但是，图表看起来很奇怪。对于每个系列，都有一条连接起点和终点的附加线。另外，x轴的值不是我想要的日期。

//Draw chart
Highcharts.chart('trend_bl', {

title: {
    text: 'Trend by Business Lines'
},
yAxis: {
    title: {
        text: ' Resource Allocation'
    }
},
legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
},

series : JSON,
});

谁能告诉我为什么会这样？另外，我也想知道Highchart中折线图和饼图正确的JSON数据结构。

【问题讨论】：

正确的 JSFiddle 应该是这个链接。 jsfiddle.net/Wreck/votky05e/28

标签： javascript json highcharts linechart

【解决方案1】：

JSON 中的日期应该是字符串。该日期应转换为毫秒。

var JSON = [{
  name: "Maintenance",
  data: [
    ['2017-06-26', 1.5],
    ['2017-07-03', 5.2],
    ['2017-07-10', 1.65],
    ['2017-07-17', 2.5],
    ['2017-07-24', 1.5]
  ]
}, {
  name: "Others",
  data: [
    ['2017-06-26', 1.5],
    ['2017-07-03', 1.5],
    ['2017-07-10', 1.5],
    ['2017-07-17', 1.25],
    ['2017-07-24', 1.5]
  ]
}, {
  name: "Project",
  data: [
    ['2017-06-26', 6.5],
    ['2017-07-03', 6.1],
    ['2017-07-10', 6.7],
    ['2017-07-17', 7],
    ['2017-07-24', 6.5]
  ]
}, {
  name: "Training",
  data: [
    ['2017-06-26', 0],
    ['2017-07-03', 0.75],
    ['2017-07-10', 1.9],
    ['2017-07-17', 0.5],
    ['2017-07-24', 1]
  ]
}, {
  name: "Day-Off",
  data: [
    ['2017-06-26', 0],
    ['2017-07-03', 0],
    ['2017-07-10', 0],
    ['2017-07-17', 0],
    ['2017-07-24', 1]
  ]
}];
//updating jsons date to millisecond
Object.keys(JSON).map(function(key, index) {
  JSON[key].data.map(function(value, keys, index) {
    JSON[key].data[keys][0]=new Date(value[0]).getTime()
  })
});
//console.log(JSON)

Fiddle Demo

【讨论】：

【解决方案2】：

首先，您在演示中犯了一个错误。而不是data: JSON，它应该是series: JSON。其次，将日期放在字符串中，否则它们将被视为数字（例如 2017 - 06 - 26 = 1985）。

示例：
http://jsfiddle.net/3yumsp8m/

【讨论】：