8

我正在尝试将谷歌图表生成的图表保存为 png 图像。该代码适用于除 GeoChart 之外的所有图表。图像有时会出现，但通常只是空白。这是代码。

渲染.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();
});

图表.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
4

3 回答 3

8

尝试延迟渲染：

page.open(address, function (status) {
   window.setTimeout(function () {
        page.render(output);
        phantom.exit();
    }, 1000);
});

这将延迟 1000 毫秒（1 秒），并且应该有足够的时间让您的图表正确加载。

于 2013-04-04T13:40:03.223 回答
5

实际上，如果您在文本模式下使用带有标记的 GeoChart（而不是纬度/经度），则 1 秒的超时是远远不够的。更好的解决方案是围绕一个递归函数编写代码，该函数检查准备就绪事件是否由图表触发；在页面中执行此操作。评估：

function chartready() {
    console.log('Google.chart.ready');
}                       
var chart = new google.visualization.ChartWrapper(settings);    
chart.draw();
google.visualization.events.addListener(chart, 'ready', chartready);

并确保您像在 HighCharts phantomjs 脚本中一样监控 console.log：

page.onConsoleMessage = function (msg) {
  /*
  * Ugly hack, but only way to get messages out of the 'page.evaluate()'
  * sandbox. If any, please contribute with improvements on this!
  */
  if (msg === 'Google.chart.ready') {
    window.ischartready = true;
  }
}

然后继续调用 setTimeout 直到 window.ischartready 为真（或经过预定义的秒数而您放弃）。 

timeoutTime=8000;//wait not longer than 8 seconds
interval = window.setInterval(function () {
    console.log('waiting');
    if (window.ischartready) {
        clearTimeout(timer);
        clearInterval(interval);
        page.render(whatever);
    }
}, 50);

// we have a timeoutTime second timeframe..
timer = window.setTimeout(function () {
    clearInterval(interval);
    exitCallback('ERROR: While rendering, there\'s is a timeout reached');
}, timeoutTime);
于 2013-08-28T17:22:57.600 回答
0

系统不允许我对@Jeroen 的回答发表评论，所以根据他的回答，我会添加以下内容：

1-您需要在调用draw方法之前注册事件。准备好的事件

应该在调用 draw() 方法之前为这个事件添加一个监听器，否则这个事件可能会在监听器设置之前被触发并且你不会捕捉到它。

2-而不是使用 onConsoleMessage。我会使用 page.onCallback （ callBack上的幻影）。当然，在 chartready 函数上，我会调用 window.callPhantom

于 2017-08-10T04:13:58.483 回答