在重叠点的高图中显示多个工具提示

Question

仅当多个系列点重叠时才需要在高图中显示多个工具提示。

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

但我在这里面临的唯一问题是在将鼠标悬停在单个系列上时总是显示重复的工具提示（与上面的示例不同，这里我使用时间序列图，以便线点是连续的）。

请帮我解决这个问题。

---

嗨@ppotaczek， 这是我在这个小提琴中面临的问题 - brfLdv7o

显示蓝色工具提示，即使我悬停在黄色系列线。 请检查随附的屏幕截图。

Answer 1

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

(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