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

Question

我想要能够使用flot图形的图例来打开/关闭我的图形系列。我在flot网站上找到了这些示例，并使用API​​中的Turning series on/off和Labelformatter来构建我现在拥有的内容。我可以将复选框放在图例元素的旁边，并为它们添加一个点击事件及其火情。但是，再次调用绘图函数并重置我的复选框值。我已经包含了完整的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(); 
    }) 



}); 

Answer 1

有一对夫妇的问题，你的代码：

您正在使用的数据是一个数组的形式，而在演示中呈现的是一个对象。这里的区别很重要，因为您已经复制了他们的代码，但没有更改代码以适应此。有问题的线路有：

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); 

然后，不像在演示中，你已经决定SETU绘制图形时，使用legend选项中的formatlabel函数复选框。这样做的问题是，如果使用不包含所有结果的新数据重新绘制图形，则未显示的线条的复选框将不会显示，因为flot不会绘制不存在的线条的标签。

这意味着您必须按照演示的步骤进行操作 - 单独创建复选框。我们可以通过将以下行$.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); 

这将创建一个复选框 - 为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/