同时在高图中显示多个工具提示

Showing multiple Tooltips in highcharts simultaneously

我想在 Highchart 中同时显示多个工具提示。基本要求就像每当鼠标悬停在系列中的一个点上时,我需要为悬停点的半径 X 内的所有点显示工具提示。到目前为止,我已经尝试过这样的事情:http://jsfiddle.net/vmso2dbf/

$(function () {
    $('#container').highcharts({

        title: {
            text: 'Multiple tooltips'
        },
        plotOptions: {
            series: {
                point: {
                    events: {
                        mouseOver: function (event) {
                            var r = 50;
                            var arr = [];
                            var chart = this.series.chart;
                            var currX = this.plotX;
                            var currY = this.plotY;
                            var points = this.series.points;
                            for(var i=0;i<points.length;i++){
                                var xdiff = currX - points[i].plotX;
                                var ydiff = currY - points[i].plotY;
                                var distance = Math.abs(xdiff*xdiff - ydiff*ydiff);
                                if(distance < r*r)
                                    arr.push(points[i]);
                            }
                            chart.tooltip.refresh(arr);
                        }
                    }
                },
            }
        },

        tooltip: {
            enabled: true,
            shared : true
        },

        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    });
});

但我同时需要多个工具提示,而不是针对所有相关点的一个大工具提示。如果可能的话,是否有办法让这些工具提示根据可用的 space 自对齐? Highcharts 中有没有现有的 plugin/feature 可以帮助我解决这个问题?

如果您不想要一个通用的工具提示,请在您的工具提示块中写下以下内容。

tooltip: {
        enabled: true,
        shared : false
    }

实现此目的的一种方法是克隆工具提示。此外,当您不断将鼠标悬停在新点上时,您将必须跟踪克隆,以正确删除旧工具提示并添加新工具提示。

添加到您的代码的示例是(新代码已注释):

// Array for keeping track of open tooltips
var openTooltips = [];

$('#container').highcharts({
     // Skipping irrelevant options

    plotOptions: {
        series: {
            point: {
                events: {
                    mouseOver: function (event) {
                        var chart = this.series.chart;

                        // Remove any currently open tooltips
                        for(var i = 0; i < openTooltips.length; i++) {      
                            chart.container.firstChild.removeChild(openTooltips[i]);
                        }
                        // Reset array
                        openTooltips = [];

                        var r = 50;
                        var currX = this.plotX;
                        var currY = this.plotY;
                        var points = this.series.points;
                        for(var i=0;i<points.length;i++){
                            var xdiff = currX - points[i].plotX;
                            var ydiff = currY - points[i].plotY;
                            // Changed distance formula to use plus instead of minus
                            var distance = Math.abs(xdiff*xdiff + ydiff*ydiff);
                            if(distance < r*r) {
                                // Open the tooltip for the point
                                chart.tooltip.refresh([points[i]]);
                                // Clone tooltip and add it to array
                                openTooltips.push(this.series.chart.tooltip.label.element.cloneNode(true));
                                // Append tooltip to show it in chart
                                chart.container.firstChild.appendChild(openTooltips[openTooltips.length-1]);
                            }
                        }
                    }
                }
            },
        }
    },

    tooltip: {
        enabled: true,
        shared : true,
        animation: false // Disable animation to get correct tooltip positions
    }
});

如您所见,大部分更改都在克隆工具提示并跟踪它们。请注意,工具提示动画已被禁用以避免工具提示放错位置。我还将您的 distance 公式从差值更改为求和,这在求欧氏距离时很正常。

参见 this JSFiddle example of how it looks and works. The tooltip code in this answer is strongly inspired by Marks answer "Keep tooltip showing on click"。