Как поместить всплывающую подсказку над точкой в ​​х-диапазоне хай-чартов?

Question

Я создал диаграмму х-диапазона Highcharts с несколькими сериями в одной категории.Подсказки отображаются над серединой категории.Я бы хотел, чтобы он отображался над каждой точкой х-диапазона.Как я могу это сделать?

Я попытался переопределить позиционер всплывающей подсказки.Но точка аргумента содержит значения plotX и plotY, как будто она расположена в середине значения y, и я не могу рассчитать ее реальную позицию.

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

};

Live Demo: https://jsfiddle.net/levra/mh7uj93r/

Answer 1

Вы можете использовать tooltip.positioner, но вместо точки аргумента вы можете использовать объект с точечной наведением, где вы найдете правильные значения точечного графика.Для получения объекта наведения используйте plotOptions.series.point.events.mouseOver callback.Проверьте код и демоверсию, размещенную ниже:

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/