Hohe Charts: Zwei Linien statt einer

ich zeigen, arbeite mit highcharts.jsHohe Charts: Zwei Linien statt einer

Das Problem ist, während eine Grafik zu schaffen seine mir zwei Linien statt eine zeigt.

Es sollte nur zeigen mir eine Zeile, weil es die Grafik zwischen 2 Werte , die (Zeitstempel und Wert) sind.

Können Sie bitte überprüfen, warum die mich zwei Linien statt einem zeigt und wie kann ich dieses Problem beheben:

(Just den Code kopieren und in eine Datei einfügen und es sollte funktionieren).

<!DOCTYPE html> 
<html> 

<head> 

<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.highcharts.com/highcharts.js"></script> 

</head> 

<body style="background:#212224;"> 

<div id="container" style="max-width: 1666px; margin: 0 auto"></div> 

<script type="text/javascript"> 

    $.getJSON('https://dl.dropboxusercontent.com/u/76618626/data4.json', function (data) { 
     console.log("data size is : "); 
     console.log(data);  

     var data3 = []; 

        $.each(data.data,function(i,d){ 
        console.log(new Date(d.timestamp).getTime(), d.value); 

         data3.push([new Date(d.timestamp).getTime(),d.value]); 

        }); 

        console.log("Data 3 is :"); 
        console.log(data3); 
        var data4 = []; 
        Highcharts.each(data3, function(p, i) { 
         if (typeof p[0] !== 'number' || typeof p[1] !== 'number') { 
          console.log('Invalid data is :') 
          console.log(p); 
         } else { 
          data4.push(p); 
         } 
        }); 



     $('#container').highcharts({ 

      chart: { 
      backgroundColor: '#000000', 
       }, 

      title: { 
       text: 'Test Graph', 
       style: { 
       color: '#FFFFFF', 
       fontWeight: 'bold' 
       } 
      }, 
      xAxis: { 
       type: 'datetime', 
       title: { 
        text: 'Time Stamp' 
       }, 
       gridLineColor: 'grey', 
       gridLineWidth: 1, 
       lineWidth:1 

      }, 
      yAxis: { 
       title: { 
        text: 'Value' 
       }, 
       gridLineColor: 'grey', 
       gridLineWidth: 1, 
       lineWidth:1 
      }, 
      legend: { 
       enabled: true 
      }, 

      exporting: false, 



      plotOptions: { 
       line: {     
        lineColor: 'red', 
        fillOpacity: 1,      
        lineWidth: 2, 
        states: { 
         hover: { 
          lineWidth: 2 
         } 
        }, 
        threshold: null, 
        marker: { 
         fillColor: '#e57255' 
         } 


       }, 


      }, 


      series: [{ 
       type: 'line', 
       name: 'test', 
       data: data4 
      }] 
     }); 
    }); 

</script> 
</body> 
</html>

Quelle

2016-07-11 Simon

Ok .... ich habe das Problem hier gefunden .... die Daten von JSON sind komisch ... der Wert der Zeitstempel geht zurück .... nach dem 6. Juli ... es gibt Ich vorherige Daten wie 4. Juli .... gibt es eine Möglichkeit, die Daten in Bezug auf die Zeitstempel Daten zu sortieren ....? – Simon

Die Daten sind wieder rund. Es könnte sein, dass es 2 Zeilen geben sollte, du wählst entweder Serien aus. –

Ich habe Ihren Code in jsFiddle umgeschrieben. Es ist eigentlich ein einzelnes Liniendiagramm.

Überprüfen Sie den Ausdruck bei console.log(new Date(d.timestamp).toString(), d.value);.

Die Zeitstempel Ihrer Daten beginnen bei Tue Jul 05 2016 03:00:00, erhöhen sich auf Thu Jul 07 2016 03:00:00 und beginnen wieder bei Jul 05 2016 03:00:00.

Aus diesem Grund erscheint Ihr Diagramm wie ein zweizeiliges Diagramm. Der untere Teil der Linie wird mit der oberen Linie verbunden.

Aktualisieren Sie einfach Ihre Daten JSON und Sie werden gut sein.

Edited:

aktualisieren meine fiddle Zeitstempel .sort() mit zu gestalten.

Quelle

2016-07-11 06:57:35

Ich möchte keine Daten aktualisieren .... Gibt es eine Möglichkeit, die Daten in Bezug auf die Zeitstempel zu sortieren? Ich habe ein Array von data4 erstellt, wenn Sie meinen Code sehen ... gibt es eine Möglichkeit, das Array von data3 zu sortieren und in data4 zu platzieren? – Simon

@Simon Meine Antwort zum Sortieren des Zeitstempels wurde aktualisiert. –

Danke Wilts .... die Grafik sieht jetzt wirklich komisch nach dem Sortieren ... lol. Sind Sie sicher, dass alles perfekt funktioniert ... (nur ein Gedanke). – Simon

Antwort

Verwandte Themen