让 wkhtmltoimage 等到 Google Chart API 完全呈现图表

Make wkhtmltoimage Wait till Google Chart API Renders the Chart Completely

本文关键字：API wkhtmltoimage 等到 Google Chart      更新时间：2023-09-26

我想做什么

使用 exec 打开.php页面

exec('./wkhtmltoimage-i386 abcdef.com/combined.php chart.jpg', $op, $er);

这样我就会得到呈现的图表的图像。

实际发生了什么

在

运行包含上述命令的页面时，根本没有创建chart.jpg。

调试

(1( 我直接在浏览器中执行combined.php，图表按预期显示。所以combined.php代码没有错。

(2(我也试过把

<h1>Hello there!</h1>

在combined.php内部，这导致创建chart.jpg并输出显示为图像。

因此，这让我相信wkhtmltoimage需要等到图表呈现完毕，然后执行转换操作。问题是我对如何让转换过程等到一切都完成没有想法。

用于准备图表的 Javascript 代码

google.load('visualization', '1', {'packages':['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
   var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);      
   var options = {
          title: 'TNS',titleTextStyle: {color: "green"}, hAxis: {title: "MONTH", titleTextStyle: {color: "green"}}, vAxis: {title: "Percentage", titleTextStyle: {color: "green"},viewWindowMode: 'explicit',
                 },
           max: 100,
           min: 0,
           legend: {
                    position: 'bottom'
           },
           width:1000,
           height:550,
           pointSize: 8,
           backgroundColor:'#ddd9c3',
           is3D: 'true',
           height:550,
           vAxis: {
            gridlineColor: '#9d9983'
        },
            colors: ['black', 'red', 'green', 'blue', 'yellow']       
       };

       var chart = new google.visualization.LineChart(document.getElementById('tns1'));     
       chart.draw(data, options);
         }

您可以使用以下设置来允许呈现 JavaScript 内容。

--enable-javascript
--javascript-delay

我假设此文档是最新的

http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltoimage_0.10.0_rc2-doc.html

尝试可能是

exec('./wkhtmltoimage-i386 --enable-javascript --javascript-delay 1000 abcdef.com/combined.php chart.jpg', $op, $er);

取决于渲染一切偏离轨道所需的时间。请记住，可能存在不同的安全限制。

您肯定想要调查的一些其他选项 

--run-script             // run a specific script after loading
--debug-javascript       // return javascript debug output
--no-stop-slow-scripts  
--enable-local-file-access
相关文章：