将Google Chart转换为图像

我正在尝试将Google图表转换为类似此链接的图片,但我不了解这条线

var chartArea = chartContainer.getElementsByTagName('iframe')[0].contentDocument.getElementById('chartArea');

Google Chart生成的代码不会创建任何名为chartArea iFrame或元素

有人能帮我吗 ?

更新

当我将他变换为图像时,遵循图表生成的来源

 http://chart.googleapis.com/chart?cht=lc&chs=500x200&chtt=Acessos%20ao%20im%C3%B3vel%20dos%20ultimos%20sete%20dias&chxt=x%2Cy&chxl=0%3A%7C24%2F01%7C25%2F01%7C26%2F01%7C27%2F01%7C28%2F01%7C29%2F01%7C30%2F01%7C1%3A%7C%7C0%7C&chdlp=r&chdl=San%7CSite%7CAtendimento&chco=ff8a00%2C585857%2C5501ff&chd=e%3Af.ffffff%2Cf.ffffff%2Cf.ffffff 

这可以通过执行此页面上的步骤来完成。 请注意,本文中的代码基于使用iframe的旧版Google展示,并且不会像发布的那样发挥作用。 但是,您可以使用以下代码(在注释中找到)执行相同的操作:

 var svg = $(chartContainer).find('svg').parent().html(); var doc = chartContainer.ownerDocument; var canvas = doc.createElement('canvas'); canvas.setAttribute('style', 'position: absolute; ' + ''); doc.body.appendChild(canvas); canvg(canvas, svg); var imgData = canvas.toDataURL("image/png"); canvas.parentNode.removeChild(canvas); return imgData; 

注意:我没有创建此代码,它最初是由上述网站的作者(Riccardo Govoni)创建的,并在用户Thomas的评论部分中进行了更新。

您可以使用chart.getImageURI()获取图表的PNG版本,如下所示:

需要在绘制图表之后,所以在ready事件中!

 var my_div = document.getElementById('my_div'); var my_chart = new google.visualization.ChartType(chart_div); google.visualization.events.addListener(my_chart, 'ready', function () { my_div.innerHTML = ''; }); my_chart.draw(data);