Wyświetlaj podpowiedź z poprawną strefą czasową za pomocą wtyczki FlQ jQuery

Question

Mam mały problem z wtyczką Flot podczas wyświetlania etykiet xaxis na wykresie. Są to: 'mode: "time"'. Obecnie używam Flota z funkcją podpowiedzi, a etykieta narzędzia zawiera datę i godzinę. Dostarczam JSON do wtyczki zawierającej znaczniki czasu. Następnie konwertuję znacznik czasu i wyświetlam go w etykiecie narzędzia. Problem polega na tym, że podczas wyświetlania danych na wykresie czasy z etykietek narzędzi nie odpowiadają etykietom xaxis wygenerowanym przez wtyczkę z powodu różnicy między strefami czasowymi. Moje znaczniki czasu JSON wynoszą +2 GMT, ale etykiety xaxis w Flot wynoszą +0 GMT. Zastanawiam się więc, czy istnieje możliwość ustawienia przesunięcia względem strefy czasowej lub czegoś podobnego.

Moje JSON (generowane przez AJAX)

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

Moja funkcja podpowiedzi

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

opcjach Flot

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

ale niestety timeZoneOffset nie działa i nadal mam różnice między xaxis a etykietami narzędzi.

Czy masz jakieś pomysły na rozwiązanie mojego problemu?

Answer 1

Jeśli spojrzysz na bazę danych problemów z flotą, adresy stref czasowych zostaną zmienione na issue 141. Issue 484 sugeruje, że używana składnia została scalona w tym wydaniu.

The documentation mówi:

Normalnie chcesz znaczniki czasowe mają być wyświetlane według danej strefy czasowej, zwykle strefy czasowej, w której dane zostały wyprodukowany. Jednak Flot zawsze wyświetla znaczniki czasu według UTC. Musi to być jedyną alternatywą z rdzeniem Javascript jest interpretacja znaczników czasu zgodnie ze strefą czasową, w której przebywa odwiedzający, co oznacza, że ​​znaczniki przesuną się w nieprzewidziany sposób wraz ze strefą czasową i oszczędności czasu dziennego każdego odwiedzającego.

Biorąc pod uwagę, że nie ma dobrego wsparcia dla niestandardowych stref czasowych w Javascript, musisz dbać o to po stronie serwera.

Prawidłowe rozwiązanie polega na tym, aby dane wyglądały tak jak serwer UTC po stronie serwera UTC (nawet jeśli nie jest on dostępny). Jeśli nie możesz zmienić swojego źródła danych, możesz rozważyć jego proxy. Języki po stronie serwera powinny umożliwiać manipulowanie strefą czasową.

Można też skorzystać z wydania 141 i obejrzeć poprawki lub wtyczki.

Answer 2

Możesz spróbować użyć strefy czasowej zamiast opcji TimeZoneOffset. Twoje opcje wyglądają następująco:

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

Moja wersja flotowana to 0.7

Answer 3

dla znaczników czasu UTC, stosowanie UTC funkcje czasowe:

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

i usuwają OśX strefę czasową.