Görselleştirme: Pasta Grafik (Resim)

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

  1. Genel Bakış
  2. Örnek
  3. Yükleniyor
  4. Veri Biçimi
  5. Yapılandırma Seçenekleri
  6. Yöntemler
  7. Etkinlikler
  8. Veri Politikası

Genel bakış

Google Sitemaps API ile resim olarak oluşturulan bir pasta grafik.

Örnek

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',        11],
          ['Eat',         2],
          ['Commute',     2],
          ['Watch TV',    2],
          ['Sleep',       7]
        ]);

        var chart = new google.visualization.ImagePieChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 430, height: 240, title: 'My Daily Activities'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Yükleniyor

google.charts.load paket adı "imagepiechart":

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

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

  var visualization = new google.visualization.ImagePieChart(container);

Veri Biçimi

İki sütun. İlk sütun bir dize olmalı ve dilim etiketini içermelidir. İkinci sütun bir sayı olmalı ve dilim değerini içermelidir.

Yapılandırma Seçenekleri

Görselleştirmenin draw() yöntemine iletilen option nesnesinin parçası olarak aşağıdaki seçenekleri belirtebilirsiniz.

Ad Tür Varsayılan Açıklama
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.
yükseklik number (sayı) Kapsayıcının yüksekliği Grafiğin piksel cinsinden yüksekliği.
3D boolean yanlış Doğru değerine ayarlanırsa üç boyutlu grafik gösterir.
etiketler string "hiçbiri"

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" (değer) - Dilim değerini etiket olarak kullanın.
  • "ad" - Dilim adını (sütun adı) kullanın.
açıklama string "sağ" Grafikteki açıklama bölümünün konumu. Şu değerlerden birini seçin: 'top', 'bottom', 'left', 'right', 'none'.
başlık string başlık yok Grafiğin üzerinde görüntülenecek metin.
genişlik number (sayı) Kapsayıcının genişliği Grafiğin piksel cinsinden genişliği.

Yöntemler

Yöntem Dönüş Türü Açıklama
draw(data, options) yok Grafiği çizer.

Etkinlikler

Genel Resim Grafiği sayfasında açıklanan etkinlikleri dinlemek için kaydolabilirsiniz.

Veri Politikası

Lütfen Chart API günlük kaydı politikasını inceleyin.