Ich verwende html5 canvas-Element, um ein Diagramm mit Punkten zu zeichnen, die verschiedene Punkte in hier darstellen .
Ich möchte verschiedene Tool-Tipps an verschiedenen Punkten beim Maus-Hover anzeigen. Der Text, der als Tool-Tipp angezeigt werden soll, wird vom Benutzer bereitgestellt.
Ich habe es versucht, konnte aber nicht herausfinden, wie man verschiedene Punkte in der Grafik mit dem Tool-Tipp ergänzt. Der Code, den ich für die Anzeige von Punkten verwende, ist ..
%Vor%Welchen Zusatz soll ich in diesem Code machen, damit ich Benutzereingaben als Tooltipp anzeigen kann?
Sie können Tooltips anzeigen, wenn sich Ihr Benutzer über den Datenpunkt Ihres Diagramms bewegt
Dieser Tooltip ist einfach eine zweite Zeichenfläche, die den Text aus der verknüpften Textbox zeichnet und sich über dem Datenpunkt positioniert.
Zuerst erstellen Sie ein Array, das die Quickinfo-Informationen für jeden Ihrer Datenpunkte enthält.
%Vor%Für jeden Tooltip benötigen Sie:
Hier ist der Code zum Erstellen von Tooltip-Informationen, die in dots []
gespeichert werden sollen %Vor%Dann richten Sie einen mousemove-Handler ein, der durch das dots-Array schaut. Der Tooltip wird angezeigt, wenn sich der Benutzer in ein beliebiges Datenfeld bewegt = Punkt:
%Vor%[Bearbeitet, um in Ihren Code zu passen]
Hier ist Code und eine Fiddle: Ссылка
%Vor%// Unveränderter Code folgt
%Vor%Ich habe die Lösung von markE ausprobiert und sie hat fehlerlos funktioniert, AUSSER dass, wenn Sie nur ein wenig nach unten scrollen (z. B. wenn Sie Ihre Leinwand ein wenig auf der Seite haben).
Dann werden die Positionen, an denen Ihr Mouseover erkannt wird, auf die gleiche Länge verschoben und es kann passieren, dass sie außerhalb des Canvas landen und überhaupt nicht erkannt werden ...
Wenn Sie mouseEvent.pageX und mouseEvent.pageY anstelle von .clientX und .clientY verwenden, sollten Sie in Ordnung sein. Für mehr Kontext, hier ist mein Code:
%Vor%Kurze Antwort: Wie Sie es jetzt getan haben, können Sie nicht.
Lange Antwort: Sie können, aber Sie müssen die genaue Mausposition alle 30 Millisekunden oder so erhalten. Für jede Millisekunde müssen Sie überprüfen, ob sich die Maus über dem Punkt befindet, den Bildschirm neu zeichnen und den Tooltip anzeigen, wenn er es tut. Dies alleine zu tun kann sehr mühsam sein, deshalb benutze ich gee.js .
Sehen Sie sich dieses Beispiel an: Ссылка
Dies ist der Ausdruck, der den Mauszeiger steuert:
%Vor%CSS ONLY Methode hier. Kein JavaScript, JQUERY oder spezielle Bibliothek erforderlich. Leicht, sexy.
HTML
%Vor%CSS
%Vor%Hier ist die Geige. Ссылка
Tags und Links javascript tooltip html5-canvas mousehover