Alle Beispiele von Flot mit schwimmenden Tooltips?

Question

Zur Zeit arbeite ich an einem Flot Graph, der diese

Answer 1

Hier finden Sie aktuelle dieses flicht Beispiel die Tooltips für Plotpunkte auf die zeigt, Diagramm. (Stellen Sie sicher, dass Sie die wählen Sie Aktivieren Tooltip Kontrollkästchen.)

Answer 2

Es gibt auch eine einfache Tooltip Plugin für sie, können Sie finden es hier

Und ich auch einige Features in das Plugin hinzufügen, können Sie sich auf Github finden. https://github.com/skeleton9/flot.tooltip

Answer 3

http://data.worldbank.org wird mit Flot gebaut und verwendet Tooltips.

Answer 4

Der Link in Simons Antwort funktionierte sehr gut einen Haken zu schaffen, mit dem schwimmenden Tooltips zu verwenden. Allerdings fand ich, dass ich um zu graben hatte und schneiden Sie Code auf, um die Hover beeinflussen zu erreichen. Hier ist das Ergebnis (vor allem wörtlich aus http://people.iola.dk/olau /flot/examples/interacting.html ).

Die einzige Einstellung, die in der flicht Initialisierung ändern muss, ist in den Optionen Objekt. Es muss dies als eine der Optionen enthalten:

var options = {
 //... : {},
 grid: { hoverable: true }
};

Diese Funktion konstruiert und zeigt das Tooltip Element, wenn sie aufgerufen. Die Parameter x und y-Offsets innerhalb der flicht so die Tooltip Positionen richtig. Die Inhalte werden, was in der Tooltip angezeigt

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

Dies ist der binden, sollte es nur einmal aufgerufen werden, wenn das Element als Platzhalter für flicht verwendet zur Verfügung steht. Es Drähte der Event-Handler. previousPoint wird als ein Flag verwendet für den Tooltip Anzeige

    var previousPoint = null;
    $("#flotPlaceHolder").bind("plothover", function (event, pos, item) {
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(0),
                    y = item.datapoint[1].toFixed(0);

                showTooltip(item.pageX, item.pageY, "(" + x + "," + y + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });

Answer 5

Überprüfen Sie diese Bibliothek für Tooltip und flicht Integration aus

https://github.com/krzysu/flot.tooltip

Answer 6

http://craigsworks.com/projects/qtip2/demos/#flot ist mein Lieblings JS Tooltip Bibliothek. Seine ziemlich Badass und hat flicht Integration.

Answer 7

Sie können benutzerdefinierte Daten an das Datenfeld hinzufügen und dass Tooltips angezeigt verwenden.

Siehe meine Antwort und vollständige Beispiel hier: Anzeige benutzerdefinierte Tooltip, wenn über einen Punkt schweben in flicht