Question

我在迷你图高图容器上使用了全屏功能。类似和缩短的结果在这里可见：https://jsfiddle.net/vegaelce/avyrs5od/

全屏运行良好，但在全屏模式下，由于 tooltip.outside 参数（在我的情况下是必需的），工具提示不会显示：

    tooltip: {
        outside: true
    },

在这种情况下，工具提示的 div（highcharts-tooltip-container 类）是在“body”下自动创建的，而我需要它们是在“container”div 下创建的（因为它是全屏显示的容器 div）。

是否可以为外部工具提示指定特定的 div？

提前致谢

Answer 1

fullscreen 获取容器并拉伸整个屏幕，并且在外部时的工具提示：true 添加一个带有新 SVG 的新 div 到 body 的末尾 - 因此在全屏模式下无法看到它。解决方案可能是在代码中找到它被抛出到正文的末尾并将其移动到制作全屏的 div 的某个位置。一个小的包装应该可以解决这个问题 - 这个带有工具提示的 div 的位置在外面：ture 与其正确显示无关：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts

    (function(H){

H.wrap(H.Tooltip.prototype, 'getLabel', function (proceed) {
    // proceed
    var result = proceed.apply(this, [].slice.call(arguments, 1));
        
        if (
            (this.container || {}).parentElement === H.doc.body
        ) {
            // move to the top container for spark-line
            H.doc.getElementById('container').appendChild(this.container);
        }
        
        return result;
});

}(Highcharts));

演示： https://jsfiddle.net/BlackLabel/kwz0dme5/

Answer 2

对于自定义工具提示，您可以通过在定位器函数中添加 window.scrollY 来解决滚动主窗口时工具提示位置改变的问题。

var panelY = this.chart.plotHeight + this.chart.container.getBoundingClientRect().top + window.scrollY;

Highcharts 将外部工具提示添加到特定 div

2 个答案: