高图集-将y轴绘图线标签置于图表区域之外。

Question

如何将绘制线标签放置在图表区域外的yAxis上？或增加图表区域的外部宽度以显示绘制线标签。

​

​

JSFIDDLE

> yAxis: {
>     plotLines: [{
>       color: '#FF0000',
>       width: 1,
>       value: 15.9,
>       label: {
>         allowOverlap: false,
>         text: '15.9%<br> Average',
>         align: 'right',
>         style: {
>           color: 'blue',
>           fontWeight: 'normal',
>           fontSize: '10px'
>         }
>       },
>       zIndex: 5
>     }]   },

​

​

Answer 1

使用marginRight，并更新plotline标签

   label: {
    x: 50, //shifts right
    y:-15, //shifts top
  },

​

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
    marginRight: 100
  },
  xAxis: {
    categories: ['US']
  },
  yAxis: {
    plotLines: [{
      color: '#FF0000',
      width: 1,
      value: 15.9,
      label: {
        allowOverlap: false,
        text: '15.9%<br> Average',
        align: 'right',
        x: 50,
        y: -15,
        style: {
          color: 'blue',
          fontWeight: 'normal',
          fontSize: '10px'
        }
      },
      zIndex: 5
    }]
  },
  plotOptions: {
    series: {
      allowPointSelect: true
    }
  },
  series: [{
    data: [30.5]
  }]
});


// the button action
$('#button').click(function() {
  var selectedPoints = chart.getSelectedPoints();

  if (chart.lbl) {
    chart.lbl.destroy();
  }
  chart.lbl = chart.renderer.label('You selected ' + selectedPoints.length + ' points', 100, 60)
    .attr({
      padding: 10,
      r: 5,
      fill: Highcharts.getOptions().colors[1],
      zIndex: 5
    })
    .css({
      color: 'white'
    })
    .add();
});

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

<div id="container" style="height: 400px"></div>
<button id="button" class="autocompare">Get selected points</button>

​