Highchart mit externem CSV $ .get - Kein xAchse Datum

Question

Ich versuche, ein Spline-Diagramm mit dieser CSV zu erstellen:

slave_id,date,time,rtc_temp,temp1,temp2,temp3 
1,2017/12/26,16:42:59,21,11.50,13.13,5.88 
2,2017/12/26,16:43:29,21,14.13,20.63,99.99 
1,2017/12/26,16:44:00,21,11.50,13.13,5.88 
2,2017/12/26,16:44:30,21,14.13,20.63,99.99 
1,2017/12/26,16:45:01,21,11.50,13.13,5.88 
2,2017/12/26,16:45:31,21,14.13,20.63,99.99 
1,2017/12/26,16:46:02,21,11.50,13.13,5.88 
2,2017/12/26,16:46:32,21,14.13,20.63,99.99 

Wie Sie here [IMAGE] sehen können, die grafische Darstellung von Datum und Uhrzeit angezeigt wird, aber Die X-Achse akzeptiert das Datum/die Uhrzeit nicht.

Ive versucht mit date.UTC, aber das hat auch nicht funktioniert. Kann mir jemand in die richtige Richtung zeigen?

https://jsfiddle.net/asvoy6b9/ [funktioniert nicht wegen CSV fehlenden]

Full code [Hastebin]

Answer 1

Ich sehe, dass date Variable in Ihrem Code eine Zeichenfolge ist:

  // all data lines start with a double quote 
      line = line.split(','); 
      date = line[1] + " " + line[2]; 

      (...) 

       RTC.push([ 
        date, 
        parseInt(line[3], 10) 
       ]); 

Wenn Sie den Punkt und den Möglichkeiten zu konstruieren, wie ein Array von zwei Werten und der erste Wert ist eine Zeichenkette, dann wird sie als ihre name Eigenschaft behandelt (nicht x).

Erklärung: https://www.highcharts.com/docs/chart-concepts/series

In diesem Fall Highcharts nachfolgenden ganzen Zahlen als x-Werte für alle Punkte zuweist (das ist, warum es sind Werte wie 00:00:00.000 (1. Januar 1970), 00:00:00.001 etc.).

Sie müssen Ihr Datum zu Zeitstempel analysieren. Sie können dazu Date.UTC() (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC) oder eine andere Funktion verwenden.

Answer 2

Ich habe es geschafft, es zum Laufen zu bringen mit Date.UTC mit dem folgenden Code:

var yyyymmdd = line[2].split("-"); //Split the date: 2017 12 16 
var hhmmss = line[3].split(":"); //Split the time: 16 11 14 
var date = Date.UTC(yyyymmdd[0], yyyymmdd[1] - 1, yyyymmdd[2], hhmmss[0], hhmmss[1], hhmmss[2]); //Stitch 'em together using Date.UTC