Google图表为图片

Question

我正在尝试使用Google图表在电子邮件中嵌入图表图像.因此每个用户都将拥有一个独特的图表.

我们是否可以使用API​​并嵌入一个唯一的URL来呈现图表并将图像传送到电子邮件客户端.

Answer 1

您可以使用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 = '<img src="' + chart.getImageURI() + '">';
});

my_chart.draw(data);

Answer 2

可以使用Google图表向导生成将呈现图表图像的URL .但是,最近(4月我相信)该服务因为已弃用.它仍然可以正常工作,但对于长期解决方案,您可能需要提出另一种方法.

编辑

另一种方法是生成图像并在发送电子邮件之前将其保存到服务器.您可以通过解析给定的slug来使服务器上的页面专用于生成图表,并在加载图表时发送带有图像数据的POST请求.您可以使用隐藏的画布(需要HTML5)和canvg javascript插件来访问数据URI :

chart_area = document.getElementById("chart_div").getElementsByTagName('iframe')[0].contentDocument.getElementById("chartArea");
svg = chart_area.innerHTML;
canvas = document.getElementById("hidden_canvas");
canvas.setAttribute('width', chart_area.offsetWidth);
canvas.setAttribute('height', chart_area.offsetHeight);

canvg(canvas, svg);
image_data_uri = canvas.toDataURL("image/png");

Answer 3

不久前我遇到了同样的问题，并在 SA 上发现了您的问题。自从 2012 年 Google Image Charts 被弃用后，我构建了https://image-charts.com来替代 Google Image Charts，以便将图表和图形嵌入到电子邮件中（右键单击下面的图像并查看 URL）：

https://image-charts.com/chart?chs=700x300&chxt=x,y&chl=2018|2017|2015&chd=t:60,40,20&cht=pa&chdl=Image|Charts|Rocks&chf=ps0-0,lg,45,ffeb3b,0.2,f443367C,1|ps0-1,lg,45,8bc34a,0.2,0096887C,1|ps0-2,lg,45,EA469E,0.2,03A9F47C,1&chan

https://image-charts.com/chart?cht=lc&chs=700x300&chd=t:10,25,30,40,12,48,100,20,47,29,84,30,27,50,70&chxt=x,y&chxl=0:|Jun|Jul|Aug|Sep|Oct|Nov|Dec|Jan|1:||50|100&chm=B,FCECF4,0,0,0&chco=E4061C&chdl=Coffee consumed&chma=0,0,20,10&chl=||||||such a very   big project!

https://image-charts.com/chart?chs=700x300&cht=gv&chl=digraph {a -> b[label="0.2",weight="0.2"];a -> c[label="0.4",weight="0.4"];c -> b[label="0.6",weight="0.6"];c -> e[label="0.6",weight="0.6"];e -> e[label="0.1",weight="0.1"];e -> b[label="0.7",weight="0.7"];}