Grafik Çizim Teknikleri

Bu sayfada, örnek oluşturmak ve sayfada grafik çizmek için kullanabileceğiniz farklı yöntemler listelenir. Her yöntemin aşağıda listelenen avantajları ve dezavantajları vardır.

İçindekiler

  1. grafik.draw()
  2. Grafik Sarmalayıcı
  3. Çizim Grafiği()
  4. Daha Fazla Bilgi

grafik.draw()

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

  1. Gstatic kitaplık yükleyicisini, Google Görselleştirme'yi ve grafik kitaplıklarını yükle
  2. Verilerinizi hazırlama
  3. Grafik seçeneklerini hazırlama
  4. Sayfa kapsayıcı öğesine bir tanıtıcı ileterek grafik sınıfı örneğini oluşturun.
  5. Dilerseniz grafik etkinliklerini almak için kaydolun. Grafikte yöntemleri çağırmak istiyorsanız "hazır" etkinliğini dinlemeniz gerekir.
  6. chart.draw() numaralı telefonu arayarak verileri ve seçenekleri iletin.

Avantajları:

  • Sürecin her adımında tam kontrole sahip olursunuz.
  • Grafik tarafından yapılan tüm etkinlikleri dinlemek için kaydolabilirsiniz.

Dezavantajları:

  • Ayrıntılı
  • Gerekli tüm grafik kitaplıkları açık bir şekilde yüklenmelidir.
  • Sorgu gönderirseniz geri çağırma için manuel olarak başvurmanız, başarılı olup olmadığını kontrol etmeniz, döndürülen DataTable öğesini çıkarmanız ve grafiğe iletmeniz 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>

Grafik Sarmalayıcı

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

Avantajları:

  • Çok daha az kod
  • Gerekli tüm grafik kitaplıkları sizin için yüklenir
  • Query nesnesini oluşturup geri çağırmayı sizin yerinize işleyerek Datasource'u sorgulamayı çok daha kolay hale getirir
  • Kapsayıcı öğe kimliğini ilettiğinizde getElementByID'yi sizin için çağırır.
  • Veriler çeşitli biçimlerde gönderilebilir: değer dizisi, JSON değişmez dizesi veya DataTable tutma yeri olarak

Dezavantajları:

  • ChartWrapper şu anda yalnızca seçme, hazır ve hata etkinliklerini yaymaktadır. Diğer etkinlikleri almak için sarmalanmış grafiğe bir işleyici tutmalı ve etkinliklere abone olmalısınız. Örnekler için ChartWrapper dokümanlarına bakın.

Örnekler:

Aşağıda, yerel olarak oluşturulmuş ve dizi olarak belirtilen verilerin bulunduğu bir sütun grafik örneği verilmiştir. Dizi söz dizimini kullanarak grafik etiketleri veya tarih ve saat değerleri belirtemezsiniz ancak bu değerlerle manuel olarak bir DataTable nesnesi oluşturup dataTable özelliğine iletebilirsiniz.

<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-Tablosu sorgulayarak verilerini alan bir çizgi grafik örneğini burada bulabilirsiniz. Kodun geri çağırma işlemini gerçekleştirmesi 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 çok kompakt bir kod haline gelebilir:

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

Grafik Düzenleyici'yi ChartWrapper ile kullanma

Bir grafik tasarlamak için Google E-Tablolar'da yerleşik olarak bulunan 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 yukarıda ChartWrapper içinde açıklandığı gibi kullanabilirsiniz.

Kendi sayfanıza grafik düzenleyici yerleştirebilir ve kullanıcıların diğer veri kaynaklarına bağlanması ve ChartWrapper dizesini döndürmesi için yöntemler sunabilirsiniz. Daha fazla bilgi için ChartEditor başvuru belgelerine bakın.

 

Çizim Grafiği()

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

Avantajları:

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

Dezavantajları:

  • Sarmalayıcıya bir tanıtıcı döndürmediği için 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