Javascript PhantomJs保存谷歌图表的png图像'；s API地球化学艺术_Javascript_Google Visualization_Phantomjs

Javascript PhantomJs保存谷歌图表的png图像'；s API地球化学艺术

javascript google-visualization phantomjs

Javascript PhantomJs保存谷歌图表的png图像'；s API地球化学艺术,javascript,google-visualization,phantomjs,Javascript,Google Visualization,Phantomjs,我正在尝试将谷歌图表生成的图表保存为png图像。该代码适用于除艺术以外的所有图表。图像有时会出现，但通常只是空白。这是代码 timeoutTime=8000;//wait not longer than 8 seconds interval = window.setInterval(function () { console.log('waiting'); if (window.ischartready) { clearTimeout(timer);

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

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

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

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

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>

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

尝试延迟渲染：

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

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

这将延迟1000毫秒（1秒），应该足够让图表正确加载。

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

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

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

并确保像在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;
  }
}

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

然后继续调用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);

系统不允许我评论@Jeroen answer，因此根据他的回答，我添加以下内容：

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

1-在调用draw方法之前，需要注册事件

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

应在调用draw（）方法之前向此事件添加侦听器，因为否则可能会在设置侦听器之前触发事件，您将无法捕获它

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

2-而不是使用OnConsolleMessage。我会使用page.onCallback（）。当然，在chartready函数中，我会调用window.callPhantom

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