谷歌图表不适用于Wkhtmltopdf [英] Google Charts not working with Wkhtmltopdf
问题描述
我正尝试使用Google图表在PDF中生成多个图表。对于PDF，我使用CakePDF和Wkhtmltopdf引擎。我似乎在将Google图表代码实际加载到PDF中时遇到了问题。这是我的Javascript的当前代码。
< script type =text / javascriptsrc =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）;
函数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]，
['剩余'，总计]
]）;
var options = {
'width'：40，
'height'：40};
var chart = new google.visualization.PieChart（document.getElementById（element））;
chart.draw（data，options）;
}
}
< / script>
问题在于，当我为可视化包执行google.load时，会导致Wkhtmltopdf返回错误地说引擎没有返回数据。我发现一个问题，我认为它类似于为什么google.load导致我的页面变为空白？所以我试图做setTimeout（function（）{google.load（'visualization'，'1.0'，{'packages'：['corechart']}）; }，100）;这个解决方案的问题是，如果延迟太低，页面将返回没有错误，但它将是完全空白的;然而，如果我将延迟设置得太高，页面将不会加载该包，并且JavaScript将在
$ b
var数据中断= new google.visualization.DataTable（）;
当我调用函数时。另外，该海报声明document.write（）存在问题，但如果在将内容添加到页面之前或之后添加document.write（）行，则不存在任何问题。如果有人知道如何让Google Charts与Wkhtmltopdf一起工作并能帮助我，我将不胜感激。
好的，在试图给API更多的时间来加载，我搬到了我称之为函数结束的地方。现在，它只是设置需要在其中绘制图形和适当值的元素数组，然后使用数组中的值调用该函数。我不确定现在出现了什么问题，因为现在突破 chart.draw（data，options）; 。它似乎获得了正确的值和传递给它的元素。
这看起来真的很迂回。无论出于何种原因，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]）。'，'。 $这 - > Js->值（$ grade_array [$ I] [1]） '' json_encode（$元件） '）;< /脚本>'。;
}
它似乎传递了所有正确的数据。在调用函数时，我有打印参数的调试行，并且所有参数都被正确打印。我还注意到，如果我在与chart.draw（）相同的位置执行document.write（'test'），它将写入'test'而不会出现任何错误。出于某种原因，如果我使用chart.draw（），它只是表示Wkhtmltopdf没有返回任何数据。 解决方案
em>问题：
在html页面（使用Google Chart）上使用wkhtmltopdf / wkhtmltoimage的pdf /图片时，它不包含Google图表。输出结果（pdf / png）在Google Chart应该显示的位置上只是空白。当然，原始的html页面还是可以的。
解决方案：
解决了这个问题（Google Charts + wkhtmltopdf） ：
< script src =http://www.gstatic.com/charts/loader.js><<<< ; /脚本>
by
< script src =http://www.google.com/jsapi>< / script>
不知何故，wkhtmltopdf库无法处理包含第一个javascript include的Google Chart html页面。 p>
I am trying to generate multiple charts in a PDF using Google Charts. For the PDFs, I am using CakePDF with the Wkhtmltopdf engine. I appear to be having a problem with actually loading the Google Chart code into the PDF though. This is my current code for my 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>
The problem is that when I do the google.load for the visualization package, it causes Wkhtmltopdf to return with an error saying that the engine returned no data. I found a problem that I thought was similar at Why does google.load cause my page to go blank? so I tried to do setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});}, 100); The problem with this solution was that if the delay is too low, the page will return with no errors, but it will be completely blank; however, if I set the delay too high, the page will just not load the package and the Javascript will break at
var data = new google.visualization.DataTable();
when I call the function. Additionally, that poster stated problem with document.write(), but I have no issues if I add document.write() lines before or after I add the content to the page. I would appreciate it if anyone knew how to get Google Charts to work with Wkhtmltopdf and could help me.
Ok, In an attempt to give the API more time to load, I moved where I call the function to the end of the PHP. Now, it just sets an array of elements that need graphs drawn in them and the proper values, then it calls the function with the value from the arrays. I am not sure what the problem is now though because it is breaking on chart.draw(data, options); now. It appears to be getting the correct values and element passed to it though.
This will seem really roundabout since it is. For whatever reason, Wkhtmltopdf cannot read anything I put in a javascript tag. I have tried everything I can to get it to read it, but it just will not haha. The CakePDF plugin can read Javascript though, so my JS code is in the default PDF layout. Then in the actual view that is rendered by WkhtmltoPdf, I create an array of elements and values. I then do this (after many different possible solutions, this is the only way I was able to call the JS function)
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>';
}
It appears to pass all of the correct data. Upon calling the function, I have debug lines printing the parameters, and all parameters are correctly printed. I also noticed that if I do document.write('test') in the same place as the chart.draw(), it will write 'test' without any error. For some reason, if I do chart.draw(), it just says Wkhtmltopdf didn't return any data.
Problem: When using wkhtmltopdf / wkhtmltoimage the pdf / image on a html page (with Google Chart), it did not contain the Google chart. The output (pdf / png) was simply blank at the position the Google Chart should show up. The original html page was okay, of course.
Solution: I solved this issue (Google Charts + wkhtmltopdf) by replacing:
<script src="http://www.gstatic.com/charts/loader.js"></script>
by
<script src="http://www.google.com/jsapi"></script>
Somehow the wkhtmltopdf library could not handle a Google Chart html page which contains the first javascript include.
这篇关于谷歌图表不适用于Wkhtmltopdf的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
