Highcharts Cómo mostrar la animación de carga en Set Data

Question

Tengo gráficos Highcharts. Cuando creo mi página de muestro gráficos vacíos (No me marco atributo de datos y sólo hay títulos de gráficos, dentro de ellos está vacía.) Puedo recuperar los datos desde el servidor de forma asíncrona y llamo

setData()

funcionan en la devolución de llamada. Sin embargo, el usuario ve una página vacía y quiero mostrar una imagen de carga para ellos. Esto: http://api.highcharts.com/highcharts#loading no funciona para mí.

¿Alguna idea?

Answer 1

lo hice funciona como se explica en determinada dirección URL:

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

Answer 2

Se trata de un simple trozo Yo siempre uso para mostrar la carga.

digamos que este es nuestro contenedor

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

Y esta es la pieza de Ajax, que se encarga de mostrar cuando el getJSON comienza para el gráfico y se esconden cuando se detiene.

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

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

Answer 3

Se puede definir globalmente para cada página utilizando este plugin JQuery Block UI

y su uso es

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(); 
    }); 

}); 

Answer 4

"Cargando .." palabra parece demasiado aficionado. Use ese truco en su lugar

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

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