Plotly提示位置應根據

Question

我在Angular2使用這個例子中創建了一個Plotly圖形光標位置是動態當光標移到最右側時，將工具提示移動到左側。

請幫忙。提前致謝。

Answer 1

我有相同的要求，沒有找到滿意的解決方案。因此，我使用JavaScript構建了自己的ToolTipHandler.js，以顯示所有懸停數據點的工具提示。我把它放在jsFiddle上的一個完整例子中：https://jsfiddle.net/qcobnbcw/ 我沒有關於角度的知識，所以我不知道它是否適用於你，沒有改變。

開始時有三個全局變量。 showVerticalHoverLine將被ToolTipHandler使用。如果它是真實的，它畫出一個bobbel每個盤旋數據點，並顯示的垂直線：

var showVerticalHoverLine = true; 
var chartDivId = "myDiv"; 
var chartDiv = document.getElementById(chartDivId); 

從5行至179行它定義的ToolTipHandler.js。 ToolTipHandler可以用作對象，並有兩個簡單的方法showToolTip（）和hideToolTip（）。工具提示將在當前光標位置的右下方出現30px。爲了避免工具提示不可見，如果用戶非常正確或非常的底部，它在93和101行檢查它。如果它離開「屏幕」，它將移動到光標的左側（或頂部）。

從第184行到第205行，我構建了您的問題中引用的示例圖。

從第210行到結束我創建了一個懸停和非懸停函數並將它們附加到chartDiv。如果它能識別它，請畫出它。該功能顯示並隱藏相應的工具提示。

我希望這不是很多代碼，它有助於。請隨時提出進一步的問題。