Tabloyu Özelleştirme 

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

          // Load the Visualization API and the piechart package.
      google.charts.load('current', {'packages':['corechart']});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table, 
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

      // Create the data table.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2]
      ]);

// Set chart options
      var options = {'title':'How Much Pizza I Ate Last Night',
                     'width':400,
                     'height':300};

      // Instantiate and draw our chart, passing in some options.
      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }
    </script>
  </head>

  <body>
<!--Div that will hold the pie chart-->
    <div id="chart_div" style="width:400; height:300"></div>
  </body>
</html>

 

Seçenekleri belirtin

Her grafiğin başlık, renk, çizgi kalınlığı, arka plan dolgusu gibi birçok özelleştirilebilir seçeneği vardır. Grafik Araçları ekibi varsayılan grafik görünümü üzerinde çok çalışmış olsa da grafiğinizi özelleştirmek (ör. başlık veya eksen etiketleri eklemek) isteyebilirsiniz.

option_name/option_value özelliklerine sahip bir JavaScript nesnesi tanımlayarak grafiğiniz için özel seçenekleri belirtin. Grafik belgelerinde listelenen seçenek adlarını kullanın. Her grafiğin dokümanlarında bir dizi özelleştirilebilir seçenek listelenir. Örneğin, Pasta Grafik için kullanılabilen seçenekler "legend", "title" ve "is3D"yi içerir. Tüm seçeneklerin belgelenmiş bir varsayılan değeri vardır.

Aşağıdaki nesne, bir Pasta Grafik için açıklama konumunu, grafik başlığını, grafik boyutunu ve 3D seçeneğini tanımlar:

var options = {
  'legend':'left',
  'title':'My Big Pie Chart',
  'is3D':true,
  'width':400,
  'height':300
}

Grafiği nasıl etkilediğini görmek için yukarıdaki örnekte bulunan seçenekler nesnesini bu değerlerle güncelleyin.

Grafik Boyutunu Belirtin

En sık kullanılan seçeneklerden biri grafik yüksekliği ve genişliğidir. Grafik boyutunu iki yerde belirtebilirsiniz: <div> kapsayıcısının HTML'sinde veya grafik seçeneklerinde. Boyutu her iki konumda da belirtirseniz grafik genellikle HTML'de belirtilen boyutu temel alır. HTML'de veya seçenek olarak bir grafik boyutu belirtmezseniz grafik düzgün oluşturulmayabilir.

Boyutu bu yerlerden birinde veya diğerinde belirtmenin avantajları vardır:

  • HTML'de boyutu belirtme - Bir grafiğin yüklenmesi ve oluşturulması birkaç saniye sürebilir. HTML'de boyutlandırılmış grafik kapsayıcınız varsa grafik yüklenirken sayfa düzeninde herhangi bir değişiklik olmaz.
  • Boyutu grafik seçeneği olarak belirtme - Grafik boyutu JavaScript'teyse JavaScript'i kopyalayıp yapıştırabilir veya serileştirebilir, kaydedebilir, geri yükleyebilir ve grafiğin tutarlı bir şekilde yeniden boyutlandırmasını sağlayabilirsiniz.

 

Daha Fazla Bilgi