QuickInfo mit der korrekten Zeitzone mit Flot-jQuery-plugin

Ich habe ein kleines problem mit der Flot-plugin bei der Anzeige die x-Achse-Beschriftungen in der Grafik. Sie sind 'mode: "time"'. Ich verwende derzeit Flot mit den tooltip-Funktion und die QuickInfo enthält ein Datum und eine Uhrzeit.
Ich liefere JSON, um das plugin enthält Zeitstempel. Danach habe ich konvertieren des Zeitstempels und ich die Anzeige im tooltip. Das problem ist, dass während der Anzeige der Daten in den Graphen werden die Zeiten aus den tooltips entsprechen nicht der x-Achse labels generiert das plugin aufgrund eines Unterschieds zwischen den Zeitzonen. Meine JSON-Zeitstempel +2 GMT, aber die x-Achse-Beschriftungen die im Flot + /- 0 Uhr GMT. So Frage ich mich, ob es eine Möglichkeit gibt einen offset einstellen, um die Zeitzone oder etwas ähnliches.

Mein JSON (erzeugt durch AJAX)

 [1300087800000,29],
 [1300088700000,39],
 [1300089600000,46],
 [1300090500000,53],
 [1300091400000,68],
 [1300092300000,95],
 ...

Mein tooltip-Funktion 

$(placeholder).bind("plothover", function (event, pos, item) {
     $("#tooltip").remove();

     var x = item.datapoint[0].toFixed(2);
     var y = item.datapoint[1].toFixed(2);

     var currDate   = new Date(Math.floor(x));
     var hour       = currDate.getHours();
     var minute     = String("") + currDate.getMinutes();

     var tooltip = hour + ":" +
                   ((minute.length < 2) ? "0" + minute : minute) + " " +
                   (Math.round(y * 100)/100) + "Wh"
     showTooltip(item.pageX, item.pageY, tooltip);
 });

Die Flot-Optionen 

 var plotOptions = {  
     lines:  { show: true, lineWidth: 1 },  
     points: { show: false, symbol: "cross" },  
     xaxis:  {  
         mode:   "time",  
         tickLength: 5,  
         timeZoneOffset: (new Date()).getTimezoneOffset()  
     },  
     selection: { mode: "x", color: "#BCBCBC" },
     grid:      { hoverable: true, clickable: false }
};

aber leider timeZoneOffset funktioniert nicht und ich habe immer noch Unterschiede zwischen der x-Achse und die tooltips.

Haben Sie irgendwelche Ideen, wie ich das beheben mein problem?

InformationsquelleAutor der Frage Vlad | 2011-04-14

  1. 20

    Können Sie versuchen, Zeitzone statt timeZoneOffset. deine Optionen Aussehen:

    var plotOptions = {  
     lines:  { show: true, lineWidth: 1 },  
     points: { show: false, symbol: "cross" },  
     xaxis:  {  
          mode:   "time",  
          tickLength: 5,  
          timezone: "browser" //"browser" for local to the client or timezone for timezone-js  
          },  
    selection: { mode: "x", color: "#BCBCBC" },
    grid:      { hoverable: true, clickable: false }
    };

    Meine flot version 0.7

    InformationsquelleAutor der Antwort Ken Block

  2. 4

    Wenn man sich die flot-Problem-Datenbank, Ausgabe 141 Adressen Zeitzonen. Frage 484 was auf die syntax, die Sie verwenden zusammengeführt wurde dieses Problem.

    Den Dokumentation sagt:

    Normalerweise will man die Zeitstempel angezeigt werden, nach einem
    bestimmte Zeit-zone, in der Regel die Zeitzone, in der die Daten hat
    produziert. Allerdings Flot zeigt immer Zeitstempel nach UTC.
    Es hat sich als die einzige alternative mit core-Javascript zu interpretieren
    die Zeiten entsprechend der Zeitzone, die der Besucher ist in
    was bedeutet, dass die Zecken werden sich verschieben, und unvorhersehbar mit der Zeitzone
    und die Sommerzeit jedes Besuchers.

    So, dass es keine gute Unterstützung für benutzerdefinierte Zeitzonen in der
    Javascript, müssen Sie darauf achten, dieses server-Seite.

    So die richtige Lösung ist, um Ihre Daten Aussehen wie UTC-server-Seite (auch wenn es nicht). Wenn Sie nicht ändern Sie Ihre Datenquelle aus, die Sie betrachten wünschen können, proxying. Server-side-Sprachen ermöglichen sollte, Zeitzone manipulation.

    Alternativ Folgen Sie Ausgabe 141 und beobachten Sie für patches oder plugins.

    InformationsquelleAutor der Antwort justkt

  3. 0

    für UTC-Zeitstempel, verwenden Sie UTC-Zeit Funktionen:

    var hour = currDate.getUTCHours();  //instead of getHours()
var minute = String("") + currDate.getUTCMinutes(); //instead of getMinutes()

    entfernen und in x-Richtung timezone.

    InformationsquelleAutor der Antwort Atara

Schreibe einen Kommentar