使用 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);
 });  

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

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

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

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

Answer 2

如果您查看 flot 问题数据库，就会发现问题 141 解决了时区问题。 问题 484 建议您使用的语法已合并到此问题中。

文档指出：

通常你希望时间戳按照
特定时区，通常是数据所在的时区
产生的。但是，Flot 始终根据 UTC 显示时间戳。
它必须这样做，因为核心 Javascript 的唯一替代方案是解释
根据访问者所在时区的时间戳，
这意味着刻度会随着时区的变化而不可预测地变化
以及每个访客的夏令时。

因此，鉴于对自定义时区没有良好的支持
Javascript，你必须处理这个服务器端。

因此，正确的解决方案是让您的数据看起来像 UTC 服务器端（即使不是）。如果您无法更改数据源，您可能需要考虑代理它。服务器端语言应该允许时区操作。

或者按照问题 141 并注意补丁或插件。

Answer 3

对于 UTC 时间戳，请使用 UTC 时间函数：

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

并删除 xaxis 时区。