0

与えられたデータに依存する動的フロート グラフを作成しようとしています。フロート グラフはその情報に JSON を使用しています。データセットの例を次に示します。

{
    "total":[[1377691200,115130],[1377694800,137759],[1377698400,137759],[1377702000,137759],[1377705600,137759],[1377709200,139604],[1377712800,137759],[1377716400,137759],[1377720000,137759],[1377723600,137759],[1377727200,137759],[1377730800,138156],[1377734400,137759],[1377738000,137759],[1377741600,137759],[1377745200,137759],[1377748800,138156],[1377752400,137759],[1377756000,137759],[1377759600,168831],[1377763200,137759],[1377766800,0],[1377770400,0]],
    "dev0":[[1377691200,115130],[1377694800,137759],[1377698400,137759],[1377702000,137759],[1377705600,137759],[1377709200,139604],[1377712800,137759],[1377716400,137759],[1377720000,137759],[1377723600,137759],[1377727200,137759],[1377730800,138156],[1377734400,137759],[1377738000,137759],[1377741600,137759],[1377745200,137759],[1377748800,138156],[1377752400,137759],[1377756000,137759],[1377759600,168831],[1377763200,137759],[1377766800,0],[1377770400,0]],
    "dev1":[[1377691200,0],[1377694800,0],[1377698400,0],[1377702000,0],[1377705600,0],[1377709200,0],[1377712800,0],[1377716400,0],[1377720000,0],[1377723600,0],[1377727200,0],[1377730800,0],[1377734400,0],[1377738000,0],[1377741600,0],[1377745200,0],[1377748800,0],   [1377752400,0],[1377756000,0],[1377759600,0],[1377763200,0],[1377766800,0],[1377770400,0]]
}

私がすでに作成したスクリプト:

$(".bytes_portal_pop").click(function(e) {
    e.preventDefault();
    var graph=$(this).data('graph');
    var range=$(this).data('range');
    var divid=$(this).data('divid');
    var title=$(this).data('boxtitle');

    $.getJSON("/action/sites/GetFlotStats/?graph=" + graph + "&range=" + range, function(json) {           
       //succes - data loaded, now use plot:
       var plotarea = $("#" + divid);               
       var dev0=json.dev0;
       var dev1=json.dev1;          
       $.plot(
            $("#" + divid), 
            [
                {
                    data: dev0,
                    lines:{show: true, fill: true},
                    label: "dev0",
                },
                {
                    data: dev1,
                    lines:{show: true, fill: true},
                    label: "dev1",
                },

            ],                
            {
                xaxis: {mode:"time"},
                grid: {hoverable: true},
                tooltip: true,
                tooltipOpts: {
                    content: "Traffic: %y GB"
                }
            }
       );
    });

$("#boxtitleB_flot").html(title);
});

この方法はうまく機能し、必要に応じて2行を表示しますが、動的にしたいので、各グラフ行を定義する必要はありません。これを行うには、単に for または each() ループが必要です

var dev0=json.dev0;
and
{
      data: dev0,
      lines:{show: true, fill: true},
      label: "dev0",
},

これを達成するための助けをいただければ幸いです。

4

1 に答える 1