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