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

Showing multiple Tooltips in highcharts simultaneously

本文关键字：工具提示 显示 高图表      更新时间：2023-09-26

我想在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中是否有任何现有的插件/功能可以帮助我解决这个问题？

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

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

// 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关于"点击时保持工具提示显示"的回答的强烈启发。

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

tooltip: {
        enabled: true,
        shared : false
    }
相关文章：