时间戳

首页 > 解决方案 > 如何将highcharts工具提示定位在图表上方，外部：true

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

问题描述

我有一个包含大量高图的系统，它们基本上可以定位在页面上的任何位置。有些非常小（例如 50px x 50px）。我看到我们可以设置tooltip.outside : true

tooltip: {
    outside: true
}

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

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

左上方

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

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

Fiddle 外的工具提示

建议？谢谢

标签： highcharts

解决方案

在 highstock Tooltip.prototype.getPosition 代码中摸索了一下之后，我发现我需要的是 this.point.chart。指针.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
                }
            },
        },

见工作小提琴。

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

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

推荐阅读