Grafik Çizim Teknikleri

Bu sayfada, sayfada grafik örneklendirmek ve çizmek için kullanabileceğiniz farklı yöntemler listelenmektedir. Aşağıda belirtildiği gibi, her yöntemin avantajları ve dezavantajları vardır.

İçindekiler

  1. chart.draw()
  2. ChartWrapper
  3. DrawChart()
  4. Daha Fazla Bilgi

chart.draw()

Bu, bu dokümandaki Hello Chart! örneğinde ele alınan temel yöntemdir. Temel adımlar şunlardır:

  1. gstatic kitaplık yükleyiciyi, Google Görselleştirme'yi ve grafik kitaplıklarını yükleme
  2. Verilerinizi hazırlama
  3. Grafik seçeneklerini hazırlama
  4. Sayfa kapsayıcı öğesine bir herkese açık kullanıcı adı geçirerek grafik sınıfını örneklendirin.
  5. İsteğe bağlı olarak grafik etkinliklerini almak için kaydolun. Grafikteki yöntemleri çağırmayı planlıyorsanız "Hazır" etkinliğini dinlemeniz gerekir.
  6. Verileri ve seçenekleri ileterek chart.draw() adlı kişiyi arayın.

Avantajları:

  • Sürecin her adımı üzerinde tam kontrole sahip olursunuz.
  • Grafikte yayınlanan tüm etkinlikleri dinlemek için kaydolabilirsiniz.

Dezavantajları:

  • Ayrıntılı
  • Gerekli tüm grafik kitaplıklarını açıkça yüklemeniz gerekir.
  • Sorgu gönderirseniz geri çağırma için manuel olarak uygulamanız, işlemin başarılı olup olmadığını kontrol etmeniz, döndürülen DataTable öğesini ayıklamanız ve grafiğe aktarmanız gerekir.

Örnek:

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

      // 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 our data table.
        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.
        chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        google.visualization.events.addListener(chart, 'select', selectHandler);
        chart.draw(data, options);
      }

      function selectHandler() {
        var selectedItem = chart.getSelection()[0];
        var value = data.getValue(selectedItem.row, 0);
        alert('The user selected ' + value);
      }

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

ChartWrapper

ChartWrapper, sizin için uygun tüm grafik kitaplıklarının yüklenmesini sağlayan ve aynı zamanda Grafik Araçları Veri Kaynaklarına sorgu göndermeyi kolaylaştıran bir kullanım sınıfıdır.

Avantajları:

  • Çok daha az kod
  • Gerekli tüm grafik kitaplıklarını yükler
  • Query nesnesini oluşturup geri arama işlemini sizin yerinize gerçekleştirerek veri kaynaklarının sorgulanmasını çok daha kolay hale getirir
  • Kapsayıcı öğesi kimliğini iletin ve sizin için getElementByID'yi çağırır.
  • Veriler çeşitli biçimlerde gönderilebilir: değer dizisi, JSON düz dizesi veya DataTable tutma yeri olarak

Dezavantajları:

  • ChartWrapper şu anda yalnızca seçili, hazır ve hata etkinliklerini yayar. Diğer etkinlikleri almak için sarmalanmış grafikte herkese açık kullanıcı adı bulmanız ve buradaki etkinliklere abone olmanız gerekir. Örnekler için ChartWrapper belgelerine göz atın.

Örnekler:

Aşağıda, dizi olarak belirtilmiş, yerel olarak oluşturulmuş verilerin yer aldığı bir sütun grafik örneği verilmiştir. Dizi söz dizimini kullanarak grafik etiketlerini veya tarih ve saat değerlerini belirtemezsiniz. Ancak bu değerlerle manuel olarak bir DataTable nesnesi oluşturup bunu dataTable özelliğine aktarabilirsiniz.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'ColumnChart',
          dataTable: [['', 'Germany', 'USA', 'Brazil', 'Canada', 'France', 'RU'],
                      ['', 700, 300, 400, 500, 600, 800]],
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw();
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Bir Google e-tablosunu sorgulayarak verilerini alan çizgi grafik örneğini aşağıda bulabilirsiniz. Kodun, geri çağırma işlemini yapması gerekmediğini unutmayın.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()

        // No query callback handler needed!
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Bu, otomatik yükleme ile birlikte kullanıldığında kodların oldukça kısa olmasını sağlayabilir:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);

      function drawVisualization() {
        var wrapper = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          dataSourceUrl: 'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1',
          query: 'SELECT A,D WHERE D > 100 ORDER BY D',
          options: {'title': 'Countries'},
          containerId: 'vis_div'
        });
        wrapper.draw()
      }
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="vis_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

ChartWrapper ile Grafik Düzenleyiciyi Kullanma

Bir grafik tasarlamak için Google E-Tablolar'da yerleşik olan Grafik Düzenleyici iletişim kutusunu kullanabilir ve ardından grafiği temsil eden serileştirilmiş ChartWrapper dizesini isteyebilirsiniz. Daha sonra bu dizeyi kopyalayıp yapıştırabilir ve yukarıdaki ChartWrapper bölümünde açıklandığı şekilde kullanabilirsiniz.

Kendi sayfanıza bir grafik düzenleyici yerleştirebilir ve kullanıcıların diğer veri kaynaklarına bağlanıp ChartWrapper dizesini döndürmeleri için çeşitli yöntemler sunabilirsiniz. Daha fazla bilgi için ChartEditor referans belgelerine göz atın.

 

DrawChart()

DrawChart, ChartWrapper öğesini sarmalayan genel statik bir yöntemdir.

Avantajları:

  • ChartWrapper ile aynıdır ancak kullanımı biraz daha kısadır.

Dezavantajları:

  • Sarmalayıcıya herkese açık kullanıcı adı döndürmez. Bu nedenle hiçbir etkinliği işleyemezsiniz.
<DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current');   // Don't need to specify chart libraries!
      google.charts.setOnLoadCallback(drawVisualization);
      function drawVisualization() {
        google.visualization.drawChart({
         "containerId": "visualization_div",
         "dataSourceUrl": "https://spreadsheets.google.com/a/google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1",
         "query":"SELECT A,D WHERE D > 100 ORDER BY D",
         "refreshInterval": 5,
         "chartType": "Table",
         "options": {
            "alternatingRowStyle": true,
            "showRowNumber" : true
         }
       });
      }
    google.charts.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization_div" style="width: 600px; height: 400px;"></div>
  </body>
</html>

Daha Fazla Bilgi