使用JSON數據繪製Highchart多個系列折線圖

我試圖使用JSON數據繪製JSON數據。 JSFiddle 以下是我在JavaScript中使用的JSON數據。使用JSON數據繪製Highchart多個系列折線圖

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數據結構。

來源

2017-07-25 J.He

正確的jsfiddle應該是此鏈接。 http://jsfiddle.net/Wreck/votky05e/28/ –

您在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

來源

2017-07-25 07:44:05