【发布时间】：2013-10-19 21:03:39
【问题描述】：
我正在尝试使用 Google Charts 在 PDF 中生成多个图表。对于 PDF，我将 CakePDF 与 Wkhtmltopdf 引擎一起使用。不过，我似乎在将 Google Chart 代码实际加载到 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>
问题是，当我为可视化包执行 google.load 时，它会导致 Wkhtmltopdf 返回错误，指出引擎未返回任何数据。我在Why does google.load cause my page to go blank? 发现了一个我认为类似的问题，所以我尝试执行 setTimeout(function() {google.load('visualization', '1.0', {'packages':['corechart']});} , 100);这个解决方案的问题是，如果延迟太低，页面将返回没有错误，但它会完全空白；但是，如果我将延迟设置得太高，页面将不会加载包并且 Javascript 将在
处中断var data = new google.visualization.DataTable();
当我调用函数时。此外，该海报说明了 document.write() 的问题，但如果我在将内容添加到页面之前或之后添加 document.write() 行，我没有问题。如果有人知道如何让 Google Charts 与 Wkhtmltopdf 一起工作并能帮助我，我将不胜感激。
好的，为了给 API 更多的加载时间，我将调用函数的位置移到了 PHP 的末尾。现在，它只设置一个需要在其中绘制图形的元素数组和适当的值，然后使用数组中的值调用函数。我不确定现在的问题是什么，因为它现在正在打破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]).', '.$this->Js->value($grade_array[$i][1]).','.json_encode($element).');</script>';
}
它似乎传递了所有正确的数据。调用该函数后，我有打印参数的调试行，并且所有参数都正确打印。我还注意到，如果我在与 chart.draw() 相同的位置执行 document.write('test')，它将写入 'test' 而不会出现任何错误。出于某种原因，如果我执行 chart.draw()，它只是说 Wkhtmltopdf 没有返回任何数据。
【问题讨论】：
-
鉴于您发布的代码，
if (typeof doIt === 'boolean')无法返回 true，因为来自 google.load 调用的回调没有参数（doIt将始终为空）。如果var data = new google.visualization.DataTable();行出现错误，您必须在其他地方调用drawChart函数。这是您的全部代码还是还有更多内容？ -
对此我很抱歉。我稍后调用函数本身，并传递必要的参数。我知道它在那一行中断了，因为我实际上有一个调试行来在每行之后打印一条消息，所以我知道它在哪里中断；我只是删除了那些以使代码更易于阅读。我确信该函数是使用正确的参数调用的。
-
如果在 API 完成加载之前调用函数，您可能会收到错误 - 回调的目的是确保首先加载所有内容。尝试安排您的代码，使
drawChart调用的触发器发生在来自谷歌加载程序的回调内部（不必是drawChart函数本身）。 -
我不确定该怎么做。该函数是从页面内容中调用的。有一个 PHP for 循环，我可以在其中获取正确的信息，然后将其传递给 Javascript 函数。有没有办法让页面延迟渲染 PHP，直到 API 加载完成？
-
什么触发了函数调用？文档就绪事件？
标签： javascript google-visualization wkhtmltopdf