quando un grafico alto è stato caricato completamente?

Question

Ho visto questo codice: http://jsfiddle.net/AVygG/

Sono curioso quando è il punto in cui il grafico alto viene caricato completamente? Ho visto nella documentazione di highcharts che gli eventi : caricamento: dovrebbero fare la magia di poter chiamare la funzione di callback quando il diagramma alto è completamente caricato.

Se fosse completamente caricato, allora avrei potuto supporre che grafico var dovrebbe già avere i valori quando il pop di allarme? È una buona base che il grafico sia già stato caricato?

La ragione per cui ho chiesto è che sto lavorando su un altro codice che apparentemente l'highchart non viene caricato completamente in IE8. Sembra che gli highcharts abbiano potenzialmente una condizione di competizione sul caricamento dei suoi elementi.

Grazie!

$(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

Provare con l'evento redraw. Questo evento viene attivato dopo il caricamento, ma anche dopo l'aggiunta della serie e il ridimensionamento del grafico.

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

Ridisegna evento dal Highcharts regolamentazioni ufficiali di riferimento: http://api.highcharts.com/highcharts#chart.events.redraw

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

Answer 2

Nella funzione di carico di callback, è possibile accedere all'oggetto grafico utilizzando puntatore "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 ha funzione di callback

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

Questo è stato risposto, ma non abbastanza enfasi. Highcharts documentazione dice esplicitamente

... Nella maggior parte dei casi, il grafico è costruito in un thread, ma in Internet Explorer versione 8 o meno il grafico è a volte avviata prima che il documento è pronto, e in questi casi la l'oggetto grafico non sarà terminato direttamente dopo aver chiamato new Highcharts.Chart(). Come conseguenza , il codice che si basa sull'oggetto Grafico appena creato deve eseguito sempre nel callback.

Quindi, che fare con l'oggetto grafico in IE8 deve essere fatto nella richiamata, vale a dire new Highcharts.Chart(options, function(chart) { ... }). È inoltre possibile utilizzare function() { ... } e utilizzare this nella funzione.

Per quanto riguarda la vostra preoccupazione specifica, un messaggio di caricamento. Dovevo farlo nel callback, ma funziona.

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