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