Question

我正在尝试根据给定的数据创建动态flot图，我的flot图使用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);
});

这种方式工作正常并显示我需要的两行但是我希望它是动态的，所以我不必定义每个图形线我相信todo这我只需要一个for或每个（）循环< / p>

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

非常感谢任何帮助实现这一目标。

Answer 1

更正，只需将其循环并动态生成系列对象。

给json返回如下：

jsonObj = {
    "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]]
};

创建一系列数组：

var series = [];
$.each(jsonObj, function (key, val) {
    var serie = {};
    serie.label = key;
    serie.data = val;
    series.push(serie);        
});

然后创建情节：

$.plot(
   $("#placeholder"), 
   series, 
   {}
 );

小提琴here。

带有JSON数据的JS for Loop in Flot

1 个答案: