Question

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

我目前有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网址为一张图取回的内容。

[{“label”：“24 Hour Overview”，“data”：[[1343283113000，“111”]，[1343286597000，“111”]，[1343290220000，“111”]，[1343293802000，“111” ]，[1343297377000，“111”]，[1343300843000，“111”]，[1343304504000，“111”]，[1343308105000，“111”]，[1343311724000，“111”]，[1343315331000，“111”]， [1343322489000， “111”]，[1343326080000， “111”]，[1343329669000， “111”]，[1343333296000， “111”]，[1343336882000， “111”]，[1343340493000， “111”]，[1343344094000 ， “111”]，[1343347683000， “111”]，[1343351299000， “111”]，[1343355015000， “111”]，[1343358535000， “112”]，[1343362132000， “112”]，[1343365704000” 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;
                }
            });

Answer 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/

Answer 2

Flot对x轴有timezone: "browser"选项。设置此选项会导致日期格式化为本地浏览器时间。要在图表悬停上打印日期，请使用Date.toLocalTimeString

Answer 3

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

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

UTC Woes，Flot X Axis Time Wrong

3 个答案: