Présentation
Vous pouvez imprimer les graphiques Google directement depuis votre navigateur ou depuis JavaScript via la fonction print(). Si vous souhaitez autoriser l'accès à une image PNG d'un graphique, vous pouvez utiliser la méthode getImageURI(). Cela fonctionne actuellement pour les graphiques principaux et les graphiques géographiques.
Si votre graphique (de type ChartType, tel que "ColumnChart" ou "PieChart") s'appelle my_chart et que le div qui l'affiche est my_div, voici comment accéder au graphique au format PNG:
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);
Remarque:Vous devez attendre l'événement ready, comme illustré dans les exemples de cette page, pour vous assurer que le rendu du graphique est terminé.
Remarque : Cette option ne fonctionne que dans les navigateurs compatibles avec l'élément HTML5 <canvas>. Par conséquent, elle ne fonctionne pas avec Internet Explorer 9 ni avec les versions antérieures.
Voici un exemple complet:
<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>
Lorsque ce programme s'exécute, chart_div.innerHTML est défini sur l'encodage PNG du graphique et s'affiche dans la console JavaScript:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...
Lorsque cet URI est placé directement dans la barre d'adresse du navigateur, les navigateurs récents affichent l'image:
Vous pouvez inclure un lien vers la version imprimable avec la ligne de code JavaScript suivante:
document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';
suivi de cette ligne dans votre code HTML:
<div id='png'></div>
Créer des instantanés de sélections
En tant que créateur de graphiques, vous pouvez effectuer la plupart des opérations programmatiques sur vos graphiques, ce que les utilisateurs peuvent faire dans leur navigateur. Ainsi, si vous souhaitez créer une image statique du graphique qui affiche une info-bulle ou qui comporte un réviseur à un moment donné, vous pouvez le faire en appelant setSelection() avant getImageURI(), comme illustré ci-dessous.
Voici un graphique à nuage de points avec 100 points aléatoires, l'un d'entre eux avec une info-bulle et un curseur en forme de croix présélectionnés:
Actualisez la page pour afficher un autre point sélectionné. Le code, avec les lignes clés en gras:
<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);
}