動態更改標籤以顯示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。