在高图中同时显示多个工具提示 [英] Showing multiple Tooltips in highcharts simultaneously

问题描述

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

I want to show multiple tool tips at the same time in a Highchart. The basic requirement is like whenever the mouse is hovered over a point in the series I need to show the tool tip for all the points within a radius X of the hovered point. I have tried something like this so far : 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中是否有任何现有的插件/功能可以帮助我解决此问题?

But I need multiple tool tips at the same time and not just one big tool tip for all the points concerned. If that is possible , is there a way to get these tool tips self aligned as per the space available ? Is there any existing plugin/feature in Highcharts that can help me solve this problem ?

推荐答案

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

A way to achieve this is to clone tooltips. In addition you will have to keep track of the clones as you keep hovering over new points, to correctly remove old tooltips and add new ones.

一个添加到您的代码中的示例是(注释了新代码):

An example which adds to your code would be (new code is commented):

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

As you can see most of the changes are in cloning the tooltip and keeping track of them. Note that tooltip animation has been disabled to avoid misplaced tooltips. I also changed your distance formula from a difference to a sum, as is normal in finding Euclidean distance.

请参见此JSFiddle示例，以了解其外观和工作方式.此答案中的工具提示代码受将答案标记为的保持点击时显示工具提示"的强烈启发.

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

这篇关于在高图中同时显示多个工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！