如何将工具提示放置在高图表 x 范围内的点上方

Question

我创建了一个高图表x范围图表，在一个类别中有多个系列。工具提示显示在类别中间上方。我希望它显示在每个 x 范围点上方。我该怎么做？

我试图覆盖工具提示定位器。但是参数点包含值 plotX 和 plotY，就像它放在 y 值的中间一样，我无法计算它的真实位置。

this.tooltipPositioner = function(labelWidth, labelHeight, point){
  return {
    x: point.plotX,
    y: point.plotY
  };

};

现场演示：https://jsfiddle.net/levra/mh7uj93r/

Answer 1

您可以使用

tooltip.positioner但可以使用悬停的点对象，而不是参数点，您可以在其中找到正确的点图值。要获取悬停的点对象plotOptions.series.point.events.mouseOver请使用回调。检查下面发布的代码和演示：

.HTML：

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>

.JS：

var hoveredPoint;
var chart = Highcharts.chart('container', {
  chart: {
    type: 'xrange'
  },
  title: {
    text: 'Highcharts X-range'
  },
  xAxis: {
    type: 'datetime'
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true
  },
  tooltip: {
    positioner: function(labelWidth, labelHeight) {
      var x = hoveredPoint.shapeArgs.x,
        y = hoveredPoint.shapeArgs.y,
        width = hoveredPoint.shapeArgs.width,
        tooltipOffsetTop = -10;
      return {
        x: x + chart.plotLeft + width / 2 - labelWidth / 2,
        y: y + chart.plotTop - labelHeight + tooltipOffsetTop
      }
    }
  },
  plotOptions: {
    xrange: {
      point: {
        events: {
          mouseOver: function() {
            hoveredPoint = this;
          },
          mouseOut: function() {
            hoveredPoint = null;
          }
        }
      }
    }
  },
  series: [{
      name: 'Project 1',
      // pointPadding: 0,
      groupPadding: 0,
      borderColor: 'gray',
      pointWidth: 20,
      data: [{
        x: Date.UTC(2014, 10, 21),
        x2: Date.UTC(2014, 11, 2),
        y: 0,
        partialFill: 0.25
      }, {
        x: Date.UTC(2014, 11, 2),
        x2: Date.UTC(2014, 11, 5),
        y: 1
      }, {
        x: Date.UTC(2014, 11, 8),
        x2: Date.UTC(2014, 11, 9),
        y: 2
      }, {
        x: Date.UTC(2014, 11, 9),
        x2: Date.UTC(2014, 11, 19),
        y: 1
      }, {
        x: Date.UTC(2014, 11, 10),
        x2: Date.UTC(2014, 11, 23),
        y: 2
      }],
      dataLabels: {
        enabled: true
      }
    },
    {
      name: 'Project 2',
      // pointPadding: 0,
      // groupPadding: 0,
      borderColor: 'gray',
      pointWidth: 20,
      data: [{
        x: Date.UTC(2014, 10, 23),
        x2: Date.UTC(2014, 11, 2),
        y: 0,
        partialFill: 0.25
      }],
      dataLabels: {
        enabled: true
      }
    }
  ]
});

演示：https://jsfiddle.net/BlackLabel/51gybnew/1/