6

一部のデータをプロットしようとして flot を使用しています。これを単一のデータセットで動作させましたが、複数のデータセットを使用するようにコードを変更しようとしたときに、追跡に苦労しているというエラーが発生し、動作が停止しました。それは私が行った変化だと確信していますが、私の人生ではそれを追跡することはできません.

Y 軸は、-1.0、-0.5、0、0.5、および 1.0 を示します。予想される値はほとんどなく、X 軸のデータはありません。グラフが空白になります。

StackOverflow のレピュテーション グラフに似たものを達成しようとしていますが、これは異なる数値を表します。ペアの最初の値はdataタイムスタンプ (正しく計算されていると思います) であり、dataペアの 2 番目の値はプロットされる値です。

私は自分の価値観を引用符で囲んでいないことを確認しました。これは、最も一般的な問題の 1 つであることがわかりました。

問題を指摘する際のフィードバックや支援をいただければ幸いです。

統計.js

function plotField(){
    var field = 'activeUsers,totalUsers';
    var url = '/api/consoleGet_stats?field='+field;
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            var i = 0;
            console.log(datasets);
            $.each(datasets, function(key, val){
                val.color=i;
                i++;

                var data = [ $(this) ];
                console.log(data);

                var options = {
                    lines: { show: true },
                    points: { show: true },
                    xaxis: {mode: 'time', timeformat: "%y/%m/%d", tickDecimals: 0, tickSize: 1 }
                };

                var placeholder = $("#placeholder");

                $.plot(placeholder, data, options);
            });
        }
    });   
}

consoleGet_stats.php

<?php
    //simplified for example purposes
    $fields=explode(",",$_REQUEST['field']);

    foreach ($fields as $field){
        $rows=$dbConnect->getRows('select date, ' .$field. ' from websiteStats order by id asc');
        $resultData = array('label' => $field);
        foreach($rows as $row){
            $t = strtotime($row['date']." UTC") * 1000;
            $resultData['data'][]=array($t, (int)$row[$field]);
        }
        $results[]=$resultData;
    }
    die(Json_encode($results));
?>

コンソール出力

[Object { label="activeUsers", data=[6]}, Object { label="totalUsers", data=[6]}]
[[Object { label="activeUsers", data=[6], color=0}]]
[[Object { label="totalUsers", data=[6], color=1}]]

firebug から返された json (この投稿用にフォーマットが追加されました)

[
    {"label":"activeUsers","data":[[1334583090000,26],[1334669491000,26],[1334755893000,26],[1334842290000,26],[1334928691000,26],[1335015093000,26]]},
    {"label":"totalUsers","data":[[1334583090000,150],[1334669491000,170],[1334755893000,193],[1334842290000,200],[1334928691000,225],[1335015093000,257]]}
]

ここに画像の説明を入力

4

3 に答える 3

4

コードをより単純化したものに変更することで、問題を解決できました。

function plotField(){
    var field = 'activeUsers,totalUsers';
    var url = '/api/consoleGet_stats?field='+field;
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            $.plot($("#placeholder"), datasets);
        }
    });   
}
于 2012-05-21T14:16:59.733 に答える
2

data引数を 1 つずつ渡す (ちなみに、前のプロットが上書きされます) 代わりに、一度にすべてをプロットできます。適切な色を取得するために反復することを理解しましたが、現在行っている方法は flot が行うデフォルトの方法と何ら変わりはありません。

他の色が必要な場合は、系列データで次のように指定できます。

{
    "label":"activeUsers",
    "data": xxx,
    "color": 1 // Or e.g. "rgb(255,0,0)"
}

整数を使用する場合は、flot によって生成された色を使用します。これは、実際のプロットプロセスの小さなフィドルです。ここではminTickSize: [1, "day"]、各ティックが 1 日を表すように指定しています。

これは、次のように ajax と一緒に使用できるはずです。

function plotField(){
    var field = 'activeUsers,totalUsers';
    var url = '/api/consoleGet_stats?field='+field;
    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'json',
        success: function(datasets){
            var options = {
                lines: { show: true },
                points: { show: true },
                xaxis: {
                    mode: 'time', 
                    timeformat: "%y/%m/%d",
                    minTickSize: [1, "day"]
                }
            }
            var placeholder = $("#placeholder");
            $.plot(placeholder, datasets, options);
        }   
    });   
}
于 2012-05-21T14:31:30.400 に答える
0

私にとってうまくいく解決策は次のとおりです。

serverAjaxPage.php

<?php
echo '[
       {
           "data": [
               [
                   1220565600000,
                   106.23
               ],
               [
                   1220824800000,
                   106.34
               ]
           ],
           "label": "Oil price ($)"
       },
       {
           "data": [
               [
                   1167606000000,
                   0.758
               ],
               [
                   1167692400000,
                   0.758
               ],
               [
                   1167778800000,
                   0.7547
               ]
           ],
           "label": "USD/EUR exchange rate",
           "yaxis": 2
       }
   ]';

(複数軸の例のデータ)

clientPage.html

$(function () {

    //Fetch data with AJAX
    function fetchData() {

        // Normally we call the same URL - a script connected to a
        // database - but in this case we only have static example
        // files, so we need to modify the URL.

        $.ajax({
            url: "/serverAjaxPage.php",
            type: "GET",
            dataType: "json",
            success: onDataReceived
        });


        function onDataReceived(series) {

            // Load all the data in one pass; if we only got partial
            // data we could merge it with what we already have.
            data = series;

            var options = {
                series: {
                    lines: {
                        show: true,
                    },
                    points: {
                        show: false
                    }
                },
                xaxis: {
                    ticks: 11,
                    tickDecimals: 0,
                    mode: "time",
                    timeformat: "%d-%m-%Y"
                },
                yaxes: [{
                    position: "left"
                }],
                legend: {
                    position: "sw"
                }
            };



            $.plot("#placeholder", data, options);
        }
    }
    //If you want to load data every 10 seconds
    var interval = 10000;

    //Set interval operation
    var tid = setInterval(fetchData, interval);

});
于 2013-11-02T02:10:04.507 に答える