PNG チャートの印刷

  1. Overview
  2. 選択内容のスナップショットの作成

概要

Google Chart は、ブラウザから直接印刷することも、print() 関数を介して JavaScript から印刷することもできます。グラフの PNG 画像にアクセスできるようにするには、getImageURI() メソッドを使用します。現時点では、コアグラフとジオチャートで機能します。

グラフ（棒グラフや円グラフなど、ChartType の種類）の名前が my_chart で、それを表示する div が my_div の場合、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);

注: グラフのレンダリングを確実に終了するには、このページの例に示すように、ready イベントを待機する必要があります。

注: この方法は、HTML5 の <canvas> 要素をサポートしているブラウザでのみ機能するため、Internet Explorer 9 以前では機能しません。

完全な例を次に示します。

<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>

このプログラムを実行すると、chart_div.innerHTML はグラフの PNG エンコードに設定され、JavaScript コンソールに表示されます。

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

この URI をブラウザのアドレスバーに直接配置すると、最新のブラウザでは画像がレンダリングされます。

次の JavaScript 行を使用して、印刷用バージョンへのリンクを含めることができます。

  document.getElementById('png').outerHTML = '<a href="' + chart.getImageURI() + '">Printable version</a>';

その後に次の行が続きます。

  <div id='png'></div>

選択内容のスナップショットの作成

グラフ作成者は、ユーザーがブラウザで行える操作のほとんどをプログラムで行うことができます。そのため、特定のポイントにツールチップを表示するか、十字線を表示したグラフの静止画像を作成する場合は、次に示すように、getImageURI() の前に setSelection() を呼び出すことで実行できます。

ランダムな 100 個のポイントを含む散布図を次に示します。そのうちの 1 つはツールチップと十字があらかじめ選択された状態になっています。

再読み込みすると、別のポイントが選択されます。重要な行を太字にしたコード:

<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);
  }