Flot-Diagramm, verwenden Sie die Legende zu aktivieren/deaktivieren Serie

Question

Ich möchte in der Lage sein, die Legende eines Flot-Diagramms zu verwenden, um die Reihe meiner Grafik ein-/auszuschalten. Ich fand die Beispiele auf der Flottseite und habe die Turning series on/off und Labelformatter von der API verwendet, um zu bauen, was ich gerade habe. Ich kann die Legendenelemente als Nächstes ankreuzen und ihnen und ihren Feuern ein Klickereignis hinzufügen. Aber das ruft die Plot-Funktion erneut auf und setzt meine Checkbox-Werte zurück. Ich habe die volle jquery Funktion eingeschlossen, sorry es ein bisschen lang.

<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

Es gibt ein paar Probleme mit dem Code:

Die Daten, die Sie verwenden sind in der Form eines Arrays ist, während der in der Demo präsentiert ein Objekt ist. Die Unterscheidung ist hier wichtig, weil Sie ihren Code kopiert haben, aber den Code nicht geändert haben, um dies zu berücksichtigen. Die Linien in Frage sind:

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

innerhalb der plotAccordingToChoices() Funktion. results[key] in Ihrem Fall würde nicht funktionieren, weil key müsste ein numerischer Wert sein, aber key ist hier eine Zeichenfolge. Die Lösung ist dies für Schleife mit einem zu ersetzen, die für die korrekte Bezeichnung durch das Array sucht:

for (var i = 0; i < results.length; i++) { 
    if (results[i].label === key) { 
     data.push(results[i]); 
     return true; 
    } 
} 

Als nächstes wird das Problem ist, dass Sie die gleichen Daten über sind replotting und immer wieder, mit dieser Zeile:

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

results[] ändert sich nie - Sie sollten data[] hier stattdessen werden:

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

Dann, anders als in der Demo, haben Sie beschlossen, Setu Aktivieren Sie die Kontrollkästchen formatlabel in der Option legend, wenn Sie das Diagramm zeichnen. Das Problem dabei ist, dass wenn Sie das Diagramm mit neuen Daten neu plotten, die nicht alle Ergebnisse enthalten, die Kontrollkästchen für die nicht gezeichneten Linien nicht angezeigt werden, da flot die Beschriftungen nicht vorhandener Linien nicht darstellt.

Dies bedeutet, dass Sie tun müssen, wie die Demo tut - die Kontrollkästchen separat zu erstellen. Wir tun dies, indem Sie die folgenden Zeilen in die $.each Schleife, die die Farben verwendet wird, zu beheben jede Zeile verwendet:

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

Dies erzeugt einen Checkbox - Etikettensatz für jeden Satz von Daten in dem results Array. Schließlich bewegen wir die Funktion für außerhalb der Funktion plotAccordingToChoices zu jeder Checkbox Bindung, so dass die Bindung nur einmal auftritt, um mehrere Bindungen und das resultierende Chaos zu verhindern:

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

Wir haben es auch die change Ereignis zu verwenden, ändern statt click weil hier ist geeigneter.

Und schließlich, als Bonus, wir Schleife durch die Legende Tabelle und ziehen Sie die Farben von dort in die Liste der Kontrollkästchen hinzuzufügen:

$('.legendColorBox > div').each(function(i){ 
    $(this).clone().prependTo(choiceContainer.find("li").eq(i)); 
}); 

Wir brauchen auch ein wenig CSS für diese arbeiten:

#overviewLegend li > div { 
    display: inline-block; 
    margin-right: 4px; 
} 

Siehe die letzte Arbeits Code leben hier: http://jsfiddle.net/yijiang/6FLsM/2/