PNG Grafiklerini Yazdırma

  1. Genel bakış
  2. Seçimlerin Anlık Görüntüsü

Genel bakış

Google Grafikleri, doğrudan tarayıcınızdan veya print() işlevi aracılığıyla JavaScript'ten yazdırılabilir. Bir grafiğin PNG görüntüsüne erişim vermek isterseniz getImageURI() yöntemini kullanabilirsiniz. Bu, şu anda temel grafikler ve coğrafi grafiklerde kullanılabilir.

Grafiğinizin (ColumnChart veya PiieChart gibi ChartType türünde) adı my_chart ise ve bu grafiği gösteren div my_div ise grafiğe PNG olarak şu şekilde 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şturma işleminin tamamlandığından emin olmak için bu sayfadaki örneklerde gösterildiği gibi ready etkinliğini beklemeniz gerekir.

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

Aşağıda tam 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ığında chart_div.innerHTML, grafiğin bu PNG kodlamasına ayarlanır ve JavaScript konsolunda görüntülenir:

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:

Yazdırılabilir sürümün bağlantısını aşağıdaki JavaScript satırını kullanarak ekleyebilirsiniz:

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

ardından şu satırı ekleyin:

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

Seçimlerin Anlık Görüntüsü

Grafik oluşturucu olarak, kullanıcıların tarayıcılarında yapabileceği her şeyi grafiklerinizde programatik olarak yapabilirsiniz. Dolayısıyla, grafiğin belirli bir noktada ipucu gösteren veya artı simgesiyle birlikte statik bir resim oluşturmak isterseniz aşağıda gösterildiği gibi getImageURI() öncesinde setSelection() öğesini çağırarak bunu yapabilirsiniz.

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

Yeniden yüklediğinizde farklı bir noktanın seçili olduğunu 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);
  }