如何在xrange highcarts中显示多个工具提示？

Question

我正试图在特定时间在图表渲染的xrange Highcharts上显示一些工具提示，但是尚无此功能，是否有可能显示以下工具提示

从这个例子中，我发现注释可以用来显示一些消息，我试图利用它。

function annotateChart({
  text,
  value
}) {
  const annons = this.annons;

  const label = this.renderer.label(text, 0, 0).attr({
    stroke: 'red',
    'stroke-width': 2,
    align: 'center',
    zIndex: 99,
    class: 'newText'
  }).add();

  annons.push({
    label,
    value
  });
}

function redrawAnnons() {
  const xAxis = this.xAxis[0];
  const yAxis = this.yAxis[0];

  this.annons.forEach(ann => {
    ann.label.animate({
      x: xAxis.toPixels(ann.value),
      y: yAxis.toPixels(-2.0)
    });
  });
}

Highcharts.chart('container', {
  chart: {
    type: 'xrange',
    marginTop: '55',
    events: {
      load: function() {
        this.annons = [];

        [{
          text: ['min', 'time', 'data', 'bluetooth'],
          value: Date.UTC(2014, 11, 2)
        }, {
          text: 'max',
          value: Date.UTC(2014, 11, 21, 5)
        }].forEach(obj => {
          annotateChart.call(this, obj);
        });

        redrawAnnons.call(this)
      },
      redraw: redrawAnnons
    }
  },
  title: {
    text: ''
  },
  xAxis: {
    type: 'datetime',
    minPadding: 0,
    opposite: true
  },
  yAxis: {
    title: {
      text: ''
    },
    categories: ['Prototyping', 'Development', 'Testing'],
    reversed: true,
    lineColor: '#2c2d39',
    lineWidth: 1
  },
  series: [{
    name: ' ',
    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: false
    }
  }]

});

#container {
  min-width: 300px;
  max-width: 800px;
  height: 190px;
  margin: 1em auto;
}

<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>

我不确定这是否是正确的方法，如果还有其他方法可以实现，则工具提示也会显示在图表的顶部空白处

  

marginTop：'55'

工具提示超过2个数据正在影响高图响应。