代码之家 › 专栏 › 技术社区 › geogaddi

UTC Woes,Flot X轴时间错误

utc flot jquery javascript

geogaddi · 技术社区 · 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为一张图获取的内容。

[{“标签”:“24小时概览”,“数据”:[[1343283113000,“111”],[1343286597000,“111“],[13429220000,“111,”],[1343293802000,“111)],[11343297377000,“111。,[13433329669000,“111”],[13433333296000,“111“],[143336882000,“111,],[13340493000,“11”],【1343344094000,“111”】,【1343347683000,“111“】,【134 3351299000,”111“】、【1343355015000,”111”】、【134 3358535000,”112“】、“1343362132000,”112”]、【1343365704000,“112”】、“color”:“#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;
                }
            });

3 回复 | 直到 14 年前

Ryley 14 年前

您只需更改工具提示代码即可正确添加时区偏移:

       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/

Ganesh Babu 10 年前

Flot有一个 timezone: "browser" 选项。设置此选项将导致日期以本地浏览器时间进行格式化。要打印打印日期,请悬停使用 Date.toLocalTimeString

thecodejack 14 年前

我建议您在php中使用以下内容。JS中的输出也将相同

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