flot.js情節與複選框和顏色的色板我特別使用海軍報繪製代碼不工作

Question

。我的意圖是繪製音頻功率譜數據，包括曲線上每個軌道的兩個通道。所以我可以預期在一場音樂會上有2到40行。

我希望有開啓和關閉每條線路的方法，同時保持對劇情靜態數字和顏色。我已經嘗試了各種方法，有兩個幾乎得到的地方，我想：

首先是基於http://people.iola.dk/olau/flot/examples/turning-series.html的代碼，如下圖所示：

var track = 0; 
// hard-code color indices to prevent them from shifting as 
// countries are turned on/off 
var i = 0; 
$.each(datasets, function(key, val) { 
    val.color = i; 
    ++i; 
}); 

// insert checkboxes 
var choiceContainer = $("#choices<?php echo $i ?>"); 
choiceContainer.append('<table><tr>'); 
$.each(datasets, function(key, val) { 
     track = track + 1; 
     if (track == 1){ 
      choiceContainer.append('<td width=\"100\">Left Channel</td>'); 
     } else if(track == <?php echo $tracks ?>){ 
      choiceContainer.append('</tr><tr>'); 
      choiceContainer.append('<td>Right Channel</td>'); 
     } 
     choiceContainer.append('<td width=\"35\"><input type="checkbox" name="' + key + 
          '" checked="checked" id="id' + key + '">' + 
          '<label for="id' + key + '">' 
          + val.label + '</label></td>'); 


}); 
choiceContainer.append('</tr></table>'); 
choiceContainer.find("input").click(plotAccordingToChoices); 


function plotAccordingToChoices() { 
    var data = []; 

    choiceContainer.find("input:checked").each(function() { 
     var key = $(this).attr("name"); 
     if (key && datasets[key]) 
      data.push(datasets[key]); 
    }); 

    var options = { 
     yaxis: { min: 0 }, 
     xaxis: { tickDecimals: 0 }, 
     xaxes: [{ 
      axisLabel: 'Frequency (Hz)', 
     }], 
     yaxes: [{ 
     position: 'left', 
     axisLabel: 'Power (dB)', 
     }], 
     series: { 
      lines: { 
       lineWidth: 2 
      } 
     }, 
     legend: { 
      noColumns:7, 
      container: $("#labeler<?php echo $i ?>"), 
      labelFormatter: function(label, series){ 
       return '<a href="#" onClick="togglePlot('+series.idx+'); return false;">'+label+'</a>'; 
     } 
      } 


    }; 

    if (data.length > 0){ 
     $.plot($("#placeholder<?php echo $i ?>"), data, options); 
    } 
} 
plotAccordingToChoices(); 

這個偉大的工程爲我我試圖完成，除了checkboxes不顯示旁邊的色樣...

這裏的示例：http://jsfiddle.net/mpazaryna/Zvqqn/顯示了一個代碼，它可以非常簡單地使用色樣創建開關功能。但不適於本身（IMHO）到格式化出的圖例中的方式被選擇到哪個信道和哪一個磁道是相干的。

所以，我的目標是找到一種方法，將色板添加到現有的代碼，上面，因爲這是目前的方式，我覺得到頁面的佈局有利於結構。

Answer 1

好吧..所以花了一些時間，但下面是我在解決了代碼。這將色板添加到flot圖下方的表格中。情節仍然有右側的傳說，當我用複選框打開和關閉組合時，情節出現並消失。桌子上的色板依然存在。也許這會幫助別人！

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 border=1/>');  
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'); 
} 

    cell = $('<td width=\"75\"/>'); 
    row.append(cell); 
    var bar = $('<div style=\"width:18px\"><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").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)); 
});