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を追加するだけですよね？何らかの理由で、このオフセットを減算も加算も、私が期待することは何もしません-スケールは完全に不合理なものに変わります。ですから、私はおそらく目前の質問全体を誤解しているでしょう。

誰かがこの問題について何か洞察を提供できますか？御時間ありがとうございます！

編集：AJAXURLが1つのグラフに対して取得するものは次のとおりです。

[{"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;
                }
            });
4

3 に答える 3

4

ツールチップコードを変更して、タイムゾーンオフセットを正しく追加するだけです。

       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/

于 2012-07-27T16:01:12.980 に答える
1

Flotにはtimezone: "browser"x軸のオプションがあります。これを設定すると、日付はローカルブラウザ時間でフォーマットされます。プロットホバーで日付を印刷するには、Date.toLocalTimeStringを使用します

于 2015-10-08T14:06:39.157 に答える
0

PHPで以下を使用することをお勧めします。出力はJSでも同じになります

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