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

Question

我试图有一个定位到的highchart样条图，并在特定点上有另一个工具提示。所以基本上我想为某些点展示两个工具提示。到目前为止，我只能在事件信息与页面坐标相关的事件中做到这一点。有没有办法我们可以为同一点显示两个？我想定位在点的旁边，如下图所示。tooltipright cornermouseoverclickmousetooltipsone tooltipright cornerother oneJSfiifle

"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();
            }
          }
        }

这是Jsfiddle http://jsfiddle.net/zLpakfj2/4/

标签： javascriptjqueryhighchartsangular2-highcharts

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