Image 将谷歌图表另存为图像

为什么我的代码不能将图表保存为图像？我在什么地方出错了吗？ 虽然我遵循了来源（在网上找到），但我仍然无法解决我的问题

我可以显示图表，但唯一的问题是无法保存为图像

<script type="text/javascript" src="js/jsapi.js"></script>
    <script type="text/javascript">
    function saveAsImg(chartContainer, pngfilename) {
    var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
    var svg = chartArea.innerHTML;
    var doc = chartContainer.ownerDocument;
    var canvas = doc.createElement('canvas');
    canvas.setAttribute('width', chartArea.offsetWidth);
    canvas.setAttribute('height', chartArea.offsetHeight);
    canvas.setAttribute(
    'style',
    'position: absolute; ' +
    'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
    'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
    doc.body.appendChild(canvas);
     canvg(canvas, svg);
    var data = canvas.toDataURL("image/png");
    canvas.parentNode.removeChild(canvas);
    data = data.substr(data.indexOf(',') + 1).toString();

    var dataInput = document.createElement("input") ;
    dataInput.setAttribute("name", 'imgdata') ;
    dataInput.setAttribute("value", data);

    var nameInput = document.createElement("input") ;
    nameInput.setAttribute("name", 'name') ;
    nameInput.setAttribute("value", pngfilename + '.png');

    var myForm = document.createElement("form");
    myForm.method = 'post';
    myForm.action = 'saveme.php';
    myForm.appendChild(dataInput);
    myForm.appendChild(nameInput);

    document.body.appendChild(myForm) ;
    myForm.submit() ;
    document.body.removeChild(myForm) ;

}


</script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>

    <script type="text/javascript">


      function drawVisualizationDaily() {
        // Create and populate the data table.
        Price1=document.getElementById('Price1').value;
        Price2=document.getElementById('Price2').value;
        Price3=document.getElementById('Price3').value;
        Price4=document.getElementById('Price4').value;
        Price5=document.getElementById('Price5').value;
        Price6=document.getElementById('Price6').value;
        Price7=document.getElementById('Price7').value;
        var data = google.visualization.arrayToDataTable([
          ['Daily', 'Sales'],
          ['Mon', parseInt(Price1) ],
          ['Tue', parseInt(Price2) ],
          ['Wed', parseInt(Price3) ],
          ['Thu', parseInt(Price4) ],
          ['Fri', parseInt(Price5) ],
          ['Sat', parseInt(Price6) ],
          ['Sun', parseInt(Price7) ]
        ]);

        // Create and draw the visualization.
        new google.visualization.ColumnChart(document.getElementById('visualization')).
            draw(data,
                 {title:"Daily Sales",
                  width:500, height:400,
                  hAxis: {title: "Daily"}}
            );
       }  


      google.setOnLoadCallback(drawVisualizationDaily);
    </script>

    <div id="visualization" style="width: 600px; height: 400px;"></div>
    <script>
    <a href='#' onClick="saveAsImg(document.getElementById('visualization'), 'test');">Test</a>
</script>

函数saveAsImg（chartContainer，pngfilename）{
var chartArea=chartContainer.getElementsByTagName（'svg'）[0].parentNode；
var svg=chartArea.innerHTML；
var doc=chartContainer.ownerDocument；
var canvas=doc.createElement（'canvas'）；
canvas.setAttribute（'width'，chartArea.offsetWidth）；
canvas.setAttribute（'height'，chartArea.offsetHeight）；
canvas.setAttribute(
“风格”，
'位置：绝对；'+
'顶部：'+（-chartArea.offsetHeight*2）+'px；'+
'左：'+（-chartArea.offsetWidth*2）+'px；'；
doc.body.appendChild（画布）；
canvg（canvas，svg）；
var data=canvas.toDataURL（“image/png”）；
canvas.parentNode.removeChild（canvas）；
data=data.substr（data.indexOf（'，'）+1.toString（）；
var dataInput=document.createElement（“输入”）；
setAttribute（“名称”，“imgdata”）；
dataInput.setAttribute（“值”，数据）；
var nameInput=document.createElement（“输入”）；
setAttribute（“名称”，“名称”）；
setAttribute（“value”，pngfilename+'.png'）；
var myForm=document.createElement（“表单”）；
myForm.method='post'；
myForm.action='saveme.php'；
appendChild（数据输入）；
appendChild（nameInput）；
document.body.appendChild（myForm）；
myForm.submit（）；
document.body.removeChild（myForm）；
}
load（'visualization'，'1'，{packages:['corechart']}）；
函数drawVisualizationDaily（）{
//创建并填充数据表。
Price1=document.getElementById（'Price1'）。值；
Price2=document.getElementById（'Price2'）。值；
Price3=document.getElementById（'Price3'）。值；
Price4=document.getElementById（'Price4'）。值；
Price5=document.getElementById（'Price5'）。值；
Price6=document.getElementById（'Price6'）。值；
Price7=document.getElementById（'Price7'）。值；
var data=google.visualization.arrayToDataTable([
[‘每日’、‘销售’]，
[Mon'，parseInt（价格1）]，
[Tue'，parseInt（价格2）]，
[Wed'，parseInt（价格3）]，
[Thu'，parseInt（价格4）]，
[Fri'，parseInt（价格5）]，
[Sat'，parseInt（价格6）]，
['Sun'，parseInt（价格7）]
]);
//创建并绘制可视化。
新的google.visualization.ColumnChart（document.getElementById（'visualization'））。
绘制（数据、，
{标题：“每日销售额”，
宽：500，高：400，
哈克斯：{title:“Daily”}
);
}  
setOnLoadCallback（drawVisualizationDaily）；

获取图表图像不再需要该方法。您可以调用图表的

getImageURI

方法来获取用于生成图像的URL字符串：

var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
google.visualization.events.addListener(chart, 'ready', function () {
    var imgUri = chart.getImageURI();
    // do something with the image URI, like:
    window.open(imgUri);
});
chart.draw(data, {
    title:"Daily Sales",
    width:500,
    height:400,
    hAxis: {title: "Daily"}
});

---

如果打开图像URI，可以右键单击图像以保存它。

下面的示例将图表图像放入页面上的

标记中。您可以右键单击图像并保存它。还有一个问题要问你们。若我想实现一个链接，让用户点击下载图表图像，那个么我该怎么做呢？你们需要将URI的mime类型更改为“应用程序/八位字节流”，并调用

窗口。打开
，传递URI，这将触发下载（）。执行此操作时不能指定文件名。如果需要重命名该文件，则必须将URI发送到服务器，并让服务器创建该文件（类似于问题中的代码的工作方式）。好的..但您给出了示例，因为like出现错误..无法获取图表图像您使用我的示例时出错了吗？您使用了哪个浏览器生成了错误？