Question

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

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

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

任何帮助都将大部分都是贬值的。

谢谢。

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”设置为可见。还要确保包含图表容器的所有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

在我的案例中添加简单的CSS（表格单元格中的minicharts）：

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

不需要工具提示选项useHtml：

tooltip: {
    useHTML: false
}

适用于IE8 / 9＆amp; FF33.1（FF造成麻烦）。

Answer 4

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

这些解决方案都没有奏效，但我自己找到了。

由于bootstrap _normalizer属性

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

所以加上两个：

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

Answer 5

我知道这个问题很老但我只是想分享我的解决方案，这是基于其他两个答案，但我认为你使用这个代码获得了更好看的结果：

工具提示选项：

tooltip: {
   useHTML: true,
   shared: false,
   borderRadius: 0,
   borderWidth: 0,
   shadow: false,
   enabled: true,
   backgroundColor: 'none',
   formatter: function() {
      return '<span style="border-color:'+this.point.color+'">' + this.point.name + '</span>';
   }
}

<强> CSS：

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

.highcharts-tooltip span>span {
    background-color:rgba(255,255,255,0.85);
    border:1px solid;
    padding: 2px 10px;
    border-radius: 2px;
}

#divContainerId .highcharts-container{
    z-index: 10 !important; /*If you have problems with the label hiding behind some other div or chart play with z-index*/
}

Answer 6

一种现代方法（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来解决空间/剪切问题。

Highcharts工具提示溢出被隐藏

6 个答案: