grafico flottaggio, utilizzare la legenda per attivare/disattivare la serie

Question

Desidero poter utilizzare la legenda di un grafico flottante per attivare/disattivare la serie del mio grafico. Ho trovato gli esempi sul sito flot e ho usato il Turning series on/off e Labelformatter dall'API per costruire quello che ho adesso. Posso mettere le checkbox accanto agli elementi della legenda e aggiungere un evento click a loro e ai suoi fuochi. Ma questo richiama di nuovo la funzione di stampa e ripristina i valori della mia casella di controllo. Ho incluso la funzione jquery completa, mi spiace un po 'lunga.

<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

Ci sono un paio di problemi con il tuo codice:

I dati che si sta utilizzando è in forma di un array, mentre quello presentato nella demo è un oggetto. La distinzione è importante qui perché hai copiato il loro codice, ma non hai modificato il codice per sistemarlo. Le righe in questione sono:

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

all'interno della funzione plotAccordingToChoices(). results[key] nel tuo caso non funzionerebbe perché key avrebbe bisogno di essere un valore numerico, ma key qui è una stringa. La soluzione è quella di sostituire questo con un ciclo che cerca attraverso la matrice per l'etichetta corretta:

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

successivo, il problema è che si sta tracciare nuovamente gli stessi dati più e più volte, con questa linea:

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

results[] non cambia mai - si dovrebbe utilizzare data[] qui invece:

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

Poi, a differenza del demo, hai deciso di Setu p le caselle di controllo che utilizzano la funzione formatlabel nell'opzione legend quando si traccia il grafico. Il problema è che quando si sostituisce il grafico con nuovi dati che non contengono tutti i risultati, le caselle di controllo per le linee non tracciate non verranno visualizzate perché flot non traccerà le etichette di righe inesistenti.

Ciò significa che dovrete fare come la demo - per creare le caselle separatamente. Lo facciamo aggiungendo le seguenti righe al ciclo $.each che viene utilizzato per fissare i colori utilizzati ogni riga:

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

Ciò creerà una casella - set un'etichetta per ciascun set di dati nella matrice results. Infine si passa alla funzione per il legame plotAccordingToChoices a ciascuna casella fuori della funzione, in modo che il legame si verifica una sola volta, per evitare che più binding e il disordine risultante:

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

Si cambia anche utilizzare l'evento anziché changeclick perché change qui è più appropriato.

E, infine, come bonus, abbiamo ciclo attraverso la tabella di leggenda e tirare i colori da lì da aggiungere alla lista di caselle di controllo:

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

Abbiamo anche bisogno di un po 'di CSS per questo lavoro:

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

vedere il codice finale di lavoro vivono qui: http://jsfiddle.net/yijiang/6FLsM/2/