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

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

1 个答案: