Isa*_*ior 6 javascript google-visualization wkhtmltopdf
我正在尝试使用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返回错误,指出引擎没有返回任何数据.我发现了一个我认为类似的问题为什么google.load会导致我的页面空白？所以我试着做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没有返回任何数据.
小智 7
问题: 在html页面(使用Google Chart)上使用wkhtmltopdf/wkhtmltoimage pdf/image时,它不包含Google图表.输出(pdf/png)在Google Chart应该显示的位置处只是空白.当然,原来的html页面没问题.
解决方案: 我通过替换解决了此问题(Google Charts + wkhtmltopdf):
<script src="http://www.gstatic.com/charts/loader.js"></script>
通过
<script src="http://www.google.com/jsapi"></script>
不知何故,wkhtmltopdf库无法处理包含第一个javascript包含的Google Chart html页面.
我今天自己解决了这个问题，所以这对我来说是可行的。如需更详细的演练，欢迎您阅读我关于该主题的博客文章。
我只需要进行两个简单的更改即可使其工作：
javascript-delay参数，例如javascript-delay 1000。这会延迟 JavaScript 代码的执行 1000 毫秒function init() {
google.load("visualization", "1.1", {
packages: ["corechart"],
callback: 'drawCharts'
});
}然后您可以简单地实现该drawCharts功能，您可以像平常一样绘制图表。
确保您的标记包含以下内容：
<body onload="init()">
<div id="my-chart"></div>
</body>
只需将图表绘制到具有上述 ID 的 div 上，就可以开始了。
注意：我使用的是最新的可用二进制文件（截至目前为 0.12.0）。在 64 位 Ubuntu 安装上进行了测试。