javascript - 在重叠点的 Highcharts 中显示多个工具提示

Question

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

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

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

请帮我解决这个问题。

---

嗨@ppotaczek，这是我在这个 fiddle 中面临的问题 - 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