使用Flot jQuery插件显示具有正确时区的工具提示
在图中显示xaxis标签时，我对Flot插件有一点问题。 他们是'mode: "time"' 。 目前我使用Flot和工具提示function，工具提示包含日期和时间。 我向包含时间戳的插件提供JSON。 然后我转换时间戳，然后在工具提示中显示它。 问题是，在图表中显示数据时，由于时区之间的差异，工具提示的时间与插件生成的xaxis标签不对应。 我的JSON时间戳是+2 GMT，但Flot中的xaxis标签是+0 GMT。 所以我想知道是否有可能设置时区或类似的偏移量。
我的JSON （由AJAX生成）
[1300087800000,29], [1300088700000,39], [1300089600000,46], [1300090500000,53], [1300091400000,68], [1300092300000,95], ...
我的工具提示function
$(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不起作用，我仍然在xaxis和工具提示之间存在差异。
你有什么想法我应该如何解决我的问题？
您可以尝试使用timezone而不是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
如果查看flot问题数据库，则会发出141地址时区。 问题484表明您使用的语法已合并到此问题中。
文件说：
通常，您希望根据特定时区（通常是生成数据的时区）显示时间戳。 但是，Flot始终根据UTC显示时间戳。 它必须作为核心Javascript的唯一替代方案是根据访问者所在的时区来解释时间戳，这意味着滴答将随着每个访问者的时区和夏令时不可预测地改变。
因此，鉴于Javascript中没有对自定义时区的良好支持，您将不得不照顾此服务器端。
因此，正确的解决方案是使您的数据看起来像UTC服务器端（即使它不是）。 如果您无法更改数据源，则可能需要考虑代理它。 服务器端语言应该允许时区操作。
或者，按照问题141查看补丁或插件。
对于UTC timeStamps，使用UTC时间函数：
var hour = currDate.getUTCHours(); // instead of getHours() var minute = String("") + currDate.getUTCMinutes(); // instead of getMinutes()
并删除xaxis时区。