谷歌转换成图表图像(Converting Google Chart into Image)

2019-07-19 01:44发布

我想转换一个谷歌图成像图像此链接 ,但我不明白的进线

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

由谷歌图表生成的代码,不会产生任何iFrame调用或元素chartArea

有人能帮我吗 ?

更新

遵循由图表生成的,当我改造他成图像的源

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.f.f.f.f.f.f.%2Cf.f.f.f.f.f.f.%2Cf.f.f.f.f.f.f.

Answer 1:

这可以通过以下的步骤来完成这个页面 。 需要注意的是,本文中的代码是基于旧版本的谷歌可视化的,其使用的内部框架,并张贴将无法正常工作。 但是,您可以使用下面的代码(在评论中发现的)做相同的:

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; 

注:我没有创建这个代码,它最初是由上述网站的作者(里卡多Govoni)创建,并在用户托马斯的评论部分更新。



Answer 2:

你可以使用你的图表的PNG版本chart.getImageURI()类似以下内容:

需要在图表绘制后,所以在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 = '<img src="' + chart.getImageURI() + '">';
});

my_chart.draw(data);


文章来源: Converting Google Chart into Image