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.

  1. Genel bakış
  2. Örnekler
  3. Yükleniyor
  4. Veri Biçimi
  5. Yapılandırma Seçenekleri
  6. Yöntemler
  7. Etkinlikler
  8. Veri Politikası
  9. 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:

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.