2

私はFlotr2にかなり慣れておらず、いくつかの単純な線グラフを作成しています。それは十分に単純で非常にクールです。ただし、x軸としてタイムスタンプ（月日年と時刻）を入力する必要があります。私は自分のデータベースから時間を取得しているので、それはphpコードであり、次のようにデータをエコーアウトしています。

while($stmt11->fetch()){
                echo " [" . $date_of_completion . ", " . $score . "]";
                echo ",";
                $i++;
                $total_score += $score;
            }
            echo "];";

そして、xaxisのモードを「時間」にし、「日付」を試しましたが、機能しません。それは2001年から2002年の間にすべてを置き続けますが、これは完全に間違っているので、私が与えたデータをどう処理するかがわからないと思います。他の誰かがこの問題に遭遇しましたか？私は彼らが時間通りに与える例を見てきましたが、それは私には意味がありません。

どんな助けでも本当にありがたいです。ありがとう

編集OKここにもう少しコードがあります。これはまさに、PHPからデータを取得し、flotr2が必要とする形式に変換するために私が行っていることです。

if(!($stmt11 = $mysqliprivate->prepare("SELECT date_of_completion, score FROM ". $shs . " WHERE id = ? ORDER BY date_of_completion ASC"))){
            echo "Prepare Failed: (" . $mysqliprivate->errno . ") " . $mysqliprivate->error;
        }
        else{
            $total_score = 0;
            $stmt11->bind_param("s", $id);
            $stmt11->execute();
            $stmt11->bind_result($date_of_completion, $score);
            $time = time();

            echo "var dataset = [";
            $i = 0;
            while($stmt11->fetch()){
                $date = date("U", strtotime($date_of_completion));
                echo " [" . $date . ", " . $score . "]";
                echo ",";
                $i++;
            }
            echo "];";
            $stmt11->close();
        }

そして、これが私が実行しているjavascriptです：

graph = Flotr.draw(container, [ 
            { data : dataset, label : 'Historical Patient Scores', lines:{show:true}, points: {show:true}}
            ], {
            xaxis: {
                minorTickFreq: 4,
                title : 'Date of Completion',
                tickDecimals: 0,
                noTicks: 10,
                mode : 'time',
                timeformat : '%y/%m/%d'
            }, 
            yaxis : {
                max : 30,
                title : 'Score',
                tickDecimals:0,
                min: 0
            },
            grid: {
                minorVerticalLines: true

            },
            legend : {
                position : 'nw'
            },
            mouse: {
                track: true,
                relative:true,
                trackDecimals:0,
                sensibility: 5
            }
        });
    })(document.getElementById("editor-render-0"));
4

3 に答える 3

3

モードにはtime時間値が必要なので、日付をミリ秒単位のエポック時間に変換します。日付をエポック時間に変換する方法については、 http：//php.net/manual/en/function.date.phpを参照してください。また、phpは秒を使用することを忘れないでください（JavaScriptやFlotr2のようなmsではありません）。timeformatまた、x軸のを次のような特定の形式に設定する必要があります。%m/%d/%y

エポックタイムを過ぎた後：

         xaxis: {
            mode: "time",
            timeformat: "%m/%d/%y"
        },

これにより、時刻が日付形式のラベルに戻されます。

以下を使用できます。

  %h: hours
  %H: hours (left-padded with a zero)
  %M: minutes (left-padded with a zero)
  %S: seconds (left-padded with a zero)
  %d: day of month (1-31), use %0d for zero-padding
  %m: month (1-12), use %0m for zero-padding
  %y: year (four digits)
  %b: month name (customizable)
  %p: am/pm, additionally switches %h/%H to 12 hour instead of 24
  %P: AM/PM (uppercase version of %p)
于 2012-06-28T16:43:13.613 に答える
2

さて、@ Chaseの後、私はこれをしばらくの間機能させようとしていましたが、私はそれを手に入れたと思います。私は自分のtickFormatter関数を一緒にハックしました。本当に多くのドキュメントはありませんでしたが、いくつかの簡単なjavascriptの知識で十分でした。したがって、エポックタイムを取得するために、私はこれを実行しました。

                    echo "var dataset = [";
            $i = 0;
            while($stmt11->fetch()){
                            $temp = strtotime($date_of_completion);
                            echo " [" . $temp . ", " . $score . "]";
                echo ",";
                     }
            echo "];";
            $stmt11->close();

それから、それがただ狂った数字である代わりに適切に現れる時間を得るために、これは私が一緒にハックしたものです：

xaxis: {
                minorTickFreq: 4,
                title : 'Date of Completion',
                tickDecimals: 0,
                noTicks: 20,

                mode : 'time',
                labelsAngle : 45,
                tickFormatter: function(x){
                    var x = parseInt(x);
                    var myDate = new Date(x*1000);
                    var string = myDate.getFullYear();
                    string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
                    result = string;
                    return string;
                }


            },

次に、マウスオーバーで同じ結果を生成する場合は、このコードをマウスの中に入れます。

mouse: {
                track: true,
                relative:true,
                trackDecimals:0,
                sensibility: 5,
                trackFormatter: function(o){
                    var t = parseInt(o.x);
                    var myDate = new Date(t*1000);
                    var string = myDate.getFullYear();
                    string = string + "-" + myDate.getMonth() + "-" + myDate.getDate();
                    return string + ", " + o.y;
                }
            }

残りのjavascriptとphpはすべて、上部の元の質問と同じままです。

于 2012-06-29T19:50:55.980 に答える
1

ここでの問題は非常に単純です...組み込みのフォーマッタを使用するには、JavascriptでDateオブジェクトを渡す必要があります。このような...

var dataArray = [[new Date('08/16/2012 03:40:15.000'),21.8917228040536],
                 [new Date('08/16/2012 03:40:15.000'),21.8917228040536]]

最終的にレンダリングされたJavascriptを見て、手がかりを探してください。PHPコードでは、この問題は明確にされていません。

于 2012-11-07T16:25:42.227 に答える