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参数设置为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>

HighCharts showLoading（）无法按预期工作

1 个答案: