flot Diagramm, Legende, schalten Sie on/off-Serie

Möchte ich, um der Lage sein, die Legende einer flot Diagramm ein - /ausschalten der Serie meiner Grafik. Ich fand die Beispiele, auf die flot-site und habe die Drehen Serie on/off und Labelformatter aus der API zu bauen, was ich jetzt haben. Ich kann die Kontrollkästchen neben der Legende Elemente und hinzufügen eine click-Ereignis für Sie und Ihre feuert. Aber, ruft die plot-Funktion wieder und setzt meine checkbox-Werte. Beigefügt habe ich die komplette jquery-Funktion, sorry etwas 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();
    })



});
Denken Sie, Sie könnte link eine demo bei jsFiddle, so kann ich direkt auf Ihren code?
versuchen Sie, diese jsfiddle.net/6FLsM
siehe auch stackoverflow.com/questions/4230945/...

InformationsquelleAutor Matt Heffernan | 2010-11-20

  1. 15

    Gibt es ein paar problem mit Ihrem code:

    Die Daten, die Sie verwenden, ist in der form eines Arrays, während der eine präsentiert in der demo ist ein Objekt. Die Unterscheidung ist hier wichtig, weil Sie kopiert haben, Ihren code aber nicht den code ändern um dies zu berücksichtigen. Die Linien in Frage: 

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

    innerhalb der plotAccordingToChoices() Funktion. results[key] würde in deinem Fall nicht funktionieren, weil key brauchen würde, um einen numerischen Wert, aber key hier ist der string. Die Lösung ist, ersetzen Sie diese mit einer for-Schleife durchsucht das array für die richtige Bezeichnung: 

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

    Weiter, das problem ist, dass Sie replotting die gleichen Daten immer und immer wieder, mit dieser Zeile: 

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

    results[] ändert sich nie - Sie sollten mit data[] hier statt: 

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

    Dann, anders als in der demo, dass Sie sich entschieden haben, um das setup das Kontrollkästchen mit der formatlabel Funktion in der legend option beim Plotten der Graphen. Das problem mit diesem ist, dass, wenn Sie replot Graphen mit neuen Daten, die nicht enthalten alle Ergebnisse, die Kontrollkästchen für die unplotted Linien nicht zeigen, weil flot wird nicht Handlung die Bezeichnungen von nicht existierenden Linien.

    Dies bedeutet, dass Sie haben zu tun, wie die demo läuft - zum erstellen der Checkboxen einzeln. Wir tun dies durch hinzufügen der folgenden Zeilen in die $.each - Schleife, die verwendet wird, um fix die Farben, die 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);

    Dieser erstellt eine checkbox - label set für jeden Satz von Daten in der results array. Schließlich bewegen wir die Funktion für die Bindung plotAccordingToChoices zu jeder checkbox außerhalb der Funktion, so dass die Bindung nur einmal vorkommt, um zu verhindern, dass mehrere Bindungen und das daraus resultierende Chaos:

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

    Wir es auch ändern wollen verwenden Sie die change Veranstaltung statt click weil change hier ist besser geeignet.

    Und schließlich, als ein bonus, den wir in einer Schleife durch die Legende und ziehen Sie die Farben von dort auf hinzufügen, um die Liste von Checkboxen:

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

    Außerdem benötigen wir ein wenig CSS für diese Arbeit: 

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

    Siehe die letzten funktionierenden code hier Leben: http://jsfiddle.net/yijiang/6FLsM/2/

    ich danke Euch sehr für Eure Hilfe, dies ist mein erstes richtiges Projekt mit jquery und flot. Ich meistens tun asp.net/c# Arbeit.
    wie man check-Boxen innerhalb der Leinwand.(gleiche Spalte mit der Legende)
    ist es möglich mit dem farbigen Feldern anstatt tick-Boxen

    InformationsquelleAutor Yi Jiang

Schreibe einen Kommentar