javascript - HighCharts showLoading() 未按预期工作

Question

我有一个图表和一个按钮，它调用非常繁重的处理，如本例所示: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();
});

但是，showLoading 函数无法按预期工作:浏览器窗口会挂起，直到处理完成。

出了什么问题？

Answer 1

为了提高性能，您可以通过设置redraw来要求highcharts在添加系列时不要重绘。参数为false。添加完成后redraw可以调用。

这不是最漂亮的解决方案，但您可以在setTimeout内绘制图表。以便有足够的时间显示加载消息。

示例:

// 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>