Mehr Informationen über Flot plothover

Ist es möglich zu zeigen, mehr Informationen in der Flot plothover als

 x = item.datapoint[0]
 y = item.datapoint[1]

Will ich hinzufügen, 3 Informationen in meinen Daten wie: y, x, someinfo

[1337341819000, 7.00000000, 3.95000000]

Erste ist das Datum, die zweite einen Betrag und die Dritte ist die information, dass
Ich zeige in meinem schweben.

InformationsquelleAutor DjangoSi | 2012-05-31

  1. 6

    Ich habe eine Menge von Informationen, die sich in meinem Datenpunkte, wie tooltip-id für die links usw..

    Beispiel Datenpunkt: [1325980800000,5,1,"6 x 4mg patch", 3]

    Beispiel plothover:

    placeholder.bind('plothover', function (event, pos, item) {
    if (item && (item.series.type == 's_points' || item.series.type == 't_points')) {
        showTooltip(item.pageX, item.pageY, item.series.data[item.dataIndex][3]);
        $('canvas').css('cursor', 'pointer');
    } else {
        $('[id^="pointTooltip"]').remove();
        $('canvas').css('cursor', 'auto');
    }
});

    Brauchen Sie nur zu finden, dass datapoint, die durch den index in Serie, und extrahieren Sie die Informationen, die Sie benötigen, wie aus einem array.

    Schön, ich glaube nicht, dass über diesen Weg gehen heute Abend.
    Gerade stolperte über dieses, wenn ich war auf der Suche, wie es zu tun. Dies ist eine ausgezeichnete Antwort, und sollte als solche gekennzeichnet.

    InformationsquelleAutor Shagglez

  2. 3

    Element umfasst nicht nur die Datenpunkt, sondern auch die Serie und der Punkt, der index in dem array für die Serie. Suche die API-Docs für 'plothover' finden Sie eine vollständige Referenz.

    Hinzufügen mehr info, können Sie entweder:

    1. Bauen ein externes mapping-aus der Reihe/index, um deine zusätzliche info, dann tun Sie eine Suche in Ihrem hover-handler

    2. Bieten eine processRawData Haken, das ändert Datenpunkte.format (beschrieben in den docs unter processRawData) fügen Sie eine Dritte nicht-numerischen Wert, der dann im Element.datapoint. Dieser Ansatz ist ein wenig mehr Arbeit, aber bekommt man genau das, was Sie gesucht haben.

    InformationsquelleAutor DNS

  3. 2

    Ich verwendet etwas ähnliches wie den folgenden code:

    enter code here

    function showTooltip(x, y, contents) {
            $('<div id="tooltip">' + contents + '</div>').css( {
                position: 'absolute',
                display: 'none',
                //float: 'left',
                top:  y - 40,
                left: x - 30,
                border: '1px solid #fdd',
                padding: '2px',
                'background-color': '#eee',
                opacity: 0.80
            }).appendTo("body").fadeIn(200);
         }



        var previousPoint = null;
        $("#divname").bind("plothover", function (event, pos, item){
            $("#x").text(pos.x.toFixed(2));
            $("#y").text(pos.y.toFixed(2));
            if (item) {
                if (previousPoint != item.dataIndex){
                    previousPoint = item.dataIndex;

                    $("#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;
                    }

            });

    InformationsquelleAutor Blake

Schreibe einen Kommentar