graphique flot, utiliser la légende pour activer/désactiver la série

Question

Je veux être en mesure d'utiliser la légende d'un graphique flot pour activer/désactiver la série de mon graphique. J'ai trouvé les exemples sur le site de flot et j'ai utilisé le Turning series on/off et Labelformatter de l'API pour construire ce que j'ai en ce moment. Je peux mettre des cases à cocher à côté des éléments de légende et leur ajouter un événement click et ses incendies. Mais cela appelle à nouveau la fonction plot et réinitialise les valeurs de ma case à cocher. J'ai inclus la fonction jquery complète, désolé c'est un peu 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(); 
    }) 



}); 

Answer 1

Il y a quelques problèmes avec votre code:

Les données que vous utilisez est sous la forme d'un tableau, tandis que celui présenté dans la démo est un objet. La distinction est importante ici parce que vous avez copié leur code, mais n'a pas changé le code pour s'adapter à cela. Les lignes en question sont:

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

à l'intérieur de la fonction plotAccordingToChoices(). results[key] dans votre cas ne fonctionnerait pas car key aurait besoin d'être une valeur numérique, mais key voici une chaîne. La solution consiste à remplacer par une boucle qui recherche à travers le réseau pour l'étiquette correcte:

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

Ensuite, le problème est que vous le relotissement les mêmes données et encore, avec cette ligne:

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

results[] ne change jamais - vous devriez utiliser data[] ici à la place:

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

Ensuite, contrairement à la démo, vous avez décidé de Setu p les cases à cocher utilisant la fonction formatlabel dans l'option legend lors du tracé du graphique. Le problème avec ceci est que lorsque vous replotez le graphique avec de nouvelles données qui ne contiennent pas tous les résultats, les cases à cocher pour les lignes non placées n'apparaîtront pas parce que le flot ne tracera pas les étiquettes des lignes inexistantes. Cela signifie que vous devrez faire comme la démo - pour créer les cases à cocher séparément. Nous faisons cela en ajoutant les lignes suivantes à la boucle $.each qui est utilisé pour fixer les couleurs chaque ligne utilise:

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

Cela va créer une case à cocher - jeu d'étiquettes pour chaque ensemble de données dans le tableau results. Enfin, nous passons la fonction pour la liaison plotAccordingToChoices à chaque case en dehors de la fonction, de sorte que le produit qu'une seule fois de liaison, afin d'éviter de multiples liaisons et le désordre qui en résulte:

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

Nous changeons également d'utiliser l'événement change au lieu de click car change est ici plus approprié.

Et enfin, comme un bonus, on boucle à travers la table de légende et tirer les couleurs de là pour ajouter à la liste des cases à cocher:

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

Nous avons également besoin d'un peu CSS pour que cela fonctionne:

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

Voir le code de travail final en direct ici: http://jsfiddle.net/yijiang/6FLsM/2/