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 grafikte; başlık, renk, çizgi kalınlığı, arka plan dolgusu vb. gibi özelleştirilebilir birçok seçenek bulunur. Grafik Araçları ekibi, varsayılan grafik görünümü için çok çalışsa da grafiğiniz özelleştirilebilir. Örneğin, başlık veya eksen etiketleri ekleyebilirsiniz.

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

Aşağıdaki nesne, açıklama konumunu, grafik başlığını, grafik boyutunu ve Pasta Grafik için 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 örnekteki seçenekler nesnesini güncelleyin.

Grafik Boyutunu Belirtin

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çenekleri. Boyutu her iki konumda da belirtirseniz, grafik genellikle HTML'de belirtilen boyuta bağlı kalır. HTML'de veya seçenek olarak bir grafik boyutu belirtmezseniz grafik düzgün oluşturulamayabilir.

Boyutu belirli bir yerde belirtmenin avantajları vardır:

  • Boyutu HTML'de belirtme - Bir grafiğin yüklenmesi ve oluşturulması birkaç saniye sürebilir. Grafik kapsayıcı HTML'de önceden boyutlandırıldıysa, grafik yüklenirken sayfa düzeni devreye girmez.
  • Boyutu grafik olarak belirtme - Grafik boyutu JavaScript'te yer alıyorsa JavaScript'i kopyalayıp yapıştırabilir veya serileştirebilir, kaydedebilir, ayrıca grafiği tutarlı bir şekilde yeniden boyutlandırabilirsiniz.

 

Daha Fazla Bilgi