1

所以我已经阅读了大多数搜索结果，以及讨论组中关于 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"],[1343315331432,"111820"][ "111"],[1343326080000,"111"],[1343329669000,"111"],[1343333296000,"111"],[1343336882000,"111"],[1343340493000,"111"],[1311344094000," "],[1343347683000,"111"],[1343351299000,"111"],[1343355015000,"111"],[1343358535000,"112"],[1343362132000,"112"],[13433366704000,"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;
                }
            });
4

3 回答 3

4

All you need to do is change your tooltip code to correctly add the timezone offset:

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

After that your graph axes and tooltips line up correctly for me. You may find that making your graph work for people in other timezones is slightly more complicated - you would want to move your raw JSON data to UTC (i.e. if it's recorded in PDT, add that before sending to the browser). Then when you go to create the tooltip, instead of offsetting by 7*60*60*1000, you would offset by this:

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

Here it is working as in the simpler example: http://jsfiddle.net/ryleyb/4uuPZ/

于 2012-07-27T16:01:12.980 回答
1

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

于 2015-10-08T14:06:39.157 回答
0

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

 $hour=mktime($h+1,$i,$s,$m,$d,$y)*1000;
于 2012-07-27T06:35:49.087 回答