UTC出現問題，Flot X軸時間錯誤

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小時總覽”，“ 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“] ]，“ 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;
                }
            });

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;