Afficher l'info-bulle avec le fuseau horaire correct à l'aide du plugin Flot jQuery

J'ai un petit problème avec le Flot plug-in lors de l'affichage de la xaxis étiquettes dans le graphique. Ils sont 'mode: "time"'. Actuellement, je utiliser Flot avec l'info-bulle de la fonction et de l'info-bulle contenant une date et une heure.
Je approvisionnement en JSON pour le plugin qui contient les horodatages. Par la suite je convertir le timestamp et je l'affiche dans l'info-bulle. Le problème est que lors de l'affichage des données dans le graphe, le temps de les info-bulles ne correspondent pas à la xaxis les étiquettes générées par le plugin due à une différence entre les fuseaux horaires. Mon JSON horodatages sont +2 GMT, mais le xaxis étiquettes à Flot sont +0 GMT. Donc je me demande si il est possible de définir le décalage du fuseau horaire ou quelque chose de similaire.

Mon JSON (généré par AJAX)

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

Mon info-bulle de la fonction

$(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);
 });

Le Flot des options

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

mais malheureusement timeZoneOffset ne fonctionne pas et j'ai encore des différences entre les xaxis et les info-bulles.

Avez-vous des idées de comment je dois régler mon problème?

source d'informationauteur Vlad

  1. 20

    Vous pouvez essayer d'utiliser le fuseau horaire au lieu de timeZoneOffset. vos options de ressembler à:

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

    Mon flot version est de 0,7

  2. 4

    Si vous regardez le flot problème de base de données, numéro 141 adresses fuseaux horaires. Question 484 ce qui suggère la syntaxe que vous utilisez a été fusionnée dans ce sujet.

    La la documentation dit:

    Normalement, vous voulez les horodatages pour être affichés selon un
    certains de fuseau horaire, généralement le fuseau horaire dans lequel les données ont été
    produit. Cependant, le Flot affiche toujours les horodatages en fonction de l'heure UTC.
    Il a comme la seule alternative avec le langage Javascript de base est d'interpréter
    la date-heure en fonction du fuseau horaire que le visiteur est en,
    ce qui signifie que les tiques vont changer de façon imprévisible avec le fuseau horaire
    la lumière du jour et l'épargne de chaque visiteur.

    Alors, étant donné qu'il n'y a pas une bonne prise en charge personnalisée des fuseaux horaires en
    Javascript, vous aurez à prendre soin de ce côté serveur.

    Donc la bonne solution est de faire de vos données look comme UTC côté serveur (même si elle n'est pas). Si vous ne pouvez pas modifier votre source de données que vous souhaitez mai à envisager l'utilisation de proxy. Langages côté serveur devrait permettre fuseau horaire de manipulation.

    Sinon suivez problème 141 et regarder pour les patchs ou les plugins.

  3. 0

    pour les horodatages UTC, l'utilisation de l'heure UTC fonctions:

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

    et supprimer xaxis fuseau horaire.