Modification dynamique de la plage dans Highstock

Question

Je souhaite modifier dynamiquement la plage d'un graphique. Si je passe d'une grande valeur à une plus petite, tout fonctionne bien. Mais si je veux aller au plus grand encore, rien ne se passe.

Vous pouvez essayer ici: http://jsfiddle.net/Charissima/wkBwW/15/

Cliquez sur le bouton 'Range 50' et postfaces Range 20 '. Puis "Range 50" à nouveau. Vous pouvez voir la couleur changer mais pas la gamme.

J'ai essayé dur de comprendre comment résoudre ce problème, mais sans succès. J'espère que quelqu'un peut m'aider.

<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

Avez-vous essayé d'utiliser setExtremes() http://api.highcharts.com/highstock#xAxis.events.setExtremes qui permettent de définir gamme.

EDIT: Exemple: http://jsfiddle.net/wkBwW/16/