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

Question

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

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

    tooltip: {
        outside: true
    },

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

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

提前致谢

Answer 1

fullscreen 获取容器并拉伸整个屏幕，外部时的工具提示：true 添加一个新的 div 和一个新的 SVG 到主体的末尾 - 所以它不能在全屏模式下看到。解决方案可能是在代码中找到它被扔到主体末尾的位置，并将其移动到制作全屏的 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 来解决滚动主 window 时工具提示位置发生变化的问题。

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

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

Highcharts add external tooltip into specific div

html

append

tooltip

highcharts