Highcharts Как показать загрузку анимации при заданных данных

У меня есть графическая карта. Когда я создаю свою страницу, я показываю пустую графику (я не устанавливаю атрибут данных, а есть только заголовки графики, внутри которых пусто.) Я получаю данные с сервера асинхронно и вызываю

SetData()

при обратном вызове. Однако пользователь видит пустую страницу, и я хочу показать загрузочное изображение для них. Это: http://api.highcharts.com/highcharts#loading не работает для меня.

Любые идеи?

Ответ 1

Я работал, как описано в данном URL:

function updateGraphic(url, chartName) {
    chartName.showLoading();
    $.getJSON(url, function(data){
        chartName.series[0].setData(data);
        chartName.hideLoading();
    });
}

Ответ 2

"Загрузка.." слово кажется слишком любительским. Используйте этот трюк вместо

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

$.getJSON(url, function(data){
       //load data to chart
       chart.hideLoading();
});

Ответ 3

Это простая часть, которую я всегда использую, чтобы показать загрузку.

скажем, что это наш контейнер

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

И это часть ajax, которая заботится о том, чтобы показать, когда getJson начинается для диаграммы и скрывается, когда она останавливается.

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

$(document).ajaxComplete ->
  $("#spinner").hide()

Ответ 4

Вы можете определить глобально для каждой страницы с помощью этого плагина 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();
    });

});