UTC 问题，Flot X 轴时间错误答案

【问题标题】：UTC Woes, Flot X Axis Time WrongUTC 问题，Flot X 轴时间错误
【发布时间】：2012-07-27 04:56:14
【问题描述】：

所以我已经阅读了大多数搜索结果，以及讨论组中关于 flot 的档案......不确定我能在这里做什么，因为我认为我不完全理解这个问题......

我目前在每日和每周快照图上都显示了带有 unix 时间戳的数据。显示每日图表选项...

            $.ajax({
                url: "/whats/encode_daily_graph.php?itemid=<?php echo $_GET['item']?>",
                method: 'GET',
                dataType: 'json',
                success: onOutboundReceived
            });
            function onOutboundReceived(series) {
                var length = series.length;
                var finalData = series;
                var options = {
                    lines: { show: true },
                    legend: { show : false },
                    points: { show: true, hoverable:true },
                    grid: { hoverable: true, clickable: true },
                    xaxis: { mode : "time", timeformat : "%H:%M" },
                    yaxis: { minTickSize: "1", tickDecimals : "0" }
                };
                $.plot($(".graph_daily"), finalData, options);
            }

所以很多线程（以及文档）提到我应该“假装数据是 UTC”。好吧，就我而言，由于我的数据都记录在 PST (UTC-8) 中，我应该将 8*3600*1000 添加到我传递到图表中的数据中，对吧？出于某种原因，减去或添加这个偏移量都没有达到我的预期 - 比例变为完全不合理的东西。所以我可能误解了手头的整个问题。

任何人都可以提供有关此问题的任何见解吗？感谢您的宝贵时间！

编辑：这是 AJAX url 为一张图取回的内容。

[{"label":"24 小时概览","data":[[1343283113000,"111"],[1343286597000,"111"], [1343290220000,"111"],[1343293802000,"111" ],[1343297377000,"111"],[1343300843000,"111"], [1343304504000,"111"],[1343308105000,"111"],[1343311724000,"111"],[134331]],331000,"111" [1343322489000,"111"],[1343326080000,"111"],[1343329669000,"111"],[1343333296000,"111"],[1343336882000,"111"],[1343340493400,"11014040"][ ,"111"],[1343347683000,"111"],[1343351299000,"111"],[1343355015000,"111"],[1343358535000,"112"],[1343362132000,"112"],[134336570400 112"]],"颜色":"#FFAA42"}]

这是它在图表上的样子。注意我有一个工具提示，它使用 Javascript 的 Date 来构造一个 Date 对象，这样我就可以轻松地获取 json 数据的小时和分钟，这与轴不匹配。 http://i.imgur.com/Jwsyd.png

工具提示的呈现方式：

            var previousPoint = null;
            $(".graph_daily").bind("plothover", function (event,pos,item){
                if (item) {
                    if (previousPoint != item.dataIndex) {
                        previousPoint = item.dataIndex;

                        $("#graph_info").remove();
                        var x = item.datapoint[0].toFixed(2), y = item.datapoint[1].toFixed(2);
                        var date = new Date(item.datapoint[0]);
                        var hour = date.getHours();
                        var min = date.getMinutes();
                        var msg = hour + ":" + min + ", " + y;
                        if (min < 10) msg = hour + ":" + "0" +  min + ", " + y;
                        showToolTip(item.pageX, item.pageY, msg);
                    }
                }
                else{
                    $("#graph_info").remove();
                    previousPoint = null;
                }
            });

【问题讨论】：

添加来自 ajax 调用的数据。
你提供的时间是unix时间戳？？？？
在回答之前让我澄清一下...如果是对的，最后一个应该是 5:08 但显示为 22:08????
既然你提到了它......是的。那么这一定是显示的工具提示时间如何转换的问题......但是，如果可能的话，我想在 PST 中显示所有内容。
通过将 {8*3600*1000} 替换为 {7*3600*1000} 来检查

标签： javascript jquery flot utc

【解决方案1】：

您需要做的就是更改工具提示代码以正确添加时区偏移：

       var x = item.datapoint[0],
           y = item.datapoint[1].toFixed(2);
       var date = new Date(x + (7 * 60 * 60 * 1000));

之后，您的图形轴和工具提示对我来说正确排列。您可能会发现让您的图表适用于其他时区的人稍微复杂一些 - 您希望将原始 JSON 数据移动到 UTC（即，如果它记录在 PDT 中，请在发送到浏览器之前添加它）。然后当你去创建工具提示时，而不是偏移 7*60*60*1000，你会这样偏移：

        var userTZ = new Date();//user = the viewers browser
        userTZ = userTZ.getTimezoneOffset()*60*1000;
        var dt = new Date(x+userTZ);

这里的工作原理与更简单的示例一样：http://jsfiddle.net/ryleyb/4uuPZ/

【讨论】：

对于工具提示，我实际上最终只是做了 getUTCHours() 最终得到同样的事情？我认为。我将尝试您的方法来抵消数据并在适当的本地时区呈现它。谢谢！
Flot 真的应该有一个标志，用于日期时间的 UTC 或本地化呈现恕我直言。将日期作为 UTC 存储在服务器上是唯一合理的表示。但根据我读过的列表流量，我认为你不会说服 flot 维护者。 :-(

【解决方案2】：

Flot 有一个用于 x 轴的 timezone: "browser" 选项。设置此项将导致日期以本地浏览器时间格式化。要打印出情节悬停的日期，请使用Date.toLocalTimeString

【讨论】：

【解决方案3】：

我建议您在 php.ini 中使用以下内容。输出在 JS 中也会给出相同的结果

 $hour=mktime($h+1,$i,$s,$m,$d,$y)*1000;

【讨论】：