flot graph，使用图例打开/关闭系列

我希望能够使用flot图形的图例来打开/关闭我的图形系列。 我在flot网站上找到了这些例子，并使用了Turning系列的开/关和API格式的Labelformatter来构建我现在拥有的东西。 我可以在图例元素旁边放置复选框，并为它们及其火灾添加一个点击事件。 但是它再次调用了plot函数并重置了我的复选框值。 我已经包含了完整的jquery函数，抱歉它有点长。

 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 = ' ' + 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) { $('
' + contents + '
').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(); }) }); 

Answer 1

您的代码存在一些问题：

您正在使用的数据是数组的forms，而演示中显示的数据是一个对象。 这里的区别非常重要，因为您复制了代码，但没有更改代码以适应这种情况。 有问题的行是：

 if (key && results[key]) data.push(results[key]); 

里面的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; } } 

接下来，问题是您使用以下行反复重新绘制相同的数据：

 $.plot($("#placeholder"), results, options); 

results[]永远不会改变 - 你应该在这里使用data[] ：

 $.plot($("#placeholder"), data, options); 

然后，与演示不同，您在绘制图形时决定使用legend选项中的formatlabel函数设置复选框。 这样做的问题是，当您使用不包含所有结果的新数据重新绘制图形时，未打开的线条的复选框将不会显示，因为flot不会绘制不存在的线条的标签。

这意味着你必须像演示一样 - 分别创建复选框。 我们通过在$.each循环中添加以下行来实现此目的，该循环用于修复每行使用的颜色：

 l = val.label; var li = $('
').appendTo(choiceContainer); $('').appendTo(li); $('', { text: l, 'for': l }).appendTo(li); 

这将为results数组中的每组数据创建一个复选框 - 标签集。 最后我们将用于绑定plotAccordingToChoices的函数移动到函数外的每个复选框，这样绑定只发生一次，以防止多个绑定和由此导致的混乱：

 choiceContainer.find("input").change(plotAccordingToChoices); 

我们还将其更改为使用change事件而不是click因为此处change更合适。

最后，作为奖励，我们遍历图例表并从那里拉出颜色以添加到复选框列表：

 $('.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/