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);
});

这种方式工作正常，并根据我的需要显示两条线但是我希望它是动态的，即所以我不必定义每条图形线我相信这样做我只需要一个 for 或 each() 循环

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

任何帮助实现这一点将不胜感激。

4

1 回答 1

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, 
   {}
 );

在这里拉小提琴。

于 2013-08-29T14:44:05.637 回答