HighCharts。在X轴上做注解？

Question

图片胜于文字。在X轴上方或下方做注解

如何获得这些注释的y坐标？

这是目前的代码，有一个虚拟的y。

var chart = Highcharts.chart('container', {

  series: [{
    data: [29.9, 71.5, 106.4, -129.2, -144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

var LineVal = 5.5;

// the button action
$button = $('#button');

$button.click(function() {
  chart.xAxis[0].addPlotLine({
    value: LineVal,
    color: 'red',
    width: 2,
    id: 'plot-line-1'
  });

  chart.addAnnotation({
    labels: [{
      point: {
        x: LineVal,
        xAxis: 0,
        y: 0,
        yAxis:0
      },
      text: LineVal.toFixed(2),
      backgroundColor: 'black'
    }],
  });
  
});

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/annotations.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Add plot line</button>

jsfiddle

Answer 1

我认为更好的解决办法是使用 图表渲染器 工具来渲染一个可以动态放置的标签。

演示。http:/jsfiddle.netBlackLabel0e4vrytc

 let label = chart.renderer.label(LineVal, 0, 0, 'callout', 17.5, -50)
    .css({
      color: '#FFFFFF'
    })
    .attr({
      fill: 'rgba(0, 0, 0, 0.75)',
      padding: 8,
      r: 5,
      zIndex: 6
    })
    .add();
        label.translate(chart.xAxis[0].toPixels(LineVal) - label.getBBox().width / 2, chart.plotHeight + chart.plotTop)

API。https:/api.highcharts.comclass-referenceHighcharts.SVGRenderer#label。