Question

我创建了一个图表，其中包含多个系列的highcharts 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/

如何将工具提示放置在highcharts x范围内的上方？

1 个答案: