我试图使用谷歌图表在PDF中生成多个图表。对于PDF,我使用CakePDF与Wkhtmltopdf引擎。我似乎有一个问题,实际上加载到PDF谷歌图表代码。这是我当前的Javascript代码。
<script type="text/javascript" src="https://www.google.com/jsapi">
</script>
<script type="text/javascript">
google.load('visualization', '1.0', {'packages':['corechart']});
//setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 100);
google.setOnLoadCallback(drawChart);
function drawChart(doIt,taken, total, element)
{
if (typeof doIt === 'boolean')
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Type');
data.addColumn('number', 'Courses');
data.addRows([
['Taken', taken],
['Remaining', total - taken]
]);
var options = {
'width':40,
'height':40};
var chart = new google.visualization.PieChart(document.getElementById(element));
chart.draw(data, options);
}
}
</script>
问题是当我使用谷歌时。加载可视化包时,它会导致Wkhtmltopdf返回,并显示引擎未返回任何数据的错误。我发现一个问题,我认为是类似的为什么谷歌。加载导致我的页面变为空白?所以我尝试执行setTimeout(function(){google.load('visualization','1.0',{packages':['corechart']});},100); 这个解决方案的问题是,如果延迟太低,页面将返回,没有错误,但它将是完全空白的;但是,如果我将延迟设置得太高,页面将不会加载包,Javascript将在
var data = new google.visualization.DataTable();
当我调用函数时。此外,该海报还说明了文件存在问题。write(),但如果添加文档,则不会出现任何问题。将内容添加到页面之前或之后的write()行。如果有人知道如何让谷歌图表与Wkhtmltopdf一起使用,并能帮助我,我将不胜感激。
好的,为了给API更多的加载时间,我把调用函数的地方移到了PHP的末尾。现在,它只需设置一个元素数组,这些元素需要在其中绘制图形和适当的值,然后使用数组中的值调用函数。我不确定现在的问题是什么,因为它在图表上被破坏了。绘制(数据、选项)代码>现在。但它似乎获得了正确的值和传递给它的元素。
这看起来真的很迂回,因为它是。无论出于何种原因,Wkhtmltopdf无法读取我放入javascript标记中的任何内容。我已经尽我所能让它阅读,但它只是不会哈哈。CakePDF插件可以读取Javascript,因此我的JS代码是默认的PDF布局。然后在WkhtmltoPdf呈现的实际视图中,我创建了一个元素和值数组。然后我这样做(在许多不同的可能解决方案之后,这是我能够调用JS函数的唯一方法)
for ($i = 0; $i < sizeof($grade_array); $i++)
{
$element = $grade_array[$i][2];
echo '<script type="text/javascript">drawChart(true, '.$this->Js->value($grade_array[$i][0]).', '.$this->Js->value($grade_array[$i][1]).','.json_encode($element).');</script>';
}
它似乎传递了所有正确的数据。在调用函数时,我有调试行打印参数,所有参数都正确打印。我还注意到,如果我在chart.draw()的同一个地方document.write('test'),它将写'test'没有任何错误。出于某种原因,如果我chart.draw(),它只是说Wkhtmltopdf没有返回任何数据。
问题:当使用wkhtmltopdf/wkhtmltoImage在html页面上的pdf/图像(使用Google图表)时,它不包含Google图表。输出(pdf/png)在谷歌图表应该显示的位置是空白的。当然,原始的html页面是好的。
解决方案:我通过替换以下内容解决了此问题(Google图表wkhtmltopdf):
<script src="http://www.gstatic.com/charts/loader.js"></script>
由
<script src="http://www.google.com/jsapi"></script>
不知何故,wkhtmltopdf库无法处理包含第一个javascript包含的Google图表html页面。
我今天自己解决了这个问题,下面是我的答案。有关更详细的演练,欢迎您阅读我关于该主题的博客文章。
我只需做两个简单的更改即可使其正常工作:
javascript delay
参数,例如javascript delay 1000
。这会将JavaScript代码的执行延迟1000毫秒function init() {
google.load("visualization", "1.1", {
packages: ["corechart"],
callback: 'drawCharts'
});
}
与其使用javascript delay
选项,不如使用windowstatus
实际等待图表的呈现<代码>窗口状态使wkhtmltopdf等待窗口状态达到所需值。
将事件侦听器添加到图表中
google.visualization.events.addListener(tableChart, 'ready', myReadyHandler);
function myReadyHandler(){
window.status = "ready";
}
使用--窗口状态就绪运行wkhtmltopdf