使用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