浮点图，使用图例打开/关闭系列 [英] flot graph, use legend to turn on/off series
问题描述
我希望能够使用浮点图的图例来打开/关闭我的图形系列.我在 flot 网站上找到了示例，并使用了 打开/关闭系列 和来自 API 的 Labelformatter 来构建我现在拥有的东西.我可以将复选框放在图例元素旁边，并向它们添加点击事件及其触发.但这会再次调用 plot 函数并重置我的复选框值.我已经包含了完整的 jquery 功能，抱歉有点长.
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/off and 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.
<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();
})
});
推荐答案
你的代码有几个问题:
您使用的数据是数组的形式，而演示中展示的数据是一个对象.区别在这里很重要，因为您已经复制了他们的代码，但没有更改代码以适应这一点.有问题的行是:
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]);
在 plotAccordingToChoices() 函数内.results[key] 在你的情况下不起作用，因为 key 需要是一个数值，但 key 这里是一个字符串.解决方案是用 for 循环替换它，该循环在数组中搜索正确的标签:
inside the plotAccordingToChoices() function. results[key] in your case would not work because key would need to be a numerical value, but key here is a string. The solution is to replace this with a for loop which searches through the array for the correct label:
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[] 永远不会改变 - 你应该在这里使用 data[] 代替:
results[] never changes - you should be using data[] here instead:
$.plot($("#placeholder"), data, options);
然后，与演示不同，您决定在绘制图形时使用 legend 选项中的 formatlabel 函数设置复选框.问题在于，当您使用不包含所有结果的新数据重新绘制图形时，未绘制线条的复选框将不会显示，因为 flot 不会绘制不存在线条的标签.
Then, unlike in the demo, you've decided to setup the checkboxes using the formatlabel function in the legend option 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.
这意味着您必须按照演示的方式进行操作 - 分别创建复选框.为此，我们将以下几行添加到 $.each 循环中，该循环用于修复每行使用的颜色:
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 $.each loop that is used to fix the colors each line uses:
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);
这将创建一个复选框 - 为 results 数组中的每组数据设置标签.最后，我们将绑定 plotAccordingToChoices 的函数移动到函数外的每个复选框，这样绑定只发生一次，以防止多次绑定和由此产生的混乱:
This will create a checkbox - label set for each set of data in the results array. Finally we move the function for binding plotAccordingToChoices to each checkbox outside the function, so that the binding only occurs once, to prevent multiple bindings and the resultant mess:
choiceContainer.find("input").change(plotAccordingToChoices);
我们也将其更改为使用 change 事件而不是 click 因为这里的 change 更合适.
We also change it to use the change event instead of click because change here is more appropriate.
最后，作为奖励，我们遍历图例表并从那里提取颜色以添加到复选框列表中:
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));
});
我们还需要一些 CSS 来让它工作:
We also need a little CSS for this to work:
#overviewLegend li > div {
display: inline-block;
margin-right: 4px;
}
在这里查看最终的工作代码:http://jsfiddle.net/yijiang/6FLsM/2/
这篇关于浮点图，使用图例打开/关闭系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
