2014-01-21 101 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>";