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

Görselleştirme: Genel Resim Grafiği

Önemli: Google Grafik Araçları'nın Resim Listeleri bölümü, 20 Nisan 2012'den itibaren resmi olarak kullanımdan kaldırılmıştır. 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 kullanmayı denemeden önce lütfen Chart API dokümanlarını okuyun. Chart API'ye yapılan doğrudan çağrılardaki 2K sınırını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 iletilir.

Diğer tüm Chart API URL parametreleri (chd hariç) seçenek olarak aktarılır.

Oluşturan: Google

Örnekler

Aşağıda, farklı grafik türlerine birkaç örnek 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 belirtmenize gerek olmadığını unutmayın; bir eksen belirtmezseniz Genel Resim Grafiği, grafiği varsayılan olarak uygun ş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 paket adı "imagegrafik"

  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

İki genel veri biçimi vardır: harita grafikler ve diğer tüm grafikler için bir veri biçimi. Veriler için desteklenen tek sayısal biçimin JavaScript Numarası türü olduğunu unutmayın.

Not: Veri veya seçenek olarak iletilen herhangi bir dize değerini kodlamamanız gerekir.

Harita Grafikleri

Bir harita grafik, gerekli iki sütunu içeren bir veri tablosu alır:

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

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

Harita Dışı Grafikler

Harita olmayan grafikler, biri isteğe bağlı olmak üzere, biri de sonunda olmak üzere iki veri sütunu ve aşağıdakiler arasında bir veya daha fazla veri sütunu bulunan bir veri tablosu alır:

İlk sütun - [isteğe bağlı, dize] Her giriş, X ekseninde kullanılan bir etiketi (chl veya chxl parametresine eşdeğerdir) destekler.
Sonraki sütunlar: Her biri bir veri dizisini temsil eden herhangi bir sayıda sayısal sütun.
Son sütunlar - [isteğe bağlı, dize] Veri sütunlarının ardından herhangi bir sayıda dize sütunu. Burada her giriş, 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österilir. Grafiğinizin dokümanlarına bakın.

Sütun dizinleriyle ilgili bir not: Genel Resim Grafiği görselleştirmesi, tabloyu Chart API hizmetine göndermeden önce veri tablosundan çıkarır. Dolayısıyla, bu sayfada tanımlanan seçenekler, yöntemler ve etkinliklerdeki sütun dizinleri, dizin sayısındaki dize sütunlarını içerir. Ancak Chart API hizmeti tarafından işlenen seçeneklerdeki sütun dizinleri (örneğin, 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ımlandı. Bunları, görselleştirmenin draw() yöntemine aktarılan seçenekler nesnesinde tanımlayın. Tüm grafik türleri için aşağıdaki seçeneklerin tümü desteklenmez. Statik resim grafiği türünüzle ilgili dokümanları inceleyin. Seçenek olarak herhangi bir Chart API URL parametresini iletebilirsiniz. Örneğin, bir Grafik görselleştirmedeki chg=50,50 URL parametresi şu şekilde belirtilir: options['chg'] = '50,50'.

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

Ad	Tür	Varsayılan	Açıklama
notnotları	Dizi<object>	yok	Çeşitli grafik türleri için veri noktası etiketleri. Bu, her biri grafikte bir veri noktasına biçimlendirilmiş etiket atayan bir nesne dizisidir. Bu seçenek yalnızca veri noktalarını destekleyen grafikler için kullanılabilir (Bunları öğrenmek için bağlantılı konuya bakın). Veri tablosu, dize etiketi sütunlarından en az birine sahip olmalı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ı dizini. Bu sütunun her satırında bir değere ihtiyacınız yoktur. `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] - Chart API'sı renk biçimindeki ek açıklama metninin rengi. Varsayılan değer '#000000' (siyah) şeklindedir. `size` [sayı] - Ek açıklamanın piksel cinsinden yazı tipi boyutu. `priority` [dize] - Etiketin çizileceği katmanı belirten "düşük", "orta" veya "yüksek" değeri. Varsayılan değer "medium"dur. Bu değer, etiketin çubuktan ve satırlardan sonra, ancak diğer etiketlerden önce çizildiğini belirtir. `type` [dize] - "metin" veya "işaret". "text" (düz) metin düz ek açıklama oluşturur ve "flag" konuşma balonu ek açıklaması oluşturur. Örnek - Bu snippet, 0 sütunundan alınan ve aynı satırın 2. sütunundaki veri noktasına atanan siyah 12 piksellik bir metin etiketini tanımlar: `options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];`
arka plan rengi	string	"#FFFFFF" (beyaz)	Chart API'sı renk biçimindeki grafiğin arka plan rengi.
renk	string	Otomatik	Tüm seriler için kullanılacak temel rengi belirtir. Her seri, belirtilen rengin derecesi olur. Renkler, Chart API'sı renk biçiminde belirtilir. `colors` belirtilmişse yoksayılır.
renkler	Dizi<string>	Otomatik	Her bir veri dizisine belirli renkler atamak için bunu kullanın. Renkler, Chart API'sı renk biçiminde belirtilir. Renk i, veri sütunu i için kullanılır ve renklerden daha fazla veri sütunu varsa başa gelir. Tüm seriler için tek bir renk varyasyonları kabul ediliyorsa bunun yerine `color` seçeneğini kullanın.
Etkinlikleri etkinleştir	boolean	yanlış	Grafiklerin, tıklama veya fareyle üzerine gelme gibi kullanıcı tarafından tetiklenen etkinlikleri atlamasına neden olur. Yalnızca belirli grafik türleri için desteklenir. Aşağıdaki Etkinlikler'e göz atın.
fill	boolean	yanlış	Doğruysa her bir satırın altındaki alanı doldurur. Yalnızca çizgi grafikler için kullanılabilir.
ilkGizliSütun	number (sayı)	yok	Veri sütunu dizini. Listelenen sütun ve aşağıdaki sütunların tümü, ana grafik serisi öğeleri (ç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	number (sayı)	200	Grafiğin piksel cinsinden yüksekliği. Kabul edilemez aralıktaysa veya kabul edilmiyorsa kapsayıcı öğenin yüksekliği kullanılır. Bu da kabul edilebilir aralığın dışındaysa varsayılan yükseklik kullanılır.
etiketler	string	"hiçbiri"	[Yalnızca pasta grafik] Her bir dilim için gösterilecek etiket (varsa). Aşağıdaki değerler arasından seçim yapın: "none" (hiçbiri) - Etiket yok. "value" - Dilim değerini etiket olarak gösterir. "ad" - Dilim adını (sütun adı) etiket olarak gösterir.
açıklama	string	"sağ"	Grafiğe göre grafik açıklaması. Şunlardan birini belirtin: 'top', 'bottom', 'left', 'right', 'none'. Açıklamalar (grafikler gibi) içermeyen grafiklerde yoksayılır.
maks.	number (sayı)	Maksimum veri değeri	Ölçekte gösterilen maksimum değer. Pasta grafikler için yoksayılır. Varsayılan değer, maksimum veri değeri olan çubuk grafikler hariç maksimum veri değeridir. Tabloda birden fazla veri sütunu olduğunda bu, çubuk grafikler için yoksayılır.
dak	number (sayı)	Mimum veri değeri	Ölçekte gösterilen minimum değer. Pasta grafikler için yoksayılır. Varsayılan değer, varsayılanın sıfır olduğu çubuk grafikler hariç minimum veri değeridir. Tabloda birden fazla veri sütunu olduğunda bu, çubuk grafikler için yoksayılır.
KategoriKategorilerini	boolean	true	Etiketlerin kategori (ör. satır) ekseninde görünüp görünmeyeceğini belirler. Yalnızca çizgi ve çubuk grafiklerde kullanılabilir.
program_değeri	boolean	true	Doğru, değer ekseninde bir etiket gösterir. Yalnızca çizgi ve çubuk grafiklerde kullanılabilir.
tekSütunEkran	number (sayı)	yok	Yalnızca belirtilen veri sütununu oluşturur. Bu sayı, tabloya sıfır tabanlı bir dizindir. Sıfır, ilk veri sütunudur. Tek sütuna atanan renk, tüm sütunların oluşturulacağı renkle aynıdır. Pasta veya harita grafikleriyle birlikte kullanılamaz.
başlık	string	Boş dize	Grafik başlığı. Belirtilmemesi durumunda başlık gösterilmez. Eşdeğer grafik parametresi: `chtt`
değerEtiketi Aralığı	number (sayı)	Otomatik	Değer ekseni etiketlerinin gösterileceği aralık. Örneğin, `min` 0, `max` 100 ve `valueLabelsInterval` 20 ise grafikte (0, 20, 40, 60, 80 100) eksen etiketleri gösterilir.
genişlik	number (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 da 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 bakın.

Etkinlikler

enableEvents özelliğini doğru değerine ayarlarsanız grafikleri desteklemek, aşağıdaki tabloda listelenen kullanıcı etkinliklerinde atlanır. Bu etkinliklerin tümü aşağıdaki özelliklere sahip bir event nesnesi döndürür:

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

Ad	Açıklama	Değer türü
`error`	Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.	kimlik, mesaj
`onmouseover`	Kullanıcı bir grafik öğesinin üzerine geldiğinde tetiklenir.	"fareyle üzerine gelin"
`onmouseout`	Kullanıcı fare imlecini bir grafik öğesinden uzaklaştırdığında tetiklenir.	"fareyle"
`onclick`	Kullanıcı bir grafik öğesini tıkladığında tetiklenir.	"tıklama"

Hangi grafikler etkinlikleri destekliyor?

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 çubuk gösteren bir örneği burada görebilirsiniz.

<!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 Grafik hizmeti tarafından desteklenen tüm yerelleştirmeleri destekler.