我想在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答案“保持点击时显示工具提示”的强烈启发。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句