Highcharts showLoading() ne fonctionne pas comme prévu

Question

J'ai un tableau et un bouton qui appelle un traitement très lourd, comme dans cet exemple: http://jsfiddle.net/v97e5vs1/1/

$button.click(function() { 
     chart.showLoading(); 
     for (var i=0;i<20;i++) { 
       var d=[]; 
      for (var j=0;j<12;j++) { 
       d.push(Math.random()*200)    
         } 
     chart.addSeries({data:d});  
     } 
     chart.hideLoading(); 
}); 

Cependant, la fonction showLoading ne fonctionne pas comme prévu: la fenêtre du broser raccroche jusqu'à la fin du traitement.

Qu'est-ce qui ne va pas?

Answer 1

Pour améliorer les performances, vous pouvez demander aux graphiques hautes de ne pas redessiner lorsque vous ajoutez la série en définissant le paramètre redraw sur false. Une fois l'addition terminée, redraw peut être appelée.

Pas la plus jolie solution mais vous pouvez dessiner le graphique dans un setTimeout pour lui laisser suffisamment de temps pour afficher le message de chargement.

Exemple:

// the button handler 
 
var isLoading = false, 
 
    $button = $('#button'), 
 
    chart; 
 

 
chart = Highcharts.chart('container', { 
 

 
    xAxis: { 
 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
 
    }, 
 

 
    series: [{ 
 
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
 
    }] 
 
}); 
 

 

 

 
$button.click(function() { 
 
    chart.showLoading(); 
 

 
    setTimeout(function() { 
 
    for (var i = 0; i < 20; i++) { 
 
     var d = []; 
 
     for (var j = 0; j < 12; j++) { 
 
     d.push(Math.random() * 250) 
 
     } 
 
     chart.addSeries({ 
 
     data: d 
 
     }, false); 
 
    } 
 

 
    chart.redraw(); 
 
    chart.hideLoading(); 
 
    }, 100); 
 
});

<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">Show loading</button>