37

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

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

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

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

任何帮助都会很感激。

谢谢你。

4

8 回答 8

26

这个CSS帮助了我：

.highcharts-container { overflow: visible !important; }
于 2012-11-25T09:35:26.727 回答
15

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

这是我所做的，也是我建议大家尝试的：

将 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'
}

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

于 2012-06-11T07:14:54.730 回答
10

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

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

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

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

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

于 2018-08-10T12:32:45.923 回答
5

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

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

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

tooltip: {
    useHTML: false
}

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

于 2014-11-25T17:22:28.970 回答
5

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

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

它是由于 bootstrap _normalizer 属性

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

所以添加两者：

.highcharts-container, svg:not(:root) {
    overflow: visible !important;
}
于 2017-03-07T13:01:39.020 回答
2

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

工具提示选项：

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*/
}
于 2014-05-29T12:25:24.070 回答
1

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

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

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

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

于 2021-09-27T20:16:13.563 回答
0

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

最终我们意识到 Highcharts 实际上是把 tooltip 隐藏在了 classhighcharts-tooltip-box中，所以解决方法是设置它继承哪个 class 默认：

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

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

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

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

于 2021-09-27T06:52:27.080 回答