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公式从差异改为总和，这与寻找欧几里德距离一样正常。

请参阅this JSFiddle example它的外观和工作原理。此答案中的工具提示代码受到Marks answer的强烈启发，因为＆＃34;保持工具提示显示在点击＆＃34;。

Answer 2

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

tooltip: {
        enabled: true,
        shared : false
    }

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

2 个答案: