如何获取我的谷歌图表的png的图像链接

Question

我正在使用谷歌图表中的条形图，并希望添加一个指向我的页面的链接，以获取图表的图片版本。

我尝试了以下代码：

google.visualization.events.addListener(chart, 'ready', function() {
document.getElementById('png').innerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
});

但这说：chart.getImageURI is not a function.我该如何解决这个问题？

这是一个jsfiddle：https://jsfiddle.net/js8o2nrL/

Answer 1

您正在使用材质条形图...

google.charts.Bar
packages: ['bar']

材料图表不支持getImageURI方法。

相反，您可以使用经典图表...

google.visualization.BarChart
packages: ['corechart']

使用以下选项...

theme: 'material'

有关材料图表不支持的其他选项，
请参阅 --> 材料图表功能奇偶校验的跟踪问题 #2143

--

---

或--

---

如果要使用材质图，可以手动创建图像，
使用 -->createObjectURL
然后在画布上绘制 SVG 图像，要获取 PNG，
请使用 -->canvas.toDataURL('image/png')

请参阅以下工作片段...

google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Vraag', '2019', '2020'],
['Zijn medewerkers op de hoogte van de algemene VGM instructies?', 5, 2],
['Zijn de voorgeschreven veiligheidsmaatregelen toegepast en worden deze nageleefd (LMRA)?', 1, 3],
['Is de werkplek zodanig afgezet dat veilig gewerkt kan worden en dat er geen gevaar is voor omstanders/passanten?', 1, 3]
]);
var options = {
chart: {
title: 'Afwijkingen per vraag',
},
colors: ['#169183','#105f44'],
bars: 'horizontal' // Required for Material Bar Charts.
};
var chart = new google.charts.Bar(document.getElementById('barchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
google.visualization.events.addListener(chart, 'ready', function() {
var canvas;
var domURL;
var imageNode;
var imageURI;
var svgParent;
// add svg namespace to chart
svgParent = chart.getContainer().getElementsByTagName('svg')[0];
svgParent.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
// create image URI
domURL = window.URL || window.webkitURL || window;
imageNode = chart.getContainer().cloneNode(true);
imageURI = domURL.createObjectURL(new Blob([svgParent.outerHTML], {type: 'image/svg+xml'}));
image = new Image();
image.onload = function() {
canvas = document.createElement('canvas');
canvas.setAttribute('width', parseFloat(svgParent.getAttribute('width')));
canvas.setAttribute('height', parseFloat(svgParent.getAttribute('height')));
canvas.getContext('2d').drawImage(image, 0, 0);
document.getElementById('png').innerHTML = '<a href="' + canvas.toDataURL('image/png') + '">Printable version</a>';
}
image.src = imageURI;
});
}

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="barchart_material"></div>
<div id='png'></div>