Javascript 是否可以将谷歌图表保存为图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5466157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to save a google chart as an image?
提问by Kashif
I am making an application in which I would need to save the google chart as an image . All I am using is tomcat, servlets and javascript. Is there a way to save the following generated chart as an image? (refer to code at the end of post). The idea is that user would see this chart and then would have the option of uploading it to his facebook profile. I am not sure if this will be uploadable to facebook in its native format or will be needed to be saved as a jpg.
我正在制作一个应用程序，我需要将谷歌图表保存为图像。我使用的只是 tomcat、servlets 和 javascript。有没有办法将以下生成的图表保存为图像？（请参阅帖子末尾的代码）。这个想法是用户会看到这个图表，然后可以选择将它上传到他的 Facebook 个人资料。我不确定这是否可以以其原生格式上传到 Facebook 或需要保存为 jpg。
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addRows(4);
data.setValue(0, 0, ''+2004);
data.setValue(0, 1, 1000);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 860);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030.5);
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, title: 'Company Performance',hAxis: {title: "X", titleTextStyle: {color: "green"}}});
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
回答by mgilson
It looks like this feature was recently1added as:
看起来此功能最近被添加为1：
chart.getImageURI()
See the documentation.
请参阅文档。
1It appears to have been added in the Jan 29, 2014 release.
1它似乎已添加到 2014 年 1 月 29 日的版本中。
回答by Kosio
Example solution from Riccardo Govoni as seen on the issues page of google charts. The idea is to convert the SVG to Canvas element.
来自 Riccardo Govoni 的示例解决方案，如谷歌图表的问题页面所示。这个想法是将 SVG 转换为 Canvas 元素。
Links:
链接：
Tutorial : http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html
教程：http: //www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html
Example page: http://www.battlehorse.net/attach/topics/charts/google_charts_to_image.html
示例页面：http: //www.battlehorse.net/attach/topics/charts/google_charts_to_image.html
回答by Oshan Wisumperuma
This is what i do
这就是我所做的
http://danml.com/#/download.html
http://danml.com/#/download.html
download(chart.getImageURI(), 'fileName.png', "image/png");
if 3kb script is too much use http://www.closure-compiler.appspot.com/home
如果 3kb 脚本太多，请使用http://www.closure-compiler.appspot.com/home
回答by john
Use the grChartImg library. It's a cross browser solution from George Risvas. Supports all the browsers including older versions of IE and provides you with many auto procedures like convert a chart to image,download,show a chart to a dialog,upload it to a server etc.
使用 grChartImg 库。这是 George Risvas 的跨浏览器解决方案。支持包括旧版IE在内的所有浏览器，并为您提供许多自动程序，如将图表转换为图像、下载、将图表显示为对话框、将其上传到服务器等。
For more info look at www.chartstoimage.
有关更多信息，请访问www.chartstoimage。
I hope help you.
我希望能帮到你。
回答by RSG
Your simplest option is to regenerate a static image version of the chart using the Google Chart API
您最简单的选择是使用Google Chart API重新生成图表的静态图像版本
回答by Fahem Idir
First, download this library :
首先，下载这个库：
http://danml.com/download.html
http://danml.com/download.html
and after you have just to add an events listener inside your chart
在您只需在图表中添加一个事件侦听器之后
function:
google.charts.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var chart = new google.visualization.ComboChart(document.getElementById('chart_tickets'));
google.visualization.events.addListener(chart, 'ready', function () {
$("#GraphDownloadTickets").click(function() {
download(chart.getImageURI(), 'fileName.png', "image/png")
});
}
