Übersicht
Google-Diagramme können direkt von Ihrem Browser oder über JavaScript über die Funktion print() gedruckt werden. Wenn Sie einem PNG-Bild eines Diagramms Zugriff gewähren möchten, können Sie die Methode getImageURI() verwenden. Dies funktioniert derzeit für Kerndiagramme und Geocharts.
Wenn das Diagramm vom Typ ChartType wie "ColumnChart" oder "PieChart" my_chart heißt und das div-Element my_div angezeigt wird, können Sie folgendermaßen auf das Diagramm als PNG zugreifen:
var my_div = document.getElementById('chart_div');
var my_chart = new google.visualization.ChartType(chart_div);
google.visualization.events.addListener(my_chart, 'ready', function () {
my_div.innerHTML = '<img src="' + my_chart.getImageURI() + '">';
});
my_chart.draw(data);
Hinweis:Sie sollten auf das Ereignis ready warten, wie in den Beispielen auf dieser Seite gezeigt, damit das Diagramm vollständig gerendert wurde.
Hinweis: Dies funktioniert nur in Browsern, die das HTML5-Element <canvas> unterstützen, und funktioniert daher nicht in Internet Explorer 9 oder früheren Versionen.
Hier ein vollständiges Beispiel:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Element', 'Density', { role: 'style' }],
['Copper', 8.94, '#b87333', ],
['Silver', 10.49, 'silver'],
['Gold', 19.30, 'gold'],
['Platinum', 21.45, 'color: #e5e4e2' ]
]);
var options = {
title: "Density of Precious Metals, in g/cm^3",
bar: {groupWidth: '95%'},
legend: 'none',
};
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});
chart.draw(data, options);
}
</script>
<div id='chart_div'></div>
Wenn dieses Programm ausgeführt wird, wird chart_div.innerHTML auf diese PNG-Codierung des Diagramms festgelegt und in der JavaScript-Konsole angezeigt:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...
Wenn dieser URI direkt in die Adressleiste des Browsers eingefügt wird, rendern moderne Browser das Bild:
Du kannst einen Link zur Druckversion mit der folgenden JavaScript-Zeile einfügen:
document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
gefolgt von dieser Zeile in Ihrem HTML-Code:
<div id='png'></div>
Snapshots auswählen
Als Ersteller von Diagrammen können Sie in Ihren Diagrammen fast alles tun, was Nutzer in ihren Browsern tun können. Wenn Sie also ein statisches Bild des Diagramms erstellen möchten, bei dem an einer bestimmten Stelle eine Kurzinfo oder Fadenkreuze angezeigt werden, können Sie dazu setSelection() vor getImageURI() aufrufen.
Hier ist ein Streudiagramm mit 100 zufälligen Punkten, von denen einer Kurzinfo und Fadenkreuz enthält:
Laden Sie die Seite neu, um einen anderen Punkt auszuwählen. Der Code (fett gedruckte Schlüsselzeilen):
<script type="text/javascript">
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number');
data.addColumn('number');
for (var i = 0; i < 100; i++)
data.addRow([Math.floor(Math.random() * 100),
Math.floor(Math.random() * 100)]);
var options = {
legend: 'none',
crosshair: { trigger: 'both' }, // Display crosshairs.
tooltip: { trigger: 'selection' } // Display tooltips on selection.
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_setselection'));
google.visualization.events.addListener(chart, 'ready', function () {
chart.setSelection([{row:99, column:1}]); // Select one of the points.
png = '<a href="' + chart.getImageURI() + '">Printable version</a>';
console.log(png);
});
chart.draw(data, options);
}