有没有办法在 Highcharts 中的某个点的 mouseOver 上获取相对于页面的鼠标坐标？

Question

我正在尝试制作一个 highchart 样条图，其中 tooltip 定位到 right corner 并且在 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

有没有办法在 Highcharts 中的某个点的 mouseOver 上获取相对于页面的鼠标坐标？

Is there a way to get the mouse coordinates with respect to page on mouseOver of a point in Highcharts?

javascript

jquery

highcharts

angular2-highcharts