如何使高图工具提示在显示后可滚动

How to make hightcharts tooltip scrollable after it displays?

本文关键字：滚动 显示 何使高 工具提示      更新时间：2023-09-26

我正在使用highcharts并且我已经定义了自己的工具提示格式化程序返回一个由div包装的表，因此如果数据太多，则会出现滚动条。

我写了一个快速演示来展示这里的问题demo_not_able_to_scroll

问题是，如果每个图表都太闭合，用户将无法让鼠标进入工具提示，因为当他们稍微移动鼠标时，会显示另一个工具提示，但他们必须将鼠标放入工具提示，否则他们无法向下滚动以查看其余结果。

有什么方法可以让工具提示在不输入鼠标的情况下滚动，例如在工具提示显示后让它聚焦？

我的造型是这样的：

options.tooltip.formatter = function () {
    var s='<div style="padding:5px;"><b>' + xName +' </b></div> '+
                '<div style="max-height:250px ;min-width: 170px; overflow-y:auto;overflow-x:hidden ">'+ //make a scroll bar to y axis when over 250px
                    '<table style="width: 150px">';
                     +......'</table></div>'
     return s  
}

您可以禁用 defult 工具提示，并准备额外的div（绝对定位）。然后在点上捕获鼠标悬停事件，并用内容填充工具提示，设置正确的位置。

 plotOptions: {
                series: {
                    stickyTracking: true,
                    point: {
                        events: {
                            mouseOver: function (e) {
                                receive = 'y: ' + this.y;
                                $('#customTooltip').html(receive)
                                .css({
                                    top: e.target.plotY,
                                    left:  e.target.plotX
                                })
                                .show();
                            },
                        }
                    }
                }
            },

例：- http://jsfiddle.net/Lhzyfrzt/11/

相关文章：