web-dev-qa-db-fra.com

quand un highchart est-il complètement chargé?

J'ai vu ce code: http://jsfiddle.net/AVygG/

Je suis curieux de savoir à quel moment le highchart est complètement chargé? J'ai vu dans la documentation des highcharts que les événements: load: devraient faire la magie de pouvoir appeler la fonction de rappel lorsque le highchart est complètement chargé.

S'il était complètement chargé, puis-je supposer que le graphique var devrait déjà avoir les valeurs lorsque l'alerte apparaît? Est-ce une bonne base que le graphique est déjà chargé?

La raison pour laquelle j'ai demandé est que je travaille sur un autre code que le highchart ne se charge apparemment pas complètement dans IE8. On dirait que les highcharts ont potentiellement une condition de concurrence sur le chargement de ses éléments.

Merci!

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

}); La

jqueryhighcharts
23
user1334004

Highcharts a une fonction de rappel

 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');

});
24
Sebastian Bochan

Dans la fonction de rappel de chargement, vous pouvez accéder à l'objet de graphique en utilisant le pointeur "this".

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

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

8
Mayank Jaiswal

Essayez avec l'événement redraw. Cet événement est déclenché après le chargement, mais aussi après l'ajout de la série et le redimensionnement du graphique.

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

Redessiner l'événement à partir de la référence officielle des Highcharts: http://api.highcharts.com/highcharts#chart.events.redraw

Et démo: http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/events-redraw/

8
ManUtopiK

On y a répondu, mais pas assez catégoriquement. La documentation Highcharts dit explicitement

... Dans la plupart des cas, le graphique est construit dans un seul thread, mais dans Internet Explorer version 8 ou moins, le graphique est parfois lancé avant que le document ne soit prêt, et dans ces cas, l'objet graphique ne sera pas terminé directement après l'appel de la fonction new Highcharts.Chart(). Par conséquent, le code qui repose sur l'objet Chart nouvellement construit doit toujours s'exécuter dans le rappel.

Donc, traiter l'objet graphique dans IE8 doit être fait dans le rappel, c'est-à-dire new Highcharts.Chart(options, function(chart) { ... }). Vous pouvez également utiliser function() { ... } et utiliser this dans la fonction.

En ce qui concerne votre préoccupation spécifique concernant un message de chargement. Je devais le faire dans le rappel, mais ça marche.

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

Dans le projet angular, j'ai dû utiliser la fonction setTimeout() pour que la largeur fonctionne correctement comme ci-dessous:

setTimeout(()=>this.chart.reflow())
0
User3250