Javascript 是否可以将谷歌图表保存为图像？_Javascript_Image_Save_Charts

Javascript 是否可以将谷歌图表保存为图像？

javascript image charts

Javascript 是否可以将谷歌图表保存为图像？,javascript,image,save,charts,Javascript,Image,Save,Charts,我正在制作一个应用程序，我需要将谷歌图表保存为图像。我使用的只是tomcat、servlet和javascript。是否有办法将以下生成的图表保存为图像？（请参阅文章末尾的代码）。这个想法是用户可以看到这个图表，然后可以选择将它上传到他的facebook个人资料中。我不确定这是可以上传到facebook的原生格式，还是需要保存为jpg <html> <head> <script type="text/javascript" src="https://www

我正在制作一个应用程序，我需要将谷歌图表保存为图像。我使用的只是tomcat、servlet和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>


load（“可视化”、“1”、{packages:[“corechart”]}）；
setOnLoadCallback（drawChart）；
函数绘图图（）{
var data=new google.visualization.DataTable（）；
data.addColumn（'string'，'Year'）；
data.addColumn（'number'，'Sales'）；
数据。添加行（4）；
数据。设定值（0,0，，+2004）；
数据设置值（0，1，1000）；
数据。设定值（1,0，'2005'）；
数据设置值（1,1170）；
数据。设定值（2,0，'2006'）；
设置值（2,1860）；
数据集值（3,0，'2007'）；
数据。设定值（3，1，1030.5）；
var chart=new google.visualization.LineChart（document.getElementById（'chart_div'））；
图表.绘图（数据，{宽度：400，高度：240，标题：'公司业绩'，hAxis:{标题：“X”，标题文字样式：{颜色：“绿色”}}）；
}

您最简单的选择是使用谷歌图表问题页面上的Riccardo Govoni示例解决方案重新生成图表的静态图像版本。其思想是将SVG转换为Canvas元素

链接：

教程：

示例页面：

使用grChartImg库。这是George Risvas提供的跨浏览器解决方案。支持所有浏览器，包括旧版本的IE，并为您提供许多自动过程，如将图表转换为图像、下载、将图表显示为对话框、将其上载到服务器等

有关更多信息，请参阅

希望能对您有所帮助。

这项功能最近被添加为：

chart.getImageURI()

看

1它似乎是在2014年1月29日发布的版本中添加的。

我就是这么做的

如果3kb脚本太多，请先使用

，下载此库：

在您只需在图表中添加一个事件侦听器之后

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

    });
}

您的应用程序是否与facebook集成，并且可以通过api将照片上载到facebook帐户？如果没有，用户必须使用facebook上传来完成。在这种情况下，他们必须右键单击图表图像，执行“另存为”，然后上载到facebook。如果在加载时运行fiddler，您将看到它只是从google加载了一幅图像。让您的服务器向同一图像url发出http请求将允许您的服务器直接从google下载图像，并对其执行任何操作。对于仍在寻找答案的任何人，请参阅：此处有一个最新的答案，这就是您正在寻找的答案，可能值得标记为已接受此API于2012年4月20日被弃用。（此答案发布后）。有一个新的图表API，但它不支持静态图像。看起来这里面有一个有效的版本，下面是如何设置文件名和扩展名：这个现在消失了吗？@Jglstewart--我当然希望没有…：-/没有。我的图表是一个ChartWrapper，它导致了一个未定义的函数错误。为了解决这个问题，我使用了chart.getChart.getImageURI（）@Jglstewart——呸！避免了危机：-）

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

    });
}