flot plots彼此干扰

Question

再次感谢您的专家支持。我有一个相当不错的flot实现，有一个非常不幸的bug。绘图例程在循环中工作，因此它创建的数量与在目录中传递集合的数据文件一样多。如果只有一个数据文件，那么只有一个图，生成的flot图工作正常，复选框按预期打开和关闭这些线。如果我有多个数据文件，因此有多个flot plot ..只有底部的一个似乎正常工作，其余的在任何一个切换之后锁定或没有。

有人可以告诉我如何创建flot图，这样他们就不会干涉吗？我在其他地方读过，函数名称不需要不同，但是没有验证这一点，我确实更改了标签，但这增加了额外的怪异性。

相当长的代码..但它给了你我所知道的大部分......

这里的第一部分实际上构建了flot的数据集...然后其余部分创建了图...

<script type='text/javascript'>//<![CDATA[ 
$(function(){
var results = [

<?php
    $downsample = 5;
    for($k=0;$k<2; $k++){   
        //$k =0 is Left, $k = 1 is right
        if ($k==0){
            $side = "L";
            $offset = 1;
        } elseif ($k==1) {
            $side = "R";
            $offset = 0;                
        }
        for ($m = 1; $m <= count($trackdata)-1; $m++){
            echo "\n{\n\"label\": \"".$m.$side."\",\n";   //echo "\n{\n\"label\": \"".$m." ".$side."\",\n";
            echo "\"data\": [";
            for ($n=1;$n<=count($PSD[$m*3-2]);$n=$n+$downsample){
                $tmp =  "[".$PSD[$m*3-2][$n].",".$PSD[$m*3-$offset][$n]."]";
                echo $tmp;
                if ($n > count($PSD[$m*3-2])-$downsample){
                    echo "]}";  
                } else {
                    echo ",";
                }
            }
            if ($m <> count($trackdata)-1){
                echo ",";   
            } else if ($k<1){
                echo ",";
            }
        }
    }
echo "];";   

?>

var options = {
    legend: {
        show: true
    },
    series: {
        points: {
            show: false
        },
        lines: {
            show: true
        }
    },
    grid: {
        hoverable: true
    },
    xaxis: {
    },
    yaxis: {
    }
};

 var i = 0;
 var track = 0;
 choiceContainer = $("#labeler<?php echo $i ?>");
 var table = $('<table />');    
  var row = $('<tr/>');
  var cell = $('<td width=\"100\"/>');
    var temp = $(table);

$.each(results, function(key, val) {
     track = track + 1;
    val.color = i;
    ++i;
    l = val.label; 


     if (track == 1){
        temp.append(row);
        row.append(cell);
        cell.append('Left Channel');
     } else if(track == <?php echo $tracks ?>){
        row = $('<tr/>');
        temp.append(row);
        cell = $('<td width=\"100\">');
        row.append(cell);
        cell.append('Right Channel');
     } //else if ((track == 7) or (track == 14) or (track == 21) or (track == 28) or (track == 35)){

     //}

        cell = $('<td width=\"60\"/>');
        row.append(cell);
        var bar = $('<div style=\"width:18px; white-space:nowrap; float:left\"><bar />');
        cell.append(bar);
       var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
        cell.append(inp);
        var bits = $('<label>', {
                text: l,
                'for': l
                });
        cell.append(bits); 

    choiceContainer.append(temp);

});

function plotAccordingToChoices() {
    var data = [];

    choiceContainer.find("input:checked").each(function() {
        var key = this.name;

        for (var i = 0; i < results.length; i++) {
           if (results[i].label === key) {
                data.push(results[i]);
                return true;
            }
        }

    });

    $.plot($("#placeholder<?php echo $i ?>"), data, options);
}

var previousPoint = null;

$("#placeholder<?php echo $i ?>").bind("plothover", function(event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

            showTooltip(item.pageX, item.pageY, item.series.label + " $" + y);
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
});

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 15,
        border: '1px solid #fdd',
        padding: '2px',
        backgroundColor: '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}

plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);

$('.legendColorBox > div').each(function(i){
    $(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});
});//]]>  

</script>

Answer 1

好吧..所以尘埃落定，我确实解决了我的问题，并清理了一些东西。首先，我为绘图例程创建了一个函数。这揭示了我遇到的问题，我在那里重复使用相同的变量来处理数据的div，因此混合了结果。通过创建函数，然后为每次迭代使用自定义变量驱动函数，这些图可以按照应有的方式独立运行。 - 马克

function flotplot(results, choiceContainer, plotholder, numtracks, legendcontainer){

// pass in results, choicecontainer, plotholder
// results = data
// choiceContainer =    $("#labeler1");
// plotholder  = $("#placeholder0");


var options = {
    legend: {
        show: true,
        container: legendcontainer,
        noColumns: 2,
        sorted: false
    },
    series: {
        points: {
            show: false
        },
        lines: {
            show: true
        }
    },
    grid: {
        hoverable: true
    },
    xaxes: [{
        axisLabel: 'Frequency (Hz)',
    }],
    yaxes: [{
        axisLabel: 'Power (dB)',
    }],
    crosshair: {
        mode: "xy",
        color: 001,
        lineWidth: .5
    }
};

     var i = 0;
     var track = 0;
     var table = $('<table />');    
    var row = $('<tr/>');
    var cell = $('<td width=\"100\"/>');
    var temp = $(table);

$.each(results, function(key, val) {
     track = track + 1;
    val.color = i;
    ++i;
    l = val.label; 


     if (track == 1){
        temp.append(row);
        row.append(cell);
        cell.append('Left Channel');
     } else if(track == numtracks){
        row = $('<tr/>');
        temp.append(row);
        cell = $('<td width=\"100\">');
        row.append(cell);
        cell.append('Right Channel');
     } //else if ((track == 7) or (track == 14) or (track == 21) or (track == 28) or (track == 35)){

     //}

        cell = $('<td width=\"70\"/>');
        row.append(cell);
        var bar = $('<div style=\"width:18px; white-space:nowrap; float:left\"><bar />');
        cell.append(bar);
       var inp = $('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked">');
        cell.append(inp);
        var bits = $('<label>', {
                text: l,
                'for': l
                });
        cell.append(bits); 

    choiceContainer.append(temp);

});

function plotAccordingToChoices() {
    var data = [];

    choiceContainer.find("input:checked").each(function() {
        var key = this.name;

        for (var i = 0; i < results.length; i++) {
           if (results[i].label === key) {
                data.push(results[i]);
                return true;
            }
        }

    });

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

var previousPoint = null;

plotholder.bind("plothover", function(event, pos, item) {
    $("#x").text(pos.x.toFixed(2));
    $("#y").text(pos.y.toFixed(2));

    if (item) {
        if (previousPoint != item.datapoint) {
            previousPoint = item.datapoint;

            $("#tooltip").remove();
            var x = item.datapoint[0].toFixed(2),
                y = item.datapoint[1].toFixed(2);

            showTooltip(item.pageX, item.pageY, item.series.label + " " + y + "dB");
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
});

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 15,
        border: '1px solid #fdd',
        padding: '2px',
        backgroundColor: '#fee',
        opacity: 0.80
    }).appendTo("body").fadeIn(200);
}

plotAccordingToChoices();
choiceContainer.find("input").change(plotAccordingToChoices);

$('.legendColorBox > div').each(function(i){
    $(this).clone().prependTo(choiceContainer.find("bar").eq(i));
});     
 };//]]>   

这是它写的结构：

   echo "<div id=\"placeholder".$i."\" class=\"loading\" style=\"width:600px;height:300px;display: inline; position: relative; float: left\"></div>";
   echo "<div id=\"legendholder".$i."\" class=\"loading\" style=\"width:200px; height:300px; display: inline; position: relative; float: left\"></div>";
   echo "<div id=\"picker1\" style=\"clear: both\"><p id=\"choices".$i."\">Show the following Tracks:</p></div>";   
   echo "<div id=\"labeler".$i."\"></div>";