cuando está un Highchart completamente cargado?

Question

Vi este código: http://jsfiddle.net/AVygG/

Tengo curiosidad cuando es el punto que el Highchart se carga por completo? Vi en la documentación de Highcharts que los eventos : load: deberían hacer la magia de poder llamar a la función de devolución de llamada cuando el Highchart está completamente cargado.

Si estuviera completamente cargado, entonces ¿podría suponer que var gráfico ya debería tener los valores cuando aparece la alerta? ¿Es esa una buena base para que el gráfico ya esté cargado?

La razón por la que pregunté es que estoy trabajando en otro código que parece que el Highchart no se carga completamente en IE8. Parece que Highcharts está teniendo potencialmente una condición de carrera en la carga de sus elementos.

Gracias!

$(function() { 
// create the chart 
var chart = new Highcharts.Chart({ 
    chart: { 
     renderTo: 'container', 
     events: { 
      load: function(event) { 
       alert ('Chart loaded'); 
      } 
     }   
    }, 
    xAxis: { 
    }, 

    series: [{ 
     animation: false, 
     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]  
    }] 
}); 

});

Answer 1

Probar con el evento redraw. Este evento se desencadena después de la carga, pero también después de agregar la serie y cambiar el tamaño del gráfico.

$(function() { 
    // create the chart 
    var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      events: { 
       redraw: function(event) { 
        alert ('Chart loaded'); 
       } 
      }   
     }, 
     series: [{ 
      animation: false, 
      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]  
     }] 
    }); 
}); 

caso Redraw de Highcharts offical Referencia: http://api.highcharts.com/highcharts#chart.events.redraw

Y demo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-redraw/

Answer 2

En la función de devolución de llamada de carga, se puede acceder al objeto gráfico mediante puntero "this".

 events: { 
      load: function(event) { 
       alert ('Chart loaded with series :'+ this.series[0].name); 
       console.log(this); 
      } 
     }   

jsFiddle: http://jsfiddle.net/msjaiswal/AVygG/25/

Answer 3

Highcharts tiene la función de devolución de llamada

var chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'container', 
      events: { 
       redraw: function(event) { 
        alert ('Chart loaded'); 
       } 
      }   
     }, 
     series: [{ 
      animation: false, 
      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]  
     }] 
    },function(chart){ 

alert('LOADED'); 

}); 

Answer 4

Este fue respondida, pero no lo suficiente énfasis. Highcharts documentación dice explícitamente

... En la mayoría de los casos el gráfico está construido en un hilo, pero en Internet Explorer versión 8 o menos el gráfico se inicia a veces antes de que el documento está listo , y en estos casos la el objeto de gráfico no será terminado directamente después de llamar al new Highcharts.Chart(). Como consecuencia de , el código que se basa en el objeto Chart recién creado debe ejecutarse siempre en la devolución de llamada en .

Por lo tanto, tratar con el objeto de gráfico en IE8 se debe hacer en la devolución de llamada, es decir new Highcharts.Chart(options, function(chart) { ... }). También puede usar function() { ... } y usar this en la función.

Con respecto a su preocupación específica, es necesario cargar un mensaje. Tuve que hacerlo en la devolución de llamada, pero funciona.

chart1 = new Highcharts.Chart(options, function(){ 
    this.showLoading(); 
});