如何将highcharts工具提示定位在图表上方，外部：true

Question

我有一个系统，里面有很多高图表，基本上可以定位在页面的任何位置。 有些非常小（例如 50px x 50px）。 我知道我们可以设置tooltip.outside : true

tooltip: {
    outside: true
}

这会阻止工具提示通过将其从图表中分离出来并进入窗口来接管整个图表容器。 但是，当您靠近页面边缘时，这可能会导致窗口溢出问题，我个人更喜欢静态工具提示。

我希望始终将工具提示固定在图表上方，左上角有一点填充，这对于我的应用程序来说几乎总是可见的，并且可以避免溢出问题，例如；

我已经研究过设置custom positioner，但是，由于“外部”工具提示现在是窗口的一部分而不是相对于图表，定位器设置了一个固定位置，这不适合我的应用程序. 无论鼠标或滚动位置如何，我都希望工具提示始终位于图表上方。

当然，我可以自己添加一个自定义元素并将其放置在图表上方，然后将工具提示应用于该元素，但是我们有很多图表，这似乎很麻烦。

Tooltip outside Fiddle

建议？ 谢谢

Answer 1

在 highstock Tooltip.prototype.getPosition 代码中摸索了一下之后，我发现我需要的是 this.point.chart.pointer.getChartPosition();

        tooltip: {
            distance: 40,
            outside: true,
            positioner: function () {
                var point = this;
                var chart = point.chart;
                var chartPosition = chart.pointer.getChartPosition();
                var distance = point.distance;

                //Position relative to renderTo container
                return {
                    x: chartPosition.left - distance,
                    y: chartPosition.top - distance - (point.options.useHTML == true ? point.label.div.offsetHeight : point.label.height)
                }

                //Alternatively - Position relative to chart plot (ignoring legend)
                var containerScaling = chart.containerScaling;
                var scaleX = function (val) {
                    return (containerScaling ? val * containerScaling.scaleX : val);
                };
                var scaleY = function (val) {
                    return (containerScaling ? val * containerScaling.scaleY : val);
                };

                return {
                    x: chartPosition.left - distance + scaleX(chart.plotLeft),
                    y: chartPosition.top - distance + scaleY(chart.plotTop) - point.label.height
                }
            },
        },

See working fiddle.

我觉得这个方法附加到指针上很奇怪，但这是我所追求的。

需要注意的一点，在小提琴中我使用point.label.height, if useHTML:true;使用 point.label.div.height。

Answer 2

如果不设置 'outside' 选项而使用 positioner 回调呢？它将在图表区域内设置想要的位置。

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

API：https://api.highcharts.com/highcharts/tooltip.positioner