ich einen Plotly Graph in Angular2 mit diesem Beispiel erstellt habe: https://plot.ly/javascript/filled-area-plots/Plotly Tooltip Position sollte dynamisch sein, basierend auf Cursorposition
ich den Tooltip zur rechten Seite des Cursors verschieben möge, wenn die Cursor nach links extremen gehen und Verschieben Sie den Tooltip nach links, wenn der Cursor zur äußersten rechten Seite geht.
Bitte Hilfe. Danke im Voraus.
Ich hatte die gleiche Anforderung und nicht eine zufriedene Lösung gefunden. Also erstelle ich meine eigene ToolTipHandler.js in JavaScript, um einen Tooltip für alle gespeicherten Datenpunkte anzuzeigen. Ich lege es in ein vollständiges Beispiel auf jsFiddle für Sie: https://jsfiddle.net/qcobnbcw/ Ich habe keine Ahnung über eckig so ich bin nicht sicher, ob es für Sie ohne Änderungen funktioniert.
Zu Beginn gibt es drei globale Variablen. showVerticalHoverLine wird von ToolTipHandler verwendet. Wenn es wahr ist, ziehen sie einen bobbel für jeden Datenpunkt schwebten und zeigen eine vertikale Linie:
var showVerticalHoverLine = true;
var chartDivId = "myDiv";
var chartDiv = document.getElementById(chartDivId);
Von Zeile 5-179 Zeile definiert es die ToolTipHandler.js. Der ToolTipHandler kann als Objekt verwendet werden und hat die beiden einfachen Methoden showToolTip() und hideToolTip(). Die QuickInfo wird 30 Pixel rechts und unten an der aktuellen Cursorposition angezeigt. Zur Vermeidung der ToolTip ist nicht sichtbar, ob der Benutzer ganz rechts oder ganz unten im Körper es in Zeile 93 und 101 eine Überprüfung dafür hat. Wenn es den "Bildschirm" verlassen würde, wird es nach links (oder oben) des Cursors bewegt.
Von Zeile 184 bis Zeile 205 Ich erstelle das Beispiel Plot, das Sie in Ihrer Frage referenziert haben.
Von Zeile 210 bis Ende Ich erstelle einen Hover und eine Unhover-Funktion und anhängen sie an die ChartDiv. Nenne es, wenn es es erkennt. Die Funktion blendet den entsprechenden Tooltip ein und aus.
Ich hoffe es ist nicht viel Code für Sie und es hilft. Fiel frei, um weitere Fragen zu stellen.
Danke flipperweid, Aber meine Anforderung in Angular2 nicht in Java Script. Also, bitte geben Sie mir eine Antwort, wenn jemand eine Lösung dafür mit Angular2 hat. –
Hallo, Sie verweisen auf ein Java Script Beispiel. Ich habe keine Erfahrung mit Angula2, aber ich denke, dass Sie dies auch für Angular2 mit einigen Änderungen verwenden können. – flipperweid
@VikasGaurav Sie haben es geschafft, den Plotly-Code zu nehmen, der in Javascript ist und es in eckigen implementieren, so sollten Sie in der Lage sein, das gleiche mit dieser Antwort zu tun. – icc97
Definieren Sie ganz rechts und links. Wie von der Handlung? –
@MikeWise, Könnten Sie bitte mehr ausarbeiten? –