2014-01-21 37 views
0

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

有人可以给我一个想法如何创建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> 
+1

你可以用这个问题小提琴?或提供你的PHP的渲染版本...(你可以使用这个小提琴__http://jsfiddle.net/jamitzky/9x7aJ/__来适应你的情况) – Sergio

+1

好吧..所以尘埃落定了,我确实理清了我的问题,以及清理一些事情。首先,我为绘图程序创建了一个函数。这揭示了我遇到的问题,我正在重复使用与数据相关的div的相同变量,因此混淆了结果。通过创建函数,然后使用自定义变量为每次迭代驱动函数,绘图独立运行。 – Mark

回答

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>";