Görselleştirme: Pasta Grafik (Resim)

Ö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. Ö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 Charts API kullanılarak 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 paketinin 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 geçirilen options nesnesinin bir parçası olarak aşağıdaki seçenekleri belirtebilirsiniz.

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

Her bir dilim için hangi etiketin (varsa) gösterileceğini belirtir. Aşağıdaki değerler arasından seçim yapın:

  • "none" (hiçbiri) - Etiket yok.
  • "value": Dilim değerini etiket olarak kullanın.
  • "ad" - Dilim adını (sütun adı) kullanın.
harita açıklamaları dize "sağ" Göstergenin grafikteki konumu. Şu değerlerden birini seçin: "top" (üst), "bottom" (alt), "left" (sol), "right" (sağ), "none" (hiçbiri).
title dize başlık yok Grafiğin üzerinde gösterilecek metin.
genişlik sayı Kapsayıcı 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.