javascript 浮点图，使用图例打开/关闭系列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4230945/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
flot graph, use legend to turn on/off series
提问by Matt Heffernan
I want to be able to use the legend of a flot graph to turn on/off the series of my graph. I found the examples on the flot site and have used the Turning series on/offand Labelformatter from the API to build what I have right now. I can put checkboxes next the legend elements and add a click event to them and its fires. But that calls the plot function again and resets my checkbox values. I have included the full jquery function, sorry its a bit long.
我希望能够使用流程图的图例来打开/关闭我的图表系列。我在 flot 站点上找到了示例，并使用了 API 中的Turning series on/off和 Labelformatter 来构建我现在拥有的东西。我可以将复选框放在图例元素旁边，并向它们添加点击事件及其触发。但这会再次调用 plot 函数并重置我的复选框值。我已经包含了完整的 jquery 函数，抱歉它有点长。
<script id="source">
var jsonPath = "JsonPriceHistory/" + getParameterByName("CardId")
$(function () {
$.getJSON(jsonPath, function (results) {
results = [{ "label": "A", "data": [[1290115114240, 0.7000], [1289396258877, 0.7000], [1289394738247, 0.7000], [1288482602563, 0.7000], [1288479321830, 0.7000], [1288464257267, 0.7000], [1288463414413, 0.7000], [1268440264933, 1.0000], [1268434766653, 1.0000], [1268059707567, 1.0000], [1265934534340, 1.0000]] }, { "label": "B", "data": [[1290115102033, 6.0000], [1289395956947, 6.0000], [1289394743117, 6.0000], [1288482613967, 6.0000], [1288479332767, 6.0000], [1288464270420, 6.0000], [1288463427313, 6.0000], [1268440276413, 6.0000], [1268434778203, 6.0000], [1268059732683, 6.0000], [1265934545390, 6.0000]] }, { "label": "C", "data": [[1290115034640, 0.3000], [1289397347113, 0.3000], [1289396593083, 0.3000], [1289395047560, 0.3000], [1288484556080, 0.3000], [1288482794357, 0.3000], [1288465863503, 0.3000], [1288465248087, 0.3000], [1288464674300, 0.3000], [1268470601960, 0.6000], [1268469438957, 0.6000], [1268468281610, 0.6000], [1268440646800, 0.6000], [1265984810360, 0.8000], [1265955747730, 0.8000]] }, { "label": "C", "data": [[1290115031727, 0.1200], [1289397678960, 0.1200], [1289397337040, 0.1200], [1289396577510, 0.1200], [1289395024607, 0.1200], [1288484550417, 0.1200], [1288482780457, 0.1200], [1288465846327, 0.1200], [1288465231287, 0.1200], [1288464658213, 0.1200], [1268470586860, 0.2000], [1268469423697, 0.2000], [1268468266277, 0.2000], [1268440631390, 0.2000], [1265984774793, 0.2000], [1265955732580, 0.2000]] }, { "label": "D", "data": [[1290114958773, 0.0500], [1289397467207, 0.0500], [1289396747243, 0.0500], [1289395166640, 0.0500]] }, { "label": "E", "data": [[1290114933540, 0.6500], [1289397579447, 0.6500], [1289397242333, 0.6500], [1289396486657, 0.6500], [1289395003947, 0.6500], [1288484568590, 0.6500], [1288482784747, 0.6500], [1288465893750, 0.6500], [1288465278320, 0.6500], [1288464705170, 0.6500], [1268470629373, 0.6500], [1268469467810, 0.6500], [1268468309513, 0.6500], [1268440674610, 0.6500], [1265984889857, 0.6500], [1265955775453, 0.6500]] }, { "label": "F", "data": [[1290114885570, 0.1100], [1289396731507, 0.1100], [1289395170397, 0.1100]]}];
var options = {
legend: {
show: true,
container: $("#overviewLegend"),
labelFormatter: function (label, series) {
var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label;
return cb;
}
},
series: {
points: { show: true },
lines: { show: true }
},
grid: { hoverable: true },
xaxis: {
mode: "time",
minTickSize: [1, "day"],
max: new Date().getTime()
},
yaxis: {
mode: "money",
min: 0,
tickDecimals: 2,
tickFormatter: function (v, axis) { return "$" + v.toFixed(axis.tickDecimals) }
}
};
var i = 0;
$.each(results, function (key, val) {
val.color = i;
++i;
});
var choiceContainer = $("#overviewLegend");
function plotAccordingToChoices() {
var data = [];
alert('hi');
choiceContainer.find("input:checked").each(function () {
var key = $(this).attr("name");
if (key && results[key])
data.push(results[key]);
});
$.plot($("#placeholder"), results, options);
choiceContainer.find("input").click(plotAccordingToChoices);
}
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',
'background-color': '#fee',
opacity: 0.80
}).appendTo("body").fadeIn(200);
}
plotAccordingToChoices();
})
});
回答by Yi Jiang
There's a couple of problem with your code:
您的代码有几个问题：
The data you're using is in the form of an array, while the one presented in the demo is an object. The distinction is important here because you've copied their code, but did not change the code to accommodate this. The lines in question are:
您使用的数据是数组的形式，而演示中显示的数据是一个对象。区别在这里很重要，因为您已经复制了他们的代码，但没有更改代码以适应这一点。有问题的行是：
if (key && results[key])
data.push(results[key]);
inside the plotAccordingToChoices()function. results[key]in your case would not work because keywould need to be a numerical value, but keyhere is a string. The solution is to replace this with a for loop which searches through the array for the correct label:
plotAccordingToChoices()函数内部。results[key]在您的情况下将不起作用，因为key需要是一个数值，但key这里是一个字符串。解决方案是用 for 循环替换它，该循环在数组中搜索正确的标签：
for (var i = 0; i < results.length; i++) {
if (results[i].label === key) {
data.push(results[i]);
return true;
}
}
Next, the problem is that you are replotting the same data over and over again, with this line:
接下来，问题是您一遍又一遍地重新绘制相同的数据，并使用以下行：
$.plot($("#placeholder"), results, options);
results[]never changes - you should be using data[]here instead:
results[]永远不会改变 - 你应该在data[]这里使用：
$.plot($("#placeholder"), data, options);
Then, unlike in the demo, you've decided to setup the checkboxes using the formatlabelfunction in the legendoption when plotting the graph. The problem with this is that when you replot the graph with new data that does not contain all of the results, the checkboxes for the unplotted lines will not show up because flot will not plot the labels of non-existent lines.
然后，与演示中不同的是，您决定在绘制图形时使用选项中的formatlabel函数设置复选框legend。问题在于，当您使用不包含所有结果的新数据重新绘制图形时，未绘制线条的复选框将不会显示，因为 flot 不会绘制不存在线条的标签。
This means that you will have to do as the demo does - to create the checkboxes separately. We do this by adding the following lines to the $.eachloop that is used to fix the colors each line uses:
这意味着您必须像演示中那样做 - 分别创建复选框。为此，我们将以下几行添加到$.each用于修复每行使用的颜色的循环中：
l = val.label;
var li = $('<li />').appendTo(choiceContainer);
$('<input name="' + l + '" id="' + l + '" type="checkbox" checked="checked" />').appendTo(li);
$('<label>', {
text: l,
'for': l
}).appendTo(li);
This will create a checkbox - label set for each set of data in the resultsarray. Finally we move the function for binding plotAccordingToChoicesto each checkbox outside the function, so that the binding only occurs once, to prevent multiple bindings and the resultant mess:
这将创建一个复选框 - 为results数组中的每组数据设置标签。最后，我们将绑定plotAccordingToChoices到函数外的每个复选框的函数移动，以便绑定只发生一次，以防止多次绑定和由此产生的混乱：
choiceContainer.find("input").change(plotAccordingToChoices);
We also change it to use the changeevent instead of clickbecause changehere is more appropriate.
我们也将其更改为使用change事件而不是click因为change这里更合适。
And finally, as a bonus, we loop through the legend table and pull the colors from there to add to the list of checkboxes:
最后，作为奖励，我们遍历图例表并从那里提取颜色以添加到复选框列表中：
$('.legendColorBox > div').each(function(i){
$(this).clone().prependTo(choiceContainer.find("li").eq(i));
});
We also need a little CSS for this to work:
我们还需要一些 CSS 来让它工作：
#overviewLegend li > div {
display: inline-block;
margin-right: 4px;
}
See the final working code live here: http://jsfiddle.net/yijiang/6FLsM/2/
在这里查看最终的工作代码：http: //jsfiddle.net/yijiang/6FLsM/2/
