动态更改标签以显示y轴的最小值和最大值

Question

我想使用按钮获取y轴最小值和最大值标签。当我选择不同的图表显示时，它应该更新标签。 现在，如果我单击获取标签按钮并显示正确的极值标签，但如果继续点击范围按钮或输入范围框，它将不会自动更新标签。 如何解决这个问题？感谢 这里是jsfiddle链接JS

的html代码：

<script src="http://code.highcharts.com/stock/highstock.js"></script> 
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script> 

<div id="container" style="height: 400px; min-width: 310px"></div> 
<button id="button">Get Y axis extremes</button> 

我的js代码：

$(function() { 

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-c.json&callback=?', function(data) { 
     // Create the chart 
     $('#container').highcharts('StockChart', { 


      rangeSelector : { 
       selected : 1, 
       inputEnabled: $('#container').width() > 480 
      }, 

      title : { 
       text : 'AAPL Stock Price' 
      }, 

      series : [{ 
       name : 'AAPL', 
       data : data, 
       tooltip: { 
        valueDecimals: 2 
       } 
      }] 
     }); 
     // the button action 
    $('#button').click(function() { 
     var chart = $('#container').highcharts(), 
      extremes = chart.yAxis[0].getExtremes(); 

     chart.renderer.label(
      'dataMax: '+ extremes.dataMax +'<br/>'+ 
      'dataMin: '+ extremes.dataMin +'<br/>'+ 
      'max: '+ extremes.max +'<br/>'+ 
      'min: '+ extremes.min +'<br/>', 
      100, 
      100 
     ) 
     .attr({ 
      fill: '#FCFFC5', 
      zIndex: 8 
     }) 
     .add(); 

     //$(this).attr('disabled', true); 
    }); 
    }); 

}); 

Answer 1

使用chart redraw event。

让你的标签添加一个功能：

function addLabel(){ 
    var chart = $('#container').highcharts(), 
      extremes = chart.yAxis[0].getExtremes(); 

     chart.renderer.label(
      'dataMax: '+ extremes.dataMax +'<br/>'+ 
      'dataMin: '+ extremes.dataMin +'<br/>'+ 
      'max: '+ extremes.max +'<br/>'+ 
      'min: '+ extremes.min +'<br/>', 
      100, 
      100 
     ) 
     .attr({ 
      fill: '#FCFFC5', 
      zIndex: 8, 
      id :'myLabel' 
     }) 
     .add(); 
} 

然后在事件中，如果标签之前已添加更新：

 chart: { 
      events: { 
       redraw: function() { 
        var oL = $('#myLabel'); 
        if (oL.length){ 
         oL.remove(); 
         addLabel(); 
        } 
       } 
      } 
     }, 

这里有一个更新fiddle。