Highcharts工具提示溢出被隐藏

Question

我的问题是,当图表绘制区域小于高图工具提示时,工具提示的一部分被隐藏在溢出图表绘制区域的位置.

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

没有CSS设置有帮助,也没有更高的z-index设置帮助.

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

任何帮助将主要是apreciated.

谢谢.

Answer 1

这个CSS帮了我:

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

Answer 2

好的,抱歉延误了.我找不到更好的解决方案,但我找到了解决方法.

这是我做的以及我建议大家尝试的内容:

将tooltip.useHTML属性设置为true(现在您可以使用html和CSS进行更多控制).像这样:

tooltip: {
    useHTML: true    
}

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

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

确保图表容器的css属性"overflow"设置为visible.还要确保包含图表容器的所有DOM元素(div,section等等)也将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 3

一种现代方法（Highcharts 6.1.1 和更新版本）是简单地使用tooltip.outside（API）：

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

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

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

请参阅此 JSFiddle 演示，了解如何设置此值以true修复空间/裁剪问题。

Answer 4

简单地添加这个CSS在我的情况下工作(表格单元格中的minicharts):

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

工具提示选项useHtml不是必需的:

tooltip: {
    useHTML: false
}

适用于IE8/9和FF33.1(FF导致故障).

Answer 5

我最近遇到了同样的问题，但是使用了bootstrap container！（bs3）

这些解决方案均无效，但我自己找到了。

这是由于bootstrap _normalizer属性

svg:not(:root) {
  overflow: hidden !important;
}

因此，请同时添加：

.highcharts-container, svg:not(:root) {
    overflow: visible !important;
}