高图表工具提示溢出处于隐藏状态

Highcharts tooltip overflow is hidden

本文关键字：隐藏 状态 于隐藏 工具提示 溢出 高图表      更新时间：2023-09-26

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

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

没有CSS设置帮助，也没有更高的z索引设置帮助。

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

任何帮助都将得到大部分的赞赏。

谢谢。

这个css帮助了我：

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

好的，很抱歉耽搁了。我找不到更好的解决方案，但我找到了解决方法。

以下是我所做的，我建议大家尝试一下：

将 tooltip.useHTML 属性设置为 true（现在您可以使用 html 和 CSS 进行更多控制）。喜欢这个：

tooltip: {
    useHTML: true    
}

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

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

确保图表容器的 css 属性"溢出"设置为可见。还要确保保存图表容器的所有 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'
}

如果您有更好的解决方案，请发布。

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

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

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

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

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

简单地添加这个 CSS 在我的情况下有效（表格单元格中的迷你图表）：

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

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

tooltip: {
    useHTML: false
}

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

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

这些解决方案都不起作用，但我自己找到了。

这是由于自举_normalizer属性

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

所以添加两者：

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

这个问题很旧，但我只是想分享我的解决方案，它基于其他两个答案，但我认为您可以使用以下代码获得更好看的结果：

工具提示选项：

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*/
}

没有一个解决方案对我有用。当工具提示大于图表时，它根本不显示。

最终我们意识到 Highcharts 实际上隐藏了类highcharts-tooltip-box中的工具提示，因此解决方案是将其设置为继承该类默认的：

 .highcharts-tooltip-box {
    visibility: inherit !important;
  }

之后，溢出仍然需要设置为可见：

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

如果遇到任何问题，请确保将容器中的 z 索引设置得更高。

我只想添加一个示例并证明.highcharts-tooltip-box不必设置为溢出即可工作。

/* .highcharts-tooltip-box {
  visibility: inherit !important;
} */
.highcharts-container,
svg:not(:root),
.chart-container {
  overflow: visible !important;
}

演示：https://jsfiddle.net/BlackLabel/3fubr1av/

相关文章：