Impression de graphiques PNG

  1. Présentation
  2. Sélection des instantanés

Présentation

Vous pouvez imprimer des graphiques Google directement depuis votre navigateur ou à partir de JavaScript via la fonction print(). Si vous souhaitez donner 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 PiieChart) s'appelle my_chart et que l'élément div l'affichant 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:Comme illustré dans les exemples de cette page, vous devez attendre que l'événement ready soit terminé.

Remarque : Cette méthode ne fonctionne que dans les navigateurs compatibles avec l'élément HTML5 <canvas>. Elle ne fonctionne donc pas avec Internet Explorer 9 ou version antérieure.

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 est affiché dans la console JavaScript:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAADICAYAAADGFbfiA...

Lorsque cet URI est placé directement dans une barre d'adresse de navigateur, les navigateurs modernes affichent l'image:

Vous pouvez inclure un lien vers la version imprimable en utilisant 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>

Sélections d'instantanés

En tant que créateur de graphiques, vous pouvez effectuer la plupart des opérations de programmation sur vos graphiques, que les utilisateurs peuvent effectuer dans leurs navigateurs. Ainsi, si vous souhaitez créer une image statique du graphique avec une info-bulle affichée ou un réticule à un point particulier, vous pouvez appeler setSelection() avant getImageURI(), comme indiqué ci-dessous.

Voici un graphique à nuage de points avec 100 points aléatoires, l'un d'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);
  }