javascript – PhantomJs保存谷歌图表的API GeoChart的png图像

我正在尝试将谷歌图表生成的图表保存为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秒),并且应该足够时间使图表正确加载.

javascript – PhantomJs保存谷歌图表的API GeoChart的png图像

解决方法

相关文章