根据光标位置，Plotly工具提示位置应该是动态的

Question

我使用此示例在Angular2中创建了一个Plotly图：https://plot.ly/javascript/filled-area-plots/

当光标移到最左端时，我想将工具提示移动到光标的右侧，当光标移到最右侧时，将工具提示移到左侧。

请帮助。提前谢谢。

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（）。 toolTip将在当前光标位置的右下方显示30px。为了避免使用工具如果用户在第93行和第101行检查它的情况下非常正确或非常底部，则不能查看工具。如果它将离开'屏幕'，它将被移动到光标的左侧（或顶部）。

从第184行到第205行，我构建了您在问题中引用的示例图。

从第210行到结束我创建了一个悬停和取消悬停功能并将它们附加到chartDiv。如果它识别它，请用它来调用它。该功能显示并隐藏相应的工具提示。

我希望不是为你准备太多代码而且它会有所帮助。可以随意提出进一步的问题。