Plot Highchart Mehrfachserien-Liniendiagramm mit JSON-Daten

Question

Ich habe versucht, JSON-Daten mit JSON-Daten zu plotten. JSFiddle Unten sind meine JSON-Daten in JavaScript.

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] 
    ] 
}] 

Allerdings sieht das Diagramm seltsam aus. Für jede Serie gibt es eine zusätzliche Linie, die den Startpunkt und den Endpunkt verbindet. Außerdem ist der X-Achsenwert nicht das Datum, das ich möchte.

//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, 
}); 

Kann mir jemand sagen, warum das passieren würde? Außerdem würde ich gerne die richtige JSON-Datenstruktur für Liniendiagramm und Tortendiagramm in Highchart kennen.

Answer 1

Ihr Datum in JSON sollte Zeichenfolge sein. Dieses Datum sollte in Millisekunden konvertiert werden.

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

Answer 2

Zunächst einmal haben Sie einen Fehler in Ihrer Demo gemacht. Anstelle von data: JSON sollte es series: JSON sein. Zweitens, setzen Sie Ihre Daten in Strings, sonst werden sie als Zahlen behandelt (z. B. 2017 - 06 - 26 = 1985).

Beispiel:
http://jsfiddle.net/3yumsp8m/