2017-09-26 5 views
-1

Je travaille avec mPDF et Highchart. Les deux fonctionnent, mais parfois le PDF est créé avant que le graphique ait fini de charger (le graphique a pris environ 2 secods à charger). Je me demandais s'il est possible de retarder l'exécution de mPDF, donc il attend le graphique.Comment faire mPDF attendre que mon JS pour terminer

var chart = new Highcharts.Chart({ 
    chart: { 
    renderTo: 'RDBMS', 
    plotBackgroundColor: null, 
    plotBorderWidth: null, 
    plotShadow: false, 
    type: 'pie' 
    }, 
    colors: ['#6495ED', '#FFA07A','#9ACD32','#9370DB','#87CEFA'], 
    title: { 
    text: 'Servidores por RDBMS' 
    }, 
    tooltip: { 
    pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
    }, 
    plotOptions: { 
    pie: { 
     allowPointSelect: true, 
     cursor: 'pointer', 
     dataLabels: { 
    enabled: true, 
    format: '{point.y} <br> {point.percentage:.1f} %', 
    style: { 
     color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
    } 
     }, 
     showInLegend: true 
    } 
    }, 
    legend: { 
    layout: 'vertical', 
    align: 'right', 
    verticalAlign: 'middle', 
    borderWidth: 0 
    }, 
    series: [{ 
    name: 'RDBMS', 
    colorByPoint: true, 
    data: [{ 
     name: 'Mysql', 
     y: 40,  //Dado dinamico 
     sliced: true, 
     selected: true 
    }, { 
     name: 'Oracle', 
     y: 6, //Dado dinamico 
     sliced: true 
    }, { 
     name: 'SQL Server', 
     y: 22,  //Dado dinamico 
     sliced: true 
    }, { 
     name: 'DB2', 
     y: 9, //Dado dinamico 
     sliced: true 
    }, { 
     name: 'PostgreSQL', 
     y: 1, //Dado dinamico 
     sliced: true 
    }] 
    }] 
}); 

var opts = chart.options;   
opts = $.extend(true, {}, opts); 
delete opts.chart.renderTo;  

var strOpts = JSON.stringify(opts); 

$.post(
    'http://export.highcharts.com/', 
    { 
    content: 'options', 
    options: strOpts , 
    type: 'image/jpg', 
    width: '100px', 
    scale: '1', 
    constr: 'Chart', 
    async: true 
    }, 
    function(data){ 
    var imgUrl = 'http://export.highcharts.com/' + data; 
    $('#charts').append("<img src='" + data + "' >"); 
    } 
); 

Ceci est mon code qui crée mon graphique. J'appelle cette fonction à la fin de ma page, après une table.

Voici ce que ma page ressemble printscreen

+0

Je pense que vous devriez avoir un regard sur les événements highchart - http://api.highcharts.com/highcharts/chart.events. Lorsque le graphique charge l'exécution mpdf. – Andreas

Répondre