Highcharts图线，其左侧带有标签

Question

我想使Highcharts PlotLine标签与线（而不是顶部或底部）对齐。有可能吗？

谢谢！

Answer 1

我认为最简单的方法是渲染plotLine并在其上添加自定义标签以覆盖该行的一部分。

演示：https://jsfiddle.net/BlackLabel/b50k6hov/

代码：

  chart: {
    events: {
      render() {
        let chart = this,
          plotLineCor = chart.yAxis[0].plotLinesAndBands[0].svgElem.d.split(' '),
          x = plotLineCor[1],
          y = plotLineCor[2];

        if (!chart.label) {
          // render label in init position
          chart.label = chart.renderer.label('TEXT', 0, 0)
            .css({
              color: 'red'
            })
            .attr({
              fill: 'white',
              padding: 12,
              zIndex: 6
            })
            .add();
        }

        // translate label after reach resize
        chart.label.translate(x, y - chart.label.getBBox().height / 2)
      }
    }
  },

API：https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

API：https://api.highcharts.com/highcharts/chart.events.render