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

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

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

Answer 1

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

tooltip: {
        enabled: true,
        shared : false
    }

Answer 2

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

添加到您的代码的示例是（新代码已注释）：

// 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"。

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

Showing multiple Tooltips in highcharts simultaneously

javascript

jquery

charts

highcharts