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>
你可以用这个问题小提琴?或提供你的PHP的渲染版本...(你可以使用这个小提琴__http://jsfiddle.net/jamitzky/9x7aJ/__来适应你的情况) – Sergio
好吧..所以尘埃落定了,我确实理清了我的问题,以及清理一些事情。首先,我为绘图程序创建了一个函数。这揭示了我遇到的问题,我正在重复使用与数据相关的div的相同变量,因此混淆了结果。通过创建函数,然后使用自定义变量为每次迭代驱动函数,绘图独立运行。 – Mark