javascript - Showing multiple Tooltips in highcharts simultaneously - Stack Overflow

admin管理员组

文章数量:1391960

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 : /

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

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 ?

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

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 ?

• javascript
• jquery
• charts
• highcharts

Share Improve this question Follow edited Mar 7, 2015 at 20:05 Halvor Holsten Strand 20.6k1717 gold badges8888 silver badges102102 bronze badges asked Mar 7, 2015 at 18:40 KumaranKumaran 30944 silver badges1111 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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 mented):

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

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.

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".

Write following in your tooltip block if you dont want a one mon tooltip.

tooltip: {
        enabled: true,
        shared : false
    }

本文标签： javascriptShowing multiple Tooltips in highcharts simultaneouslyStack Overflow