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

Je veux être en mesure d'utiliser la légende d'un flot graphique pour activer/désactiver la série de mon graphe. J'ai trouvé les exemples sur le flot site et qui ont utilisé la Tournage de la série on/off et Labelformatter à partir de l'API pour la construction de ce que j'ai droit. Je peux mettre des cases à cocher en regard les éléments de légende et cliquez sur ajouter un événement à eux et ses feux. Mais qui appelle la fonction plot de nouveau et se réinitialise mon case à cocher valeurs. J'ai la fonction jquery, 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();
})
});

InformationsquelleAutor Matt Heffernan | 2010-11-20
  1. 15

    Il ya un couple de problème avec votre code:

    Les données que vous utilisez est sous la forme d'un tableau, alors que celui présenté dans la démo n'est pas un objet. La distinction est importante ici parce que vous avez copié leur code, mais ne modifie pas le code pour le permettre. Les lignes en question sont: 

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

    à l'intérieur de la plotAccordingToChoices() fonction. results[key] dans votre cas ne marche pas car key aurait besoin d'être une valeur numérique, mais key ici est une chaîne de caractères. La solution est de le remplacer par une boucle qui parcourt le tableau pour la bonne étiquette: 

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

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

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

    results[] ne change jamais - vous devriez être en utilisant data[] ici: 

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

    Ensuite, contrairement à la démo, vous avez décidé d'installation les cases à cocher à l'aide de la formatlabel fonction dans le legend option lors du traçage du graphe. Le problème avec cela est que lorsque vous replot le graphique avec les nouvelles données qui ne contiennent pas tous les résultats, les cases à cocher pour les unplotted lignes n'apparaissent pas car flot va pas tracer les étiquettes de la non-existant lignes.

    Cela signifie que vous aurez à faire la démo à créer les cases séparément. Nous faisons cela en ajoutant les lignes suivantes à la $.each boucle qui est utilisé pour fixer les couleurs de 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 - ensemble d'étiquettes pour chaque ensemble de données dans le results tableau. Enfin, nous passons à la fonction de liaison plotAccordingToChoices pour chaque case à cocher à l'extérieur de la fonction, de sorte que la liaison se produit seulement une fois, pour éviter de multiples liaisons et la résultante mess:

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

    Nous avons également modifier pour utiliser le change de l'événement au lieu de click parce que change ici est plus approprié.

    Et enfin, en bonus, nous avons une boucle par la légende de la table et de tirer les couleurs de là à ajouter à la liste de cases à cocher:

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

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

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

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

    • je vous remercie pour votre aide, c'est mon premier vrai projet à l'aide de jquery ou à flot. Je fais principalement asp.net/c# travail.
    • comment obtenir des cases à cocher à l'intérieur de la toile.(même colonne avec la légende)
    • est-il possible d'utiliser les cases de couleur au lieu d'ajouter des cases à cocher
    InformationsquelleAutor Yi Jiang