HighCharts：X 轴上的注释？

Question

图胜于言： Annotation just above or below the X Axis

如何获取这些标注的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

我认为更好的解决方案是使用 chart.renderer 工具来呈现可以动态放置的标签。

演示：http://jsfiddle.net/BlackLabel/0e4vrytc/

 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.com/class-reference/Highcharts.SVGRenderer#label

HighCharts：X 轴上的注释？

HighCharts: Annotation on X axis?

axis

annotations

highcharts