PNG Grafiklerini Yazdırma

  1. Genel Bakış
  2. Anlık Görüntü Seçimleri

Genel bakış

Google Listeleri, doğrudan tarayıcınızdan veya print() işleviyle JavaScript'ten yazdırılabilir. Bir grafiğin PNG resmine erişim sağlamak isterseniz getImageURI() yöntemini kullanabilirsiniz. Bu özellik şu anda temel grafikler ve coğrafi grafikler için kullanılabilir.

Grafiğiniz (ColumnChart veya PiieChart gibi ChartType türünde) my_graphic olarak adlandırılıyorsa ve grafiği gösteren div öğesi my_div ise grafiğe aşağıdaki şekilde PNG olarak erişebilirsiniz:

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

Not: Grafiğin oluşturulma işlemini tamamladığından emin olmak için bu sayfadaki örneklerde gösterildiği gibi ready etkinliğini beklemeniz gerekir.

Not: Bu özellik yalnızca HTML5 <canvas> öğesini destekleyen tarayıcılarda çalışır ve dolayısıyla Internet Explorer 9 veya önceki sürümlerde çalışmaz.

Aşağıda eksiksiz bir örnek verilmiştir:

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

Bu program çalıştırıldığında chart_div.innerHTML, grafiğin PNG PNG kodlamasına ayarlanır ve JavaScript konsolunda gösterilir:

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

Bu URI doğrudan bir tarayıcı adres çubuğuna yerleştirildiğinde, modern tarayıcılar resmi oluşturur:

Aşağıdaki JavaScript satırıyla yazdırılabilir sürümün bağlantısını ekleyebilirsiniz:

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

HTML'nizde bu satırla devam edin:

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

Anlık Görüntü Seçimleri

Bir grafik oluşturucu olarak, grafikleriniz üzerinde, kullanıcıların tarayıcılarında yapabileceği tüm işlemleri programatik olarak yapabilirsiniz. Dolayısıyla, belirli bir noktada topları gösteren bir ipucu ile grafiğin statik bir resmini oluşturmak istiyorsanız bunu aşağıda gösterildiği gibi getImageURI() tarihinden önce setSelection() yöntemini çağırarak yapabilirsiniz.

Aşağıda, 100 rastgele nokta içeren bir dağılım grafiği verilmiştir. Bu noktalardan biri önceden ipucu ve artı işaretleri seçilidir:

Yeniden yükleyin, farklı bir noktanın seçildiğini görürsünüz. Anahtar satırları kalın harflerle yazılmış kod:

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