我专门使用 Flot 绘图代码。我的意图是绘制音频功率谱数据,包括绘图上每个轨道的两个通道。所以我可以期望在一场给定的音乐会上有 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/显示了一个代码,该代码非常简单地使用颜色样本创建了开关功能。但不适合(恕我直言)以与选择哪个通道和哪个轨道一致的方式格式化图例。
因此,我的目标是找到一种方法将色板添加到我现有的代码中,如上所述,因为它目前的结构方式是我认为有利于页面布局的方式。