, и еще раз спасибо за вашу экспертную поддержку. У меня довольно хорошая реализация флота, у которого есть одна очень неудачная ошибка. Сюжетная программа работает в цикле, поэтому она создает столько графиков, сколько есть файлов данных, которые передаются в каталоге. Если есть только один файл данных, то только один график, итоговый график работы участка отлично работает, и флажки включают и выключают линии, как ожидалось. Если у меня есть более одного файла данных и, следовательно, более одного участка графика. Только нижний, похоже, работает правильно, остальная блокировка после одного или переключения.Участки, вмешивающиеся друг в друга
Может ли кто-нибудь дать мне представление о том, как создать участки с лотом, чтобы они не мешали? Я читал в другом месте, что имя функции не обязательно должно быть другим, но не проверили это, и я изменил метки, но это добавило дополнительную странность.
Довольно длинный код .. но это дает вам большую часть того, что я знаю ...
Первый раздел здесь на самом деле строит наборы данных для 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