flot图形，使用图例打开/关闭系列 [英] flot graph, use legend to turn on/off series
问题描述
我希望能够使用flot图形的图例打开/关闭我的图形系列。我在flot网站上找到了这些示例，并使用车削系列开启/关闭和来自API的Labelformatter来构建我现在所拥有的。我可以将复选框放在图例元素的旁边，并为它们添加一个点击事件及其火情。但是，再次调用绘图函数并重置我的复选框值。
< script id =source>我已经包含了完整的jquery函数，很抱歉它有点长。
var jsonPath =JsonPriceHistory /+ getParameterByName（CardId）
$ b $（function（）{
$ .getJSON（jsonPath，函数（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]]}，{标签： B， 数据：[[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]，[1289397347113,0.3000] 8465248087，0.3000]，[1288464674300，0.3000]，[1268470601960，0.6000]，[1268469438957，0.6000]，[1268468281610，0.6000]，[1268440646800，0.6000]，[1265984810360，0.8000]，[1265955747730，0.8000]]}，{ 标签：C，数据：[[1290115031727,0.1200]，[1289397678960,0.1200]，[1289397337040,0.1200]，[1289396577510,0.1200]，[1289395024607,0.1200]，[1288484550417,0.1200]，[ [1288465846327,0.1200]，[1288465231287,0.1200]，[1288464658213,0.1200]，[1268470586860,0.2000]，[1268469423697,0.2000]，[1268468266277,0.2000]，[1268440631390,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]]} ，{ 标签： E， 数据：[[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.65 00]，[1288464705170，0.6500]，[1268470629373，0.6500]，[1268469467810，0.6500]，[1268468309513，0.6500]，[1268440674610，0.6500]，[1265984889857，0.6500]，[1265955775453，0.6500]]}，{标签：F，data：[[1290114885570,0.100]，[1289396731507,0.100]，[1289395170397,0.100]]}];
var options = {
legend：{
show：true，
container：$（＃overviewLegend），
labelFormatter：function（label ，系列）{
var cb ='< input type =checkboxname ='+ label +'checked =checkedid =id+ label +'> '+ label;
return cb;
}
}，
系列：{
points：{show：true}，
lines：{show：true}
}，
格：{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）;
函数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;
}
}） ;
函数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）。淡入（200）;
}
plotAccordingToChoices（）;
}）
}）;
您的代码存在一些问题：
您使用的数据是以数组的形式存在的，而演示中呈现的数据是一个东西。这里的区别很重要，因为您已经复制了他们的代码，但没有更改代码以适应此。有问题的线路是：
$ b $ pre $ if（key&& results [key]）
data.push（结果[键]）;
在 plotAccordingToChoices（）函数中。 结果[key] 在你的情况下不起作用，因为 key 需要是一个数值，但 key 这里是一个字符串。解决方案是用一个for循环替换它，它通过数组搜索正确的标签：
for（var i = 0 ; i< results.length; i ++）{
if（results [i] .label === key）{
data.push（results [i]）;
返回true;
接下来，问题在于你正在重新绘图数据一遍又一遍，用这行：
$。plot（$（＃placeholder），results，options） ;
results [] 永不改变 - 您应该在这里使用 data [] 代替：
$。plot（$ （＃placeholder），数据，选项）;
然后，与演示不同，您已决定使用<$ c $设置复选框绘制图时，在图例选项中输入c> formatlabel 函数。这样做的问题是，如果使用不包含所有结果的新数据重新绘制图形，则未显示的线条的复选框将不会显示，因为flot不会绘制不存在的线条的标签。
这意味着您必须按照演示所做的那样 - 单独创建复选框。我们通过在 $。each 循环中添加以下行来修复每行使用的颜色：
l = val.label;
var li = $（'< li />'）.appendTo(choiceContainer）;
$（'< input name =''+ l +'id ='+ l +'type =checkboxchecked =checked/>'）。appendTo利）;
$（'< label>'，{
text：l，
'for'：l
}）。appendTo（li）;
这将为中的每组数据创建一个复选框 - 结果数组。最后，我们将绑定 plotAccordingToChoices 的函数移动到函数外部的每个复选框，以便绑定仅出现一次，以防止出现多个绑定并导致混乱：
choiceContainer.find（input）。change（plotAccordingToChoices）;
我们还将它更改为使用更改事件而不是点击因为更改在这里更合适。
最后，作为奖励，我们循环浏览图例表，并从那里拉出颜色以添加到复选框列表中：
$（'。legendColorBox> div'）。each（function（i）{
$（this）.clone（）。prependTo（choiceContainer .find（li）.eq（i））;
}）;
我们还需要一个小小的CSS才能使用它：
#overviewLegend li> div {
display：inline-block;
margin-right：4px;
}
查看最终的工作代码： http://jsfiddle.net/yijiang/6FLsM/2/
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();
})
});
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 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[] never changes - you should be using data[] here instead:
$.plot($("#placeholder"), data, options);
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.
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);
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);
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));
});
We also need a little CSS for this to work:
#overviewLegend li > div {
display: inline-block;
margin-right: 4px;
}
See the final working code live here: http://jsfiddle.net/yijiang/6FLsM/2/
这篇关于flot图形，使用图例打开/关闭系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
