Question

我正在使用mPDF和Highchart。两者都有效，但有时PDF是在图表加载完成之前创建的（图表需要大约2秒才能加载）。我想知道是否有可能延迟执行mPDF，所以它等待图表。

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 + "' >");
  }
);

这是我创建图表的代码。我在页面的末尾，在表格之后调用此函数。

这就是我的网页看起来像printscreen

Answer 1

您需要禁用动画

plotOptions: {
    series: {
        animation: false
    }
}

Link to API doc

Answer 2

系列初始动画结束后执行mPDF。您可以使用afterAnimate事件来执行此操作。

API参考：
http://api.highcharts.com/highcharts/plotOptions.series.events.afterAnimate

例：
http://jsfiddle.net/domfxfhs/

如何让mPDF等待我的JS完成

2 个答案: