PhantomJs保存谷歌圖表的API GeoChart的png圖像

Question

我正在嘗試將谷歌圖表生成的圖表保存為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

Answer 1

嘗試延遲渲染：

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

這將延遲1000毫秒（1秒），並且應該足夠時間讓圖表正確加載。

Answer 2

實際上，如果你在文本模式下使用帶有標記的GeoChart（而不是lat / long），則1秒的超時是不夠的。 更好的解決方案是圍繞遞歸函數進行編碼，該函數檢查圖表是否觸發了ready事件; 在頁面中執行此操作。評估：

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為true（或者預定義的秒數通過，你就放棄了）。

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);

Answer 3

系統不允許我評論@Jeroen的答案，所以基於他的回答我會添加這個：

1-您需要在調用draw方法之前注冊該事件。 該就緒事件

在調用draw（）方法之前，應該在此事件中添加一個偵聽器，否則事件可能會在偵聽器設置之前觸發，而您將無法捕獲它。

2-而不是使用onConsoleMessage。 我使用page.onCallback（ callBack上的幻像）。 當然在chartready函數上我會調用window.callPhantom

PhantomJs保存谷歌圖表的API GeoChart的png圖像

問題描述

3 個解決方案

解決方案1
8 已采納 2013-04-04 13:40:03

解決方案2
5 2013-08-28 17:22:57

解決方案3
0 2017-08-10 04:13:58

PhantomJs保存谷歌圖表的API GeoChart的png圖像

問題描述

3 個解決方案

解決方案1 8 已采納 2013-04-04 13:40:03

解決方案2 5 2013-08-28 17:22:57

解決方案3 0 2017-08-10 04:13:58

解決方案1
8 已采納 2013-04-04 13:40:03

解決方案2
5 2013-08-28 17:22:57

解決方案3
0 2017-08-10 04:13:58