13

我有highcharts图形。当我创建我的页面时，我显示空图形（我没有设置数据属性并且只有图形的标题，它们内部是空的。）我从服务器异步获取数据并调用

设置数据（）

回调函数。但是用户看到一个空页面，我想为他们显示一个加载图像。这：http ://api.highcharts.com/highcharts#loading对我不起作用。

有任何想法吗？

4

5 回答 5

18

我按照给定 URL 中的说明进行了操作：

function updateGraphic(url, chartName) {
    chartName.showLoading();
    $.getJSON(url, function(data){
        chartName.series[0].setData(data);
        chartName.hideLoading();
    });
}
于 2012-08-27T19:36:35.350 回答
15

“正在加载..”这个词似乎太业余了。改用那个技巧

var chart = new Highcharts.Chart(options);
chart.showLoading('<img src="/images/spinner.gif">');

$.getJSON(url, function(data){
       //load data to chart
       chart.hideLoading();
});
于 2016-01-20T14:49:11.300 回答
5

这是一个简单的部分，我总是用来显示加载。

假设这是我们的容器

<div id='container'>
  <img id="spinner" src="/assets/chart_loader.gif"/>
</div>

这是一段 ajax，它负责在 getJson 为图表启动时显示并在它停止时隐藏。

$(document).ajaxStart ->
  $("#spinner").show()

$(document).ajaxComplete ->
  $("#spinner").hide()
于 2013-11-11T13:16:52.300 回答
0

您可以使用此插件JQuery Block UI为每个页面全局定义

和用法是

  jQuery(document).ready(function ($) {
        $.ajaxSetup({ cache: false });
        $(document).ajaxStart(function () {
        $('body').block({
            message: '<h3><img alt="" class="GifIcon" src="Images/319.gif" />Please wait Data is Loading From Server ...... </h3>'
        });
    });
    $(document).ajaxStop(function () {
        $('body').unblock();
    });

});
于 2014-01-16T07:38:19.613 回答
0

修改highcharts的css类：

.highcharts-loading {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.highcharts-loading-inner {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #252222;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

基于：How TO - CSS 加载器

于 2021-10-26T17:45:23.470 回答