Charts 如何获取谷歌图表的imageUri

这是我的示例材质条形图，我想要打印图形的图像uri

google.charts.load（'current'，{'packages'：['bar']}）；
google.charts.setOnLoadCallback（drawStuff）；
函数drawStuff（）{
var data=new google.visualization.arrayToDataTable([
[“星系”、“距离”、“亮度”]，
['Canis Major侏儒'，8000，23.3]，
[《人马座矮人》，24000，4.5]，
['Ursa MARGER II Dwarf'，30000，14.3]，
['Lg.麦哲伦云'，50000，0.9]，
[Bootes I'，60000，13.1]
]);
变量选项={
宽度：800，
图表：{
标题：“附近星系”，
副标题：“左侧距离，右侧亮度”
},
条形图：“垂直”，//物料条形图为必填项。
系列：{
0:{axis:'distance'}，//将系列0绑定到名为'distance'的轴。
1:{axis:'brightness'}//将系列1绑定到名为'brightness'的轴。
},
轴线：{
x:{
距离：{label:'parsecs'}，//底部x轴。
亮度：{侧面：“顶部”，标签：“视在震级”}//顶部x轴。
}
}
};
var chart=new google.charts.Bar（document.getElementById（'dual_x_div'）；
图表绘制（数据、选项）；
log（chart.getImageURI（））；
};

您可以使用

您将需要生成中的以下两个文件

<script src="html2canvas.js"></script>
<script src="html2canvas.svg.js"></script>


更新

另一种方法是将svg转换为图像并在画布上绘制，

然后从画布中提取uri


google.charts.load（'current'{
套餐：['bar']
}).然后（函数（）{
var data=new google.visualization.arrayToDataTable([
[“星系”、“距离”、“亮度”]，
['Canis Major侏儒'，8000，23.3]，
[《人马座矮人》，24000，4.5]，
['Ursa MARGER II Dwarf'，30000，14.3]，
['Lg.麦哲伦云'，50000，0.9]，
[Bootes I'，60000，13.1]
]);
变量选项={
宽度：800，
图表：{
标题：“附近星系”，
副标题：“左侧距离，右侧亮度”
},
条形图：“垂直”，//物料条形图为必填项。
系列：{
0:{axis:'distance'}，//将系列0绑定到名为'distance'的轴。
1:{axis:'brightness'}//将系列1绑定到名为'brightness'的轴。
},
轴线：{
x:{
距离：{label:'parsecs'}，//底部x轴。
亮度：{侧面：“顶部”，标签：“视在震级”}//顶部x轴。
}
}
};
var chartContainer=document.getElementById（'dual_x_div'）；
var chart=新的google.charts.Bar（chartContainer）；
google.visualization.events.addListener（图表'ready'，函数（）{
var帆布；
var-domURL；
var图像节点；
var-imageURL；
var-svgParent；
//将svg名称空间添加到图表
domURL=window.URL | | window.webkitURL | | window；
svgParent=chartContainer.getElementsByTagName（'svg'）[0]；
svgParent.setAttribute（'xmlns'，'http://www.w3.org/2000/svg');
imageNode=chartContainer.cloneNode（true）；
imageURL=domURL.createObjectURL（新Blob（[svgParent.outerHTML]，{type:'image/svg+xml'}））；
图像=新图像（）；
image.onload=函数（）{
canvas=document.getElementById（'canvas'）；
canvas.setAttribute（'width'，parseFloat（svgParent.getAttribute（'width'））；
canvas.setAttribute（'height'，parseFloat（svgParent.getAttribute（'height'））；
canvas.getContext（'2d'）.drawImage（图像，0,0）；
log（canvas.toDataURL（'image/png'）；
}
image.src=imageURL；
});
图表绘制（数据、选项）；
});
。隐藏{
显示：无；
可见性：隐藏；
}
我注意到这个问题是三年前发布的。从那时起，谷歌图表可能已经有了相当多的更新。不过，根据谷歌图表，getImageURI应该适用于所有核心图表和艺术。所讨论的图表是一个条形图，它是谷歌图表的核心图表之一。因此，getImageURI应该可以工作。查看第一行代码，您将bar指定为包。你需要把它改成corechart。所以，你会喜欢下面这行

google.charts.load（'current'，{packages:['corechart']}）

然后再向下，将图表定义更改为
var chart=new google.visualization.BarChart（document.getElementById（'dual_x_div'）

进行这些更改后，chart.getImageURI（）应该返回您想要的内容。最近我自己做了一个条形图，这就是我的工作原理。
getImageURI
不受材质图支持，您可以手动创建uri，我有一个工作示例，我可以在下周分享。我将等待您的示例谢谢您的回复，但我希望不使用任何第三方
  google.visualization.events.addListener(chart, 'ready', function () {
    // add svg namespace to chart
    $(chartContainer).find('svg').attr('xmlns', 'http://www.w3.org/2000/svg');

    // get image uri
    html2canvas(chartContainer, {
      allowTaint: true,
      taintTest: false
    }).then(function(canvas) {
      console.log(canvas.toDataURL('image/png'));
    });
  });