Ich arbeite derzeit an einer Flot Grafik, die API was insgesamt ziemlich leistungsfähig erscheint, obwohl Beispiele für fortgeschrittene Verwendung nicht umfassend dokumentiert sind.
Die API schlägt vor, dass es Möglichkeiten gibt, Hoverable auf dem Diagramm festzulegen, nicht dass ich sicher bin, was genau das bedeutet, was ich damit tun kann.
Ich würde gerne wissen, ob jemand einige Beispiele beitragen könnte, auf die er gestoßen ist, oder Code für diese Angelegenheit, die Beispiele für eines der folgenden zeigen:
- Dynamische Tooltips, die durch Bewegen des Mauszeigers über Ereignisse auf Flot-Chart-Elementen ausgelöst werden
- Tooltips ankreuzen (Bewegen über der X-Achse zeigt Details)
- Jede Art von Hover-Over / dynamischer Ereignisbindung, die mit Flot verwendet wurde
Der Effekt, den ich suche, ist ähnlich wie Dies Öffnen Sie das Flash-Chart-Beispiel
Schau mal rein dieses Flot-Beispiel die QuickInfos für Diagrammpunkte auf dem Diagramm demonstriert. (Stellen Sie sicher, dass Sie die auswählen QuickInfo aktivieren Kontrollkästchen.)
Es gibt auch ein einfaches Tooltip-Plugin dafür, Sie können es finden hier
Und ich füge dem Plugin auch einige Funktionen hinzu, die Sie auf Github finden können.
https://github.com/skeleton9/flot.tooltip
http://data.worldbank.org wird mit Flot erstellt und verwendet Tooltips.
Der Link in Simons Antwort hat sehr gut funktioniert, um einen Haken für die Verwendung mit den schwebenden QuickInfos bereitzustellen. Ich stellte jedoch fest, dass ich herumgraben und Code zerschneiden musste, um den Hover-Effekt zu erreichen. Hier ist das Ergebnis (im Grunde wörtlich aus http://people.iola.dk/olau/flot/examples/interacting.html).
Die einzige Einstellung, die bei der Flot-Initialisierung geändert werden muss, befindet sich im Optionsobjekt. Dies muss als eine der Optionen enthalten sein:
var options = {
//... : {},
grid: { hoverable: true }
};
Diese Funktion konstruiert und zeigt das Tooltip-Element, wenn es aufgerufen wird. Die Parameter x und y sind Offsets innerhalb des Flots, damit der Tooltip richtig positioniert wird. Der Inhalt wird im 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 die Bindung, sie sollte nur einmal aufgerufen werden, wenn das Element, das als Platzhalter für Flot verwendet wird, verfügbar ist. Es verbindet den Event-Handler. previousPoint wird als Flag zum Anzeigen des Tooltips 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;
}
});
Sehen Sie sich diese Bibliothek für Tooltip- und Flot-Integration an
https://github.com/krzysu/flot.tooltip
http://craigsworks.com/projects/qtip2/demos/#flot ist meine Lieblings-JS-Tooltip-Bibliothek. Es ist ziemlich knallhart und hat Flot-Integration.
Sie können dem Datenarray benutzerdefinierte Daten hinzufügen und diese zum Anzeigen von QuickInfos verwenden.
Siehe meine Antwort und das vollständige Beispiel hier: Anzeigen eines benutzerdefinierten Tooltips, wenn Sie mit der Maus über einen Punkt in Flot fahren
