jquery - 使用 Flot jQuery 插件显示带有正确时区的工具提示

Question

在图表中显示 xaxis 标签时，我在使用 Flot 插件时遇到了一些问题。它们是'模式:“时间”'。目前我将 Flot 与工具提示功能一起使用，工具提示包含日期和时间。我向包含时间戳的插件提供 JSON。然后，我转换时间戳并将其显示在工具提示中。问题是，在图表中显示数据时，由于时区之间的差异，工具提示中的时间与插件生成的 xaxis 标签不对应。我的 JSON 时间戳是 +2 GMT，但 Flot 中的 xaxis 标签是 +0 GMT。所以我想知道是否有可能设置时区的偏移量或类似的东西。

我的 JSON(由 AJAX 生成)

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

我的工具提示功能

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

float 选项

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

但不幸的是 timeZoneOffset 不起作用，我在 xaxis 和工具提示之间仍然存在差异。

您对我应该如何解决我的问题有什么想法吗？

Answer 1

您可以尝试使用时区而不是timeZoneOffset。您的选项如下所示:

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

我的flot版本是0.7