我专门使用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/显示的代码非常简单地使用颜色样本创建开启功能。但是它不适合(IMHO)以一种关于选择哪个频道和哪个音轨的方式格式化图例。
所以,我的目标是找到一种方法将颜色样本添加到我上面的现有代码中,因为目前这种方式是以我觉得对页面布局有益的方式构建的。
答案 0 :(得分: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));
});