有没有一种方法可以在Highcharts中的某个点的mouseOver上获取鼠标相对于页面的坐标

Question

我正在尝试将tooltip定位到right corner的highchart样条曲线图，并在mouseover特定点上提供另一个工具提示。所以基本上，我想展示一些点的两个工具提示。到目前为止，我只能在click事件上做到这一点，其中我们使用相对于页面的mouse坐标来获取事件信息。有没有一种方法可以为同一点显示两个tooltips？我希望one tooltip位于该点旁边的right corner和other one处，如下面的JSfiifle所示。

"point": {
"events": {
"mouseOver": function(e) {
var selectedPoints = $('#' + this.series.chart.renderTo.id).highcharts().getSelectedPoints();
if (selectedPoints.length) {
selectedPoints[0].select();
}
if (e.target.marker && !e.target.marker.radius) {
return;
}
},
"mouseOut": function(e) {
util.hideBandInsightsPopup();
},
"click": function(e) {
if (e.point && e.point.marker && !e.point.marker.radius) {
return;
}
$("#factor-popup-content").html("my popup content");
var yPixel = e.pageY + 5;
var currentPointHeight = yPixel + $("#factor-popup").height();
if ($("#factor-popup").height() < 300 && currentPointHeight > $(window).height()) {
var adjustHeight = currentPointHeight - $(window).height() + 30;
yPixel = yPixel - adjustHeight;
}
$("#factor-popup").css({
'position': 'fixed',
'top': (yPixel) + 'px',
'left': (e.pageX) + 5 + 'px'
}).show();
}
}
}

这是Jsfiddlehttp://jsfiddle.net/zLpakfj2/4/

Answer 1

原始事件不会传递给mouseOver事件，但您可以通过以下方式将其添加到一个点：

(function(H) {
H.wrap(
H.Pointer.prototype,
'getHoverData',
function(
proceed,
existingHoverPoint,
existingHoverSeries,
series, isDirectTouch,
shared,
e
) {
var result = proceed.apply(this, Array.prototype.slice.call(arguments, 1));
if (result.hoverPoint) {
result.hoverPoint.originalEvent = e;
}
return result;
});
}(Highcharts));

---

现场演示：http://jsfiddle.net/BlackLabel/y18h30t4/

文档：https://www.highcharts.com/docs/extending-highcharts/extending-highcharts