我正在尝试将谷歌图表生成的图表保存为png图像.该代码适用于除GeoChart之外的所有图表.图像有时会出现,但通常只是空白.这是代码.
render.js
var system = require('system');
var page = require('webpage').create();
page.open('chart.html,function () {
page.paperSize = { format: 'A4',orientation: 'landscape'};
page.render(system.args[1]);
phantom.exit();
});
chart.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Chart Generation</title>
<Meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load('visualization','1',{'packages': ['geochart']});
google.setonLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country','Popularity'],['Germany',200],['United States',300],['Brazil',400],['Canada',500],['France',600],['RU',700]
]);
var options = {
width: 400,height: 200
};
var chart = new google.visualization
.GeoChart(document.getElementById('chart_div'));
chart.draw(data,options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
终点的Usgae：
phantomjs render.js chart.png
解决方法
尝试延迟渲染：
page.open(address,function (status) {
window.setTimeout(function () {
page.render(output);
phantom.exit();
},1000);
});
这将延迟1000毫秒(1秒),并且应该足够时间使图表正确加载.