Kitaplıkları Yükle

Bu sayfada, Google Grafik kitaplıklarının nasıl yükleneceği gösterilmektedir.

Temel Kitaplık Yükleme

Birkaç istisna dışında, Google grafikli tüm web sayfaları web sayfasının <head> bölümüne aşağıdaki satırları içermelidir:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  ...
</script>

Bu örneğin ilk satırı yükleyicinin kendisini yükler. Kaç tane grafik çizmeyi planladığınızdan bağımsız olarak yükleyiciyi yalnızca bir kez yükleyebilirsiniz. Yükleyiciyi yükledikten sonra, belirli grafik türlerine ait paketleri yüklemek için bir veya daha fazla kez google.charts.load işlevini çağırabilirsiniz.

google.charts.load için ilk bağımsız değişken, dize olarak sürüm adı veya numarasıdır. 'current' belirtirseniz bu işlem Google Listeler'in son resmi sürümünün yüklenmesine neden olur. Bir sonraki sürüm için adayı denemek isterseniz bunun yerine 'upcoming' kullanın. Genel olarak ikisi arasında çok az fark vardır ve bunlar, yeni bir sürümün kullanımda olduğu durumlar dışında tamamen aynı olacaktır. upcoming etiketinin kullanılmasının yaygın nedenlerinden biri, Google'ın önümüzdeki bir veya iki ay içinde piyasaya sunacağı yeni bir grafik türünü veya özelliği test etmek istemenizdir. (forumumuzda yayınlanacak sürümleri duyuruyoruz. Listelerinizde herhangi bir değişikliğin kabul edilebildiğinden emin olmak için duyurulduğunda bunları denemenizi öneririz.)

Yukarıdaki örnekte, corechart (çubuk, sütun, çizgi, alan, basamaklı alan, baloncuk, hamur işi, donut, kombine bilet, istiridye, histogram, dağılım) göstermek istediğiniz varsayılmaktadır. Farklı veya ek bir grafik türü istiyorsanız yukarıdaki corechart için uygun paket adını yazın veya ekleyin (ör. {packages: ['corechart', 'table', 'sankey']}. Paket adını, her bir grafiğin dokümanlar sayfasındaki "Yükleniyor" bölümünde bulabilirsiniz.

Bu örnekte, web sayfanızın bir yerinde drawChart adında bir JavaScript işlevinizin olduğu varsayılmıştır. İstediğiniz işlevi adlandırabilirsiniz ancak bu parametrenin genel olarak benzersiz olduğundan ve google.charts.setOnLoadCallback çağrısında yer almadan önce tanımlandığından emin olun.

Not: Google Listeleri'nin önceki sürümleri, kitaplıkları yüklemek için yukarıdakilerden farklı bir kod kullanırdı. Mevcut grafiklerinizi yeni kodu kullanacak şekilde güncellemek için Kitaplık Yükleyici Kodunu Güncelleme başlıklı makaleye bakın.

Temel yükleme tekniğini kullanarak bir pasta grafik çizmenin tam örneğini burada bulabilirsiniz:

<head>
  <script src="https://www.gstatic.com/charts/loader.js"></script>
  <script>
    google.charts.load('current', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      // Define the chart to be drawn.
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Element');
      data.addColumn('number', 'Percentage');
      data.addRows([
        ['Nitrogen', 0.78],
        ['Oxygen', 0.21],
        ['Other', 0.01]
      ]);

      // Instantiate and draw the chart.
      var chart = new google.visualization.PieChart(document.getElementById('myPieChart'));
      chart.draw(data, null);
    }
  </script>
</head>
<body>
  <!-- Identify where the chart should be drawn. -->
  <div id="myPieChart"/>
</body>

Yükleme Ayrıntıları

İlk olarak yükleyicinin kendisini yüklemeniz gerekir. src="https://www.gstatic.com/charts/loader.js", ayrı bir script etiketinde yapılır. Bu etiket, head veya body olabilir ya da yüklenirken veya yükleme tamamlandıktan sonra dokümana dinamik olarak eklenebilir.

<script src="https://www.gstatic.com/charts/loader.js"></script>

Yükleyici yüklendikten sonra google.charts.load numaralı telefonu arayabilirsiniz. Buradaki adı belgenin head veya body bölümünde bir script etiketinde bulabilirsiniz. Değeri, belge yüklenirken ya da yüklendikten sonra istediğiniz zaman arayabilirsiniz.

Sürüm 45'ten itibaren, ek paketler yüklemek için google.charts.load'yi birden fazla kez çarayabilirsiniz ancak bunu yapmaktan kaçınmak daha güvenlidir. Her defasında aynı sürüm numarası ve dil ayarlarını sağlamanız gerekir.

Artık eski JSAPI autoload URL parametresini kullanabilirsiniz ancak bu parametrenin değeri, katı JSON biçimlendirmesi ve URL kodlaması kullanmalıdır. JavaScript'te jsonObject kodlamasını şu kodla yapabilirsiniz: encodeURIComponent(JSON.stringify(jsonObject)).

Sınırlamalar

v45'ten önceki sürümleri kullanıyorsanız Google Grafikleri'ni yükleme şeklinizle ilgili birkaç küçük ancak önemli sınırlama vardır:

  1. google.charts.load adlı işletmeyi yalnızca bir kez arayabilirsiniz. Ancak ihtiyaç duyduğunuz tüm paketleri tek bir çağrıda listeleyebilirsiniz. Böylece ayrı aramalar yapmanız gerekmez.
  2. ChartWrapper kullanıyorsanız ihtiyaç duyduğunuz tüm paketleri, ChartWrapper'a güvenerek otomatik olarak yükleyeceğinize güvenmek yerine açıkça yüklemeniz gerekir.
  3. Coğrafi grafik ve Harita Grafiği için hem eski kitaplık yükleyicisini hem de yeni kitaplık yükleyiciyi yüklemeniz gerekir. Bu yine yalnızca v45 öncesi sürümler için geçerlidir ve bunu daha sonraki sürümler için yapmamanız gerekir.
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://www.google.com/jsapi"></script>

Sürüm Adı veya Numarayı Yükleme

google.charts.load çağrınızın ilk bağımsız değişkeni sürüm adı veya numarasıdır. Şu anda yalnızca iki özel sürüm adı ve donmuş birkaç sürüm vardır.

akım
Bu, yeni bir sürüm yayınladığımızda değişen en son resmi sürümdür. İdeal olarak iyi test edilmiş ve hatasız bir sürümdür. Ancak çalıştığından emin olduktan sonra belirli bir donmuş sürümü belirtmek isteyebilirsiniz.
yaklaşan
Bu özellik bir sonraki sürüm için test aşamasında olup henüz resmi sürüm kapsamında değildir. Bu sürüm resmi sürüm olarak yayınlanmadan önce çözülmesi gereken bir sorun olup olmadığını mümkün olan en kısa sürede öğrenmek için lütfen bu sürümü düzenli olarak test edin.

Google Listeleri'nin yeni sürümlerini kullanıma sunduğumuzda, tamamen yeni grafik türleri gibi bazı değişiklikler büyüktür. Mevcut grafiklerin görünümü veya davranışında yapılan iyileştirmeler gibi diğer değişiklikler küçüktür.

Birçok Google Grafik üreticisi, grafikteki görünüm ve tarzın tam olarak istedikleri şey olmasını sağlayana kadar ince ayar yapar. Bazı içerik üreticiler, gelecekte yapacağımız iyileştirmelerden bağımsız olarak listelerinin hiçbir zaman değişmeyeceğini bilmenin verdiği rahatlığı yaşayabilir. Bu kullanıcılar için buzlu Google Listeleri'ni destekliyoruz.

Dondurulmuş grafik sürümleri sayıya göre belirlenir ve Resmi Sürümlerimizde açıklanmıştır. Dondurulmuş bir sürümü yüklemek için google.charts.load çağrısında current veya upcoming numarasını dondurulmuş sürüm numarasıyla değiştirin:

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('43', {packages: ['corechart']});
    google.charts.setOnLoadCallback(drawChart);
    ...
</script>

Donmuş sürümlerin süresiz olarak kullanıma sunulmasını bekleriz ancak güvenlikle ilgili kaygıları olan dondurulmuş sürümleri kullanımdan kaldırabiliriz. Genellikle daha yeni bir sürüme yükseltmeniz önerilmiyorsa donmuş sürümler için destek sağlanmaz.

Yükleme Ayarları

google.charts.load çağrısındaki ikinci parametre, ayarları belirten bir nesnedir. Ayarlar için aşağıdaki özellikler desteklenir.

paketler
Sıfır veya daha fazla paket dizisi. Yüklenen her paket, genellikle bir grafik türü olmak üzere bir dizi işlevi desteklemek için gereken koda sahiptir. Yüklemeniz gereken paketler veya paketler her bir grafik türünün dokümanlarında listelenir. Gerekli olacakları otomatik olarak yüklemek için bir ChartWrapper kullanıyorsanız paket belirtmeyin.
dil
Grafiğin parçası olabilecek metinleri özelleştirmek için kullanılması gereken dil veya yerel ayar kodu. Daha fazla bilgi için Yerel Ayarlar başlıklı makaleyi inceleyin.
geri çağırma
Paketler yüklendikten sonra çağrılacak bir işlev. Alternatif olarak, yukarıdaki örnekte gösterildiği gibi, google.charts.setOnLoadCallback işlevini çağırarak bu işlevi belirtebilirsiniz. Daha fazla bilgi için Geri çağırma bölümüne bakın.
  google.charts.load('current', { packages: [ 'corechart'], callback: drawChart });
mapsApi Anahtarı
(v45) Bu ayar, Coğrafi grafik ve Harita Grafiği ile kullanabileceğiniz bir anahtar belirtmenizi sağlar. Bunu yapmak, kullanıcılarınız için zaman zaman hizmet kısıtlamasına neden olabilecek varsayılan davranışı kullanmak yerine yapmak isteyebilirsiniz. "Google Maps JavaScript API" hizmetini kullanmak için kendi anahtarınızı nasıl ayarlayacağınızı buradan öğrenebilirsiniz: Anahtar/Kimlik Doğrulama alma. Kodunuz şuna benzer:
  var myMapsApiKey = 'SomeMagicToSetThis';
  google.charts.load('45', { packages: [ 'geochart'], mapsApiKey: myMapsApiKey  });
güvenliMod
(v47) Doğru olarak ayarlandığında, kullanıcı tarafından sağlanan verilerden HTML oluşturan tüm grafikler ve ipuçları, güvenli olmayan öğeleri ve özellikleri kaldırarak temizler. Alternatif olarak (v49+) kitaplık, aynı yükleme ayarlarını kabul eden ancak her zaman "mevcut" sürümü yükleyen bir kısayol kullanılarak güvenli modda yüklenebilir:
  google.charts.safeLoad({ packages: ['corechart'] });

Yerel ayarlar

Yerel ayarlar, bir ülke veya dildeki metinleri özelleştirmek için kullanılır. Para birimleri, tarihler ve sayılar gibi değerlerin biçimlendirmesi bu durumdan etkilenebilir.

Google Grafikleri varsayılan olarak "en" yerel ayarıyla yüklenir. Yükleme ayarlarında açıkça bir yerel ayar belirterek bu varsayılan ayarı geçersiz kılabilirsiniz.

Belirli bir yerel ayara göre biçimlendirilmiş bir grafik yüklemek için language ayarını şu şekilde kullanın:

  // Load Google Charts for the Japanese locale.
  google.charts.load('current', {'packages':['corechart'], 'language': 'ja'});

Canlı bir örnek için bu bağlantıyı izleyin.

Geri Arama

google.charts.load tarafından yüklenen paketlerden herhangi birini kullanmadan önce yüklemenin bitmesini beklemeniz gerekir. Belgenin yüklenmesinin bitmesini beklemek yeterli değildir. Bu yüklemenin tamamlanması biraz zaman alabileceğinden geri çağırma işlevi kaydetmeniz gerekir. Bunu yapmanın üç yolu vardır. google.charts.load çağrınızda bir callback ayarı belirtin veya bağımsız değişken olarak bir işlev ileten setOnLoadCallback çağrısı yapın ya da google.charts.load çağrısıyla döndürülen Vaadini kullanın.

Tüm bu yöntemler için işlev çağırmak yerine bir işlev tanımı sağlamanız gerektiğini unutmayın. Sağladığınız işlev tanımı adlandırılmış bir işlev olabilir (yani yalnızca adını verin) veya anonim bir işlev olabilir. Paketlerin yüklenmesi bittiğinde, bu geri çağırma işlevi bağımsız değişken olmadan çağrılacak. Yükleyici, geri çağırmadan önce dokümanın yüklenmesinin bitmesini bekler.

Birden fazla grafik çizmek isterseniz setOnLoadCallback kullanarak birden fazla geri çağırma işlevi kaydedebilir veya bunları tek bir işlevde birleştirebilirsiniz. Tek Sayfada Birden Fazla Grafik Oluşturma hakkında daha fazla bilgi edinin.

  google.charts.setOnLoadCallback(drawChart1);
  google.charts.setOnLoadCallback(drawChart2);
  // OR
  google.charts.setOnLoadCallback(
    function() { // Anonymous function that calls drawChart1 and drawChart2
         drawChart1();
         drawChart2();
      });

Vaat ile geri arama

Geri çağırmanızı kaydetmenin bir başka yolu, google.charts.load çağrısından döndürülen sözü kullanmaktır. Bunun için, then() yöntemine aşağıdakine benzer bir kod içeren bir çağrı ekleyin.

  google.charts.load('upcoming', {packages: ['corechart']}).then(drawChart);

Promise'i kullanmanın avantajlarından biri, daha fazla .then(anotherFunction) çağrısını zincirleyerek kolayca daha fazla grafik çizebilmenizdir. Promise'ı kullanmak, geri çağırmayı söz konusu geri çağırma için gereken belirli paketlere bağlar. Bu, başka bir google.charts.load() çağrısıyla daha fazla paket yüklemek istiyorsanız önemlidir.

Kitaplık Yükleyici Kodunu Güncelleme

Google Listeleri'nin önceki sürümleri, kitaplıkları yüklemek için farklı bir kod kullanıyordu. Aşağıdaki tabloda, eski kitaplık yükleyici kodu yeni koda göre gösterilmektedir.

Eski Kitaplık Yükleyici Kodu
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
</script>
      
Yeni Kitaplık Yükleyici Kodu
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
  google.charts.load('current', {packages: ['corechart']});
  google.charts.setOnLoadCallback(drawChart);
</script>
      

Mevcut grafiklerinizi güncellemek için eski kitaplık yükleyici kodunu yeni kodla değiştirebilirsiniz. Ancak yukarıda açıklanan yükleme kitaplıklarıyla ilgili sınırlamaları göz önünde bulundurun.