动态更改Highstock范围

Question

我想动态更改图表中的范围。如果我从一个大的价值走向一个小的，一切正常。但如果我想再次走向更大，没有任何反应。

你可以在这里试试这个：http://jsfiddle.net/Charissima/wkBwW/15/

点击按钮 '范围50' 和后记 '范围20'。 然后再次'范围50'。你可以看到颜色变化，但不是范围。

我努力想弄清楚如何解决这个问题，但没有成功。我希望有人能帮助我。

<div id="container" style="height: 400px; min-width: 600px"></div> 

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

<button id="button_20">Range 20</button> 
<button id="button_50">Range 50</button> 

$(function() { 
$('#container').highcharts({ 

    chart: { 
    }, 

    rangeSelector: { 
     enabled: false   
    }, 

    exporting: { 
     enabled: false 
    }, 

    title : { 
     text : 'Ranges' 
    }, 

    navigator: { 
     enabled: true, 
    }, 

    xAxis: { 
     lineColor: '#ffcc00' 
    }, 

    series : [{ 
     name : 'Random data', 
     data : (function() { 
      // generate an array of random data 
      var data = [], i; 
      for(i = 1; i <= 100; i++) { 
       data.push([ 
        i, 
        Math.round(Math.random() * 100) 
       ]); 
      } 
      return data; 
     })() 
    }] 

}); 

// the button action 
$('#button_20').click(function() { 
    var chart = $('#container').highcharts(); 
    chart.xAxis[0].update({ 
     lineColor: '#00ff00',   
     range: 20 
    });  
}); 

$('#button_50').click(function() { 
    var chart = $('#container').highcharts(); 
    chart.xAxis[0].update({ 
     lineColor: '#E22636',   
     range: 50 
    });  
    });   
}); 

Answer 1

您是否尝试过使用setExtremes（）http://api.highcharts.com/highstock#xAxis.events.setExtremes允许定义范围。

编辑： 示例：http://jsfiddle.net/wkBwW/16/