在高图上的重叠点上显示多个工具提示 [英] Show multiple Tooltips in highcharts on overlapping points

问题描述

仅当多个序列点重叠时，才需要在高图表中显示多个工具提示.

Need to show multiple tooltips in the highchart only when multiple series points are overlapping.

我可以通过以下链接实现相同的功能. https://stackoverflow.com/questions/28918567/showing-multiple-tooltips-in-highcharts-同时

same functionality I can achieve through the below link. https://stackoverflow.com/questions/28918567/showing-multiple-tooltips-in-highcharts-simultaneously

但是我在这里面临的唯一问题始终是在悬停在单个序列上时显示重复的工具提示(与上面的示例不同，我使用时间序列图，以使折线点是连续的.)

But the only problem I am facing here is always showing duplicate tooltip on hover over the single series (Unlike the above example here I am using time-series chart so that the line points will be continuous).

请帮助我解决这个问题.

please help me to solve this problem.

嗨@ppotaczek， 这是我在摆弄时遇到的问题- brfLdv7o

Hi @ppotaczek, This is the issue I am facing in this fiddle - brfLdv7o

显示蓝色的工具提示，即使我将鼠标悬停在黄色系列上也是如此. 请检查随附的屏幕截图.

Showing a blue tooltip, Even though I hovered the yellow series line. please check the attached screenshot.

推荐答案

您可以使用tooltip.split属性来呈现多个工具提示，并在工具提示refresh方法包装中隐藏不必要的工具提示:

You can use tooltip.split property to render multiple tooltips and hide unnecessary ones in tooltip refresh method wrap:

(function(H) {
    H.wrap(H.Tooltip.prototype, 'refresh', function(proceed, points) {
        var split = false,
            labels;

        proceed.apply(this, Array.prototype.slice.call(arguments, 1));

        labels = this.label.element.children;

        for (var i = 1; i < points.length; i++) {
            if (
                points[i - 1].x === points[i].x &&
                points[i - 1].y === points[i].y
            ) {
                split = true;
                break;
            }
        }

        if (!split) {
            points.forEach(function(p) {
                if (p.hoveredPoint) {
                    labels[p.series.index].setAttribute('opacity', 1);
                    p.hoveredPoint = false;
                } else {
                    labels[p.series.index].setAttribute('opacity', 0);
                    p.setState('');
                }
            }, this)
        } else {
            points.forEach(function(p) {
                labels[p.series.index].setAttribute('opacity', 1);
            })
        }
    });
}(Highcharts));

Highcharts.chart('container', {
    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function(event) {
                        this.hoveredPoint = true;
                    }
                }
            },
        }
    },

    ...
});

---

实时演示: http://jsfiddle.net/BlackLabel/ymr1xbnh/

文档: https://www.highcharts.com/docs/extending-highcharts

API参考:

https://api.highcharts.com/highcharts/tooltip.split

https://api.highcharts.com/highcharts/series .line.point.events.mouseOver

这篇关于在高图上的重叠点上显示多个工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！