Highcharts工具提示溢出已隐藏

Question

我的问题是，当的图表绘图区域小于highchart工具提示时，工具提示的一部分会隐藏在溢出图表绘图区域的位置。

我希望工具提示始终可见，无论图表绘图区域的大小如何。

CSS设置没有帮助，更高的z-index设置也没有帮助。

这是我的例子..。http://twitpic.com/9omgg5

任何帮助都会得到很大程度上的重视。

谢谢。

Answer 1

好的，很抱歉让你久等了。我找不到更好的解决方案，但我找到了一个变通办法。

以下是我所做的，并建议每个人尝试：

将tooltip.useHTML属性设置为true (现在您可以使用html和CSS进行更多控制)。如下所示：

tooltip: {
    useHTML: true    
}

取消设置所有可能与默认工具提示功能有关的默认工具提示人员。这就是我所做的。

tooltip: {                        
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

确保图表容器的css属性"overflow“设置为可见。还确保所有DOM元素(div、节等...)保存图表容器还将css "overflow“属性设置为"visible”。通过这种方式，您将确保您的工具提示将始终可见，因为它溢出他的父母和他的其他“祖先”(这是一个正确的术语？:))。

使用标准的CSS样式自定义您的工具提示格式化工具。这里是我所做的：

tooltip.formatter: {
    < div class ="tooltipContainer"> Tooltip content here < /div >
}

这一切看起来是这样的：

tooltip: {                        
    tooltip.formatter: {
        < div class ="tooltipContainer"> Tooltip content here < /div >
    },
    useHTML: true,
    shared: false,
    borderRadius: 0,
    borderWidth: 0,
    shadow: false,
    enabled: true,
    backgroundColor: 'none'
}

如果你有更好的解决方案，请发帖。

Answer 2

这个css帮助了我：

.highcharts-container { overflow: visible !important; }

Answer 3

一种现代的方法(Highcharts 6.1.1和更高版本)是简单地使用tooltip.outside (API)：

是否允许在图表的SVG元素框之外呈现工具提示。默认情况下(false)，工具提示在图表的SVG元素中呈现，这导致工具提示在图表区域内对齐。对于较小的图表，这可能会导致裁剪或重叠。如果为true，则会创建一个单独的SVG元素并将其覆盖在页面上，从而允许在页面内部对齐工具提示。

很简单，这意味着将这一个值设置为true，例如：

Highcharts.chart('container', {
    // Your options...
    tooltip: {
        outside: true
    }
});

请参阅this JSFiddle demonstration，了解如何将此值设置为true来解决空间/剪裁问题。