如何在highcharts x-range中将工具提示放在点上方？答案

【问题标题】：How to place tooltip above point in highcharts x-range?如何在highcharts x-range中将工具提示放在点上方？
【发布时间】：2019-01-24 03:59:12
【问题描述】：

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

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

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

};

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

【问题讨论】：

标签： highcharts

【解决方案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/

【讨论】：