highcharts - Highcharts 工具提示隐藏在其他图表后面

Question

当从上面的图表中放置多个图表时，工具提示会隐藏在其他图表后面。

我找到了一些关于如何操作的提示，但没有任何帮助。有没有办法将工具提示保留在图表顶部？

示例在这里：http: //jsfiddle.net/Zw3uM/

非常感谢！

score 1 · Accepted Answer

这是纯 html ：任何在之后加载的 div 元素（意味着出现在 html 页面之后）将始终在前面。

为了使第一个图表工具提示位于第二个之前：首先加载第二个并使用 css 中的绝对或相对位置设置其在页面上的 y 位置：

我改变了他们的顺序，将container2放在 html 中的第一位：

<div id="container2" style="height: 200px"></div>
<div id="container1" style="height: 200px"></div>

然后将container2的位置设置在第一个之下（感谢 top 样式属性）：

div[id="container2"] {
    position:absolute;
    top:200px;
}

score 0 · Accepted Answer

0

您可以使用工具提示 pisitioner：

于 2013-05-09T10:33:21.943 回答

score 0 · Accepted Answer

问题是由于每个 highchart 容器都有自己的堆叠上下文。这是因为 highcharts-container 同时具有position: relative和z-index: 0（css 由 highcharts 库动态应用）。

因此，工具提示的 z-index 仅在其父 highchart 容器中才有意义。

要解决此问题，我们需要使用以下命令覆盖 highcharts-container 的 (z-index: 0) 规则：

.highcharts-container 
{ 
    z-index: auto !important;
    ...
}

这样，所有 hightcharts-containers 及其子容器将共享相同的堆叠上下文，并且它们的 z 索引将应用所需的效果。

你可以在这里检查修复：http: //jsfiddle.net/w5bLo1cw/4/

3 回答 3