javascript - HighCharts showLoading()无法按预期工作

我有一个图表和一个按钮，需要进行非常繁重的处理，如本例所示：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函数无法按预期工作：broser窗口挂起，直到处理完成。

怎么了？

最佳答案

为了提高性能，您可以通过将redraw参数设置为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>

关于javascript - HighCharts showLoading()无法按预期工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45234034/