Mencetak Diagram PNG

  1. Ringkasan
  2. Pemilihan Snapshot

Ringkasan

Google Chart dapat dicetak langsung dari browser atau dari JavaScript melalui fungsi print(). Jika ingin memberikan akses ke gambar PNG diagram, Anda dapat menggunakan metode getImageURI(). Ini saat ini berfungsi untuk diagram inti dan diagram geografis.

Jika diagram Anda (dengan jenis ChartType, seperti ColumnChart atau PieChart) disebut my_chart dan div yang menampilkannya adalah my_div, berikut adalah cara mengakses diagram sebagai 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);

Catatan: Anda harus menunggu peristiwa ready, seperti yang ditunjukkan pada contoh di halaman ini, untuk memastikan bahwa diagram telah selesai dirender.

Catatan: Ini hanya akan berfungsi di browser yang mendukung elemen <canvas> HTML5, sehingga tidak akan berfungsi di Internet Explorer 9 atau yang lebih lama.

Berikut contoh lengkapnya:

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

Saat program ini berjalan, chart_div.innerHTML akan ditetapkan ke encoding PNG ini pada diagram dan ditampilkan di konsol JavaScript:

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

Saat URI tersebut ditempatkan langsung ke kolom URL browser, browser modern akan merender gambar:

Anda dapat menyertakan link ke versi yang dapat dicetak dengan baris JavaScript berikut:

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

diikuti dengan baris ini di HTML Anda:

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

Snapshoting Pilihan

Sebagai pembuat diagram, Anda dapat melakukan hampir semua hal pada diagram secara terprogram yang dapat dilakukan pengguna di browser mereka. Jadi, jika Anda ingin membuat gambar statis diagram dengan tooltip yang ditampilkan atau dengan garis bidik pada titik tertentu, Anda dapat melakukannya dengan memanggil setSelection() sebelum getImageURI(), seperti yang ditunjukkan di bawah ini.

Berikut adalah diagram sebar dengan 100 titik acak, salah satunya dengan tooltip dan garis bidik yang telah dipilih sebelumnya:

Muat ulang dan Anda akan melihat titik yang berbeda dipilih. Kode, dengan baris kunci dicetak tebal:

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