Highcharts 工具提示溢出被隐藏

Posted 2023-02-16

【中文标题】Highcharts 工具提示溢出被隐藏

【英文标题】：Highcharts tooltip overflow is hidden

【发布时间】：2012-05-30 21:00:12

【问题描述】：

我的问题是，当图表绘制区域小于高图工具提示时，工具提示的一部分被隐藏在超出图表绘制区域的地方。

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

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

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

我们将非常感谢任何帮助。

谢谢。

【问题讨论】：

为什么这个问题没有被标记为“已回答”？几乎每个答案都是正确的。

【参考方案1】：

这个 CSS 帮助了我：

.highcharts-container  overflow: visible !important; 

【讨论】：

你必须添加，你也必须设置tooltip: usehtml: true

不适合我，只能将 svg css 属性设置为可见工作

两个 .highcharts-container 溢出：可见！重要； 和 svg 溢出：可见； 是必需的。

【参考方案2】：

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

这是我所做的以及我建议大家尝试的：

将 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“溢出”属性设置为“可见”。通过这种方式，您将确保您的工具提示始终可见，因为它会溢出他的父母和他的其他“祖先”（这是一个正确的术语吗？:)）。

使用标准 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'

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

【讨论】：

应该是最好的答案，对我帮助很大。

【参考方案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 修复空间/剪裁问题。

【讨论】：

这正是我所需要的，应该是原始问题的实际答案。

在尝试了这么多选项之后，这是解决我问题的一个，非常感谢:)

@Andy 我同意这是最好的答案，但是当被问到问题时，Highcharts 的最新版本类似于 2.2

【参考方案4】：

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

.highcharts-container svg 
    overflow: visible !important;

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

tooltip: 
    useHTML: false

适用于 IE8/9 和 FF33.1（FF 引起了问题）。

【参考方案5】：

我最近遇到了同样的问题，但是使用引导容器！ (bs3)

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

这是由于 bootstrap _normalizer 属性

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

所以添加两个：

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

【讨论】：

有趣，我会试试这个。在我看来，highcharts 应该可以解决这个问题

【参考方案6】：

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

工具提示选项：

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

【参考方案7】：

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

/* .highcharts-tooltip-box 
  visibility: inherit !important;
 */

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

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

【参考方案8】：

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

最终我们发现Highcharts其实隐藏了highcharts-tooltip-box类中的tooltip，所以解决方法是设置继承哪个类默认：

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

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

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

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