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

Question

我想在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]
        }]
    });
});

但是我同时需要多个工具提示，而对于所有相关点而言，不仅需要一个大型工具提示。 如果可能，是否有办法使这些工具提示根据可用空间自动对齐？ Highcharts中是否有任何现有的插件/功能可以帮助我解决此问题？

Answer 1

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

一个添加到您的代码中的示例是（注释了新代码）：

// 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公式从差值更改为总和，这与查找欧几里得距离一样正常。

请参见此JSFiddle示例 ，以了解其外观和工作方式。 此答案中的工具提示代码受Marks答案 “保持点击时显示工具提示”的强烈启发。

Answer 2

如果您不希望使用一种常见的工具提示，请在工具提示栏中写以下内容。

tooltip: {
        enabled: true,
        shared : false
    }