Alle Beispiele für Flot mit Floating Tooltips?

Question

Ich arbeite derzeit an einer Flot Grafik, die API scheint insgesamt ziemlich stark, obwohl Beispiele für die erweiterte Verwendung nicht ausführlich dokumentiert sind.

Die API schlägt vor, dass es Möglichkeiten gibt, in der Grafik die Option "Erweiterbar" festzulegen, nicht dass ich sicher bin, was genau das bedeutet.

Ich mag würde wissen, ob jemand ein paar Beispiele beitragen könnten, dass sie über gekommen sind oder Code für diese Angelegenheit, die Beispiele für eine der folgenden zeigen: auf durch schweben über Ereignisse ausgelöst

• Dynamische Tooltips flicht Diagrammelemente
• Tick tooltips (über die X-Achse zeigt das Detail schwebt)
• Jede Art von der Maustaste/dynamischen Ereignisbindung, die w flicht verwendet wurde

Die Wirkung ich suche ist ähnlich this öffnen Flash Chart Beispiel

Answer 1

einen Blick auf this flot example haben, die Tooltips für Plotpunkte auf dem Chart zeigt. (Stellen Sie sicher, dass Sie das Kontrollkästchen Enable tooltip aktivieren.)

Answer 2

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

Answer 3

http://craigsworks.com/projects/qtip2/demos/#flot ist meine Lieblings-JS-Tooltip-Bibliothek. Sein hübscher Badass und hat flot Integration.

Answer 4

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

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

Answer 5

Sie können benutzerdefinierte Daten zum Datenarray hinzufügen und diese zum Anzeigen von Tooltips verwenden.

Siehe meine Antwort und vollständiges Beispiel hier: displaying custom tooltip when hovering over a point in flot

Answer 6

prüfen diese Bibliothek für Tooltip und flicht Integration

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

Answer 7

Der Link in Simons Antwort sehr gut funktioniert hat einen Haken zu schaffen, zu verwenden, mit den schwebenden Tooltips. Wie auch immer, ich musste feststellen, dass ich herumkramen und den Code abschneiden musste, um den Hover-Effekt zu erreichen. Hier ist das Ergebnis (im Wesentlichen wörtlich aus http://people.iola.dk/olau/flot/examples/interacting.html).

Die einzige Einstellung, die bei der Flot-Initialisierung geändert werden muss, ist im Optionsobjekt. Es muss dies als eine der Optionen umfassen:

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

Diese Funktion baut und zeigt das Tooltip Element, wenn sie aufgerufen. Die Parameter x und y sind Offsets innerhalb des Flots, so dass der Tooltip korrekt positioniert ist.Die Inhalte werden, was im Tooltip

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 binden, sollte es nur einmal aufgerufen werden angezeigt, wenn das Element als Platzhalter für flicht verwendet zur Verfügung steht. Es verbindet den Event-Handler. previousPoint wird als Flag für die Anzeige der QuickInfo verwendet

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