如何在加载数据时在 highchart 中显示进度条？

Question

我正在使用 json 加载图表，但它需要一段时间，所以同时我想显示进度条以显示后面发生的过程。

    $.getJSON('frontend/js/tmp/data40.json', function(data) {
           options.series=data; 
           var chart = new Highcharts.Chart(options);
    });

如何显示进度条？

Answer 1

可以使用highcharts的showLoading函数显示进度条。

yourChart.showLoading('Loading...');
yourChart.hideLoading();

将分享一个工作演示

查看执行此操作的替代方法，因为您想等到响应返回并且数据填充到高图中，请参阅 Working demo on your code
您可以根据需要设置此 "Loading data" 文本的样式和位置，或使用加载 icon/spinner 图标。

 $("#container").text("Loading Data");
  $.getJSON('data10.json', function(data) {
    options.series=data;
     chart = new Highcharts.Chart(options);


});

如何在加载数据时在 highchart 中显示进度条？

How to show progrss bar in highchart while loading data?

highcharts

progress-bar