angular - Plotly 工具提示位置应根据光标位置动态变化

Question

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

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

请帮助。提前致谢。

Answer 1

我有同样的要求，但没有找到满意的解决方案。因此，我用 JavaScript 构建了自己的 ToolTipHandler.js，用于显示所有悬停数据点的工具提示。我在 jsFiddle 上为您提供了一个完整示例:https://jsfiddle.net/qcobnbcw/我对 Angular 一无所知，所以我不确定它是否适用于你那里没有变化。

一开始有三个全局变量。 ToolTipHandler 将使用 showVerticalHoverLine。如果为真，它会为每个悬停的数据点绘制一个 bobbel 并显示一条垂直线:

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

从第 5 行到第 179 行，它定义了 ToolTipHandler.js。 ToolTipHandler 可用作对象并具有两个简单的方法 showToolTip() 和 hideToolTip()。工具提示将出现在当前光标位置的右下方 30px 处。为避免工具提示不可见，如果用户在 body 的最右边或最底部，它在第 93 行和第 101 行对其进行了检查。如果它将离开“屏幕”，它将被移动到光标的左侧(或顶部)。

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

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

我希望这对您来说不是太多的代码并且对您有所帮助。欢迎提出更多问题。