Bu sayfa, Cloud Translation API ile çevrilmiştir.

Görselleştirme: Genel Resim Grafiği

Önemli: Google Grafik Araçları'nın Resim Grafikleri bölümü, 20 Nisan 2012 tarihi itibarıyla resmi olarak kullanımdan kaldırılmıştır. Hesabınız, kullanımdan kaldırma politikamız uyarınca çalışmaya devam edecektir.

Genel bakış
Örnekler
Yükleniyor
Veri Biçimi
Yapılandırma Seçenekleri
Yöntemler
Etkinlikler
Veri Politikası
Yerelleştirme

Genel bakış

Genel Resim Grafiği, Google Chart API tarafından oluşturulan tüm grafikler için genel bir sarmalayıcıdır. Bu görselleştirmeyi kullanmadan önce lütfen Chart API dokümanlarını okuyun. Chart API'ye yapılan doğrudan çağrılardaki 2.000 sınırın aksine, bu görselleştirmeyi kullanarak 16.000'e kadar veri gönderebileceğinizi unutmayın.

Tüm veriler DataTable veya DataView kullanılarak grafiklere aktarılır. Ayrıca, bazı etiketler veri tablosunda sütun olarak aktarılır.

Diğer tüm Chart API URL parametreleri (chd hariç) seçenek olarak iletilir.

Oluşturan: Google

Örnekler

Aşağıda birkaç farklı grafik türüne ilişkin örnekler verilmiştir.

Çizgi Grafik

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

Dikey Çubuk Grafik

Sarmalanmış çubuk grafiklerde, grafiği kendiniz çağırırken yaptığınız gibi chxt='x' değerini belirtmeniz gerekmediğini unutmayın. Eksen belirtmezseniz Genel Resim Grafiği, grafiği varsayılan olarak doğru şekilde ayarlamaya çalışır.

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</html>

Pasta Grafik

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</html>

Radar Grafik

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</html>

Harita Grafiği

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

Yükleniyor

google.charts.load paketinin adı "imagechart"tır

  google.charts.load('current', {'packages': ['imagechart']});

Görselleştirmenin sınıf adı: google.visualization.ImageChart

  var visualization = new google.visualization.ImageChart(container_div);

Veri Biçimi

Biri harita grafikleri, diğeri tüm diğer grafikler için olmak üzere iki genel veri biçimi vardır. Veriler için desteklenen tek sayısal biçimin JavaScript Sayı türü olduğunu unutmayın.

Not: Veri veya seçenek olarak iletilen dize değerlerini URL olarak kodlamamanız gerekir.

Harita Grafikleri

Bir harita grafiği, iki zorunlu sütun içeren bir veri tablosunu alır:

İlk sütun - [dize] Ülke veya eyalet/il kodu.
İkinci sütun - [sayı] Söz konusu ülkenin veya eyaletin değeri.

Daha fazla bilgi için harita grafiği dokümanlarına bakın.

Harita Dışı Grafikler

Harita olmayan grafiklerde, biri başta, diğeri sonda isteğe bağlı iki sütun ve bunların arasında bir veya daha fazla veri sütunu olan bir veri tablosu kullanılır:

İlk sütun - [isteğe bağlı, dize] Her giriş, kendisini destekleyen grafikler için X ekseninde kullanılan bir etiketi (chl veya chxl parametresine eşdeğerdir) temsil eder.
Sonraki sütunlar - Her biri bir veri serisini temsil eden, istenilen sayıda sayısal sütun.
Son sütunlar - [isteğe bağlı, dize] Veri sütunlarından sonra gelen herhangi bir sayıda dize sütunu. Burada her giriş, onu destekleyen grafikler için bir veri noktası etiketini temsil eder. Bu sütunu kullanmak istiyorsanız annotationColumns seçeneğini belirtmeniz gerekir.

Veriler, grafik türüne bağlı olarak farklı şekillerde görüntülenir. Grafiğinizle ilgili belgelere bakın.

Sütun dizinleriyle ilgili bir not: Genel Resim Grafiği görselleştirmesi, tabloyu Chart API hizmetine göndermeden önce veri tablosundan dize sütunlarını çıkarır. Bu nedenle, bu sayfada tanımlanan seçenekler, yöntemler ve etkinliklerdeki sütun dizinlerinde, dizin sayısındaki dize sütunları bulunur. Ancak Chart API hizmeti tarafından işlenen tüm seçeneklerdeki sütun dizinleri (ör. chm seçeneği) dizin sayısındaki dize sütunlarını yoksayar.

Yapılandırma Seçenekleri

Bu görselleştirme için aşağıdaki seçenekler tanımlanmıştır. Görselleştirmenin draw() yöntemine iletilen seçenekler nesnesinde bunları tanımlayın. Aşağıdaki seçeneklerin tümü tüm grafik türleri için desteklenmez. Statik resim grafiği türünüzle ilgili dokümanlara bakın. Seçenek olarak herhangi bir Chart API URL parametresini iletebilirsiniz. Örneğin, bir grafik görselleştirmesindeki chg=50,50 URL parametresi şu şekilde belirtilir: options['chg'] = '50,50'.

Renklerle ilgili bir not: colors, color ve backgroundColor gibi renk seçenekleri, Grafik API'si renk biçiminde belirtilir. Bu biçim, #RRGGBB biçimine benzer. Tek fark, şeffaflığı belirtmek için isteğe bağlı dördüncü bir onaltılık sayı içermesidir. "Kırmızı", "yeşil", "mavi" gibi kullanıcılar tarafından okunabilir renkler desteklenmez. Chart API renk biçimi, baştaki # simgesini içermez ancak genel resim grafiği görselleştirme seçeneklerinde # bulunan veya # içermeyen renk kodları kabul edilir.

Ad	Tür	Varsayılan	Açıklama
annotationColumns	Array<object>	yok	Çeşitli grafik türleri için veri noktası etiketleri. Bu nesne dizisi, her biri grafikteki bir veri noktasına biçimlendirilmiş bir etiket atar. Bu seçenek yalnızca veri noktalarını destekleyen grafikler için kullanılabilir (hangi noktaları öğrenmek için bağlantılı konuya bakın) ve veri tablosunda dize etiketi sütunlarından en az biri bulunmalıdır. Dizideki her nesne aşağıdaki özelliklere sahiptir: `column` [sayı] - Ek açıklamada kullanılan metni barındıran sütunun sıfır tabanlı dizinidir. Bu sütunun her satırında değer olması gerekmez. `positionColumn` [sayı] - Etiketlenen veri noktasını barındıran sütunun sıfır tabanlı dizini. Varsayılan değer, ilk veri sütunudur. `color` [dize] - Ek açıklama metninin, Chart API renk biçimindeki rengi. Varsayılan değer "#000000"dır (siyah). `size` [sayı] - Ek açıklamanın piksel cinsinden yazı tipi boyutu. `priority` [dize] - Etiketin çizilmesi gereken katmanı belirten "düşük", "orta" veya "yüksek" değerleri. Varsayılan değer "medium"dur. Bu, etiketin çubuklar ve çizgilerden sonra, ancak diğer etiketlerden önce çizildiğini belirtir. `type` [dize] - "metin" veya "bayrak". "metin" düz metin ek açıklaması, "bayrak" ise konuşma balonu ek açıklaması oluşturur. Örnek - Bu snippet siyah, 12 piksellik bir metin etiketi tanımlar. Metin 0 sütunundan alınır ve aynı satırın 2. sütunundaki veri noktasına atanır: `options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];`
backgroundColor	dize	"#FFFFFF" (beyaz)	Grafik için Grafik API'si renk biçimindeki arka plan rengi.
renk	dize	Otomatik	Tüm seriler için kullanılacak bir temel rengi belirtir. Her seri, belirtilen rengin derecesi olur. Renkler, Chart API renk biçiminde belirtilir. `colors` belirtilmişse yoksayılır.
renkler	Dizi<dize>	Otomatik	Her bir veri serisine belirli renkler atamak için bunu kullanın. Renkler, Chart API renk biçiminde belirtilir. i rengi, veri sütunu i için kullanılır ve renklerden daha fazla veri sütunu varsa başa kaydırılır. Tüm seriler için tek bir rengin varyasyonları kabul ediliyorsa bunun yerine `color` seçeneğini kullanın.
enableEvents	boolean	false	Grafiklerin, tıklama veya fareyle üzerine gelme gibi kullanıcı tarafından tetiklenen etkinlikleri bildirmesine neden olur. Yalnızca belirli grafik türleri için desteklenir. Aşağıda Etkinlikleri inceleyin.
fill	boolean	false	True (doğru) ise her satırın altındaki alanı doldurur. Yalnızca çizgi grafikler için kullanılabilir.
firstHiddenColumn	sayı	yok	Veri sütunu dizini. Listelenen sütun ve takip eden tüm sütunlar, ana grafik serisi öğelerini (çizgi grafikteki çizgiler veya çubuk grafikteki çubuklar gibi) çizmek için kullanılmaz, bunun yerine işaretçiler ve diğer ek açıklamalar için veri olarak kullanılır. Dize sütunlarının bu dizin sayısına dahil edildiğini unutmayın.
yükseklik	sayı	200	Grafiğin piksel cinsinden yüksekliği. Eksik veya kabul edilebilir bir aralıkta değilse kapsayıcı öğenin yüksekliği kullanılır. Bu değer de kabul edilebilir aralığın dışındaysa varsayılan yükseklik kullanılır.
etiketler	dize	"hiçbiri"	[Yalnızca pasta grafik] Her bir dilim için hangi etiketin (varsa) gösterileceğini belirleyin. Aşağıdaki değerler arasından seçim yapın: "none" (hiçbiri) - Etiket yok. "değer" - Dilim değerini etiket olarak gösterir. "ad" - Dilim adını (sütun adı) etiket olarak gösterir.
harita açıklamaları	dize	"sağ"	Grafiğe göre grafik açıklamalarının görüntüleneceği yer. Şunlardan birini belirleyin: "top" (üst), "bottom" (alt), "left" (sol), "right" (sağ), "none" (hiçbiri). Gösterge içermeyen grafiklerde (harita grafikleri gibi) yoksayılır.
maks.	sayı	Maksimum veri değeri	Ölçekte gösterilen maksimum değer. Pasta grafikler için yoksayılır. Varsayılan değerin maksimum veri olduğu çubuk grafikler hariç olmak üzere maksimum veri değeridir. Tabloda birden fazla veri sütunu olduğunda bu durum çubuk grafiklerde yoksayılır.
dk	sayı	Minimum veri değeri	Ölçekte gösterilen minimum değer. Pasta grafikler için yoksayılır. Varsayılan değerin sıfır olduğu çubuk grafikler hariç olmak üzere, varsayılan veri minimum veri değeridir. Tabloda birden fazla veri sütunu olduğunda bu durum çubuk grafikler için yoksayılır.
showCategoryLabels	boolean	true	Etiketlerin kategori (yani satır) ekseninde görünüp görünmeyeceğini belirtir. Yalnızca çizgi ve çubuk grafikler için kullanılabilir.
showValueLabels	boolean	true	Doğru değerine ayarlanırsa değer ekseninde bir etiket gösterir. Yalnızca çizgi ve çubuk grafikler için kullanılabilir.
singleColumnDisplay	sayı	yok	Yalnızca belirtilen veri sütununu oluşturur. Bu sayı, tabloya sıfır tabanlı bir dizindir ve sıfırın ilk veri sütunudur. Tek sütuna atanan renk, tüm sütunların oluşturulduğu renkle aynıdır. Pasta veya harita grafiklerle kullanılamaz.
title	dize	Boş dize	Grafik başlığı. Belirtilmezse başlık gösterilmez. Eşdeğer grafik parametresi: `chtt`.
valueLabelsInterval	sayı	Otomatik	Değer ekseni etiketlerinin gösterileceği aralık. Örneğin, `min` değeri 0, `max` 100 ve `valueLabelsInterval` değeri 20 ise grafik, eksen etiketlerini (0, 20, 40, 60, 80 100) konumunda gösterir.
genişlik	sayı	400	Grafiğin piksel cinsinden genişliği. Eksik veya kabul edilebilir bir aralıkta değilse kapsayıcı öğenin genişliği kullanılır. Bu değer de kabul edilebilir aralığın dışındaysa varsayılan genişlik kullanılır.

Yöntemler

Yöntem	Dönüş Türü	Açıklama
`draw(data, options)`	Yok	Haritayı çizer.
`getImageUrl()`	Dize	Grafiği istemek için kullanılan Google Chart API URL'sini döndürür. Bunun 2.000 karakterden uzun olabileceğini unutmayın. Daha fazla bilgi için Google Chart API'ye göz atın.

Etkinlikler

enableEvents özelliğini doğru değerine ayarlarsanız destekleyici grafikler aşağıdaki tabloda listelenen kullanıcı etkinlikleri için etkinlikler yayınlar. Bu etkinliklerin tümü, aşağıdaki özelliklere sahip bir event nesnesi döndürür:

type: Etkinlik türünü temsil eden bir dize.
region - Etkilenen bölgenin kimliği. Kullanılabilir adların listesini görmek için ham grafik türüne chof=json parametresini ekleyin. Daha fazla bilgi için chof=json sayfasını inceleyin.

Ad	Açıklama	type Değeri
`error`	Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.	kimlik, ileti
`onmouseover`	Kullanıcı fare imlecini bir grafik öğesinin üzerine getirdiğinde tetiklenir.	"fareyle üzerine gelme"
`onmouseout`	Kullanıcı faresini bir grafik öğesinden uzaklaştırdığında tetiklenir.	"mouseout"
`onclick`	Kullanıcı bir grafik öğesini tıkladığında tetiklenir.	"tıklama"

Hangi grafikler etkinlikleri destekler?

chof=json parametresini destekleyen tüm grafikler, etkinlik göndermeyi destekler (yani, QR kodları gibi özel grafikler hariç tüm grafikler).

Etkinlik İşleme Örneği

Fare tıklamalarını kaydeden bir çubuğu gösteren örneği aşağıda bulabilirsiniz.

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

Veri Politikası

Veriler Google Chart API hizmetine gönderilir.

Yerelleştirme

Bu görselleştirme, Google Chart hizmeti tarafından desteklenen tüm yerelleştirmeleri destekler.