javascript - 如何制作交互式 Highcharts 工具提示

Question

我遇到了包含可点击元素的 Highcharts 工具提示。问题是您无法可靠地点击它们。

增加 tooltip.hideDelay 可以更轻松地在工具提示内单击。这并不能完全解决问题。

我希望能够在工具提示内悬停并单击，只要我愿意。仅当鼠标指针离开工具提示时才应将其关闭。

Answer 1

我的解决方案是设置一个很长的超时来隐藏工具提示。在自己处理一些悬停逻辑时将其关闭。

    Highcharts.chart('my_chart', {
        tooltip: {
            // Show the tooltip for a really long time
            hideDelay: 9999999
        },
        plotOptions: {
            series: {
                events: {
                    mouseOver: function () {
                        // Restore the tooltip after hiding
                        // that's done in mouseOut
                        if (this.chart.tooltip.label) {
                            var show = this.chart.tooltip.label.show
                                    .bind(this.chart.tooltip.label);
                            show();
                        }
                    },
                    mouseOut: function () {
                        // Get a hold of the tooltip and hide it
                        // on "mouseout"
                        var label = this.chart.tooltip.label,
                            div = $(label.div),
                            hide = label.hide
                                .bind(label);

                        div.on('mouseenter', function () {
                            div.on('mouseleave', function () {
                                hide();
                                div.off('mouseleave');
                            });
                        });
                    }
                }
            }
        } 
    });

我能想到的一个缺点是工具提示会粘住。除非您在任何时间点将其悬停。或者将鼠标悬停在另一个 Highcharts 系列上。您可以在任何工具提示外部单击时向正文添加监听器，以消除任何残留的提示。