Görselleştirme: Pasta Grafik (Eski Sürüm)

Kullanımdan Kaldırıldı

Bu görselleştirme yeni bir sürüm ile değiştirildi. Lütfen yeni sürümü kullanın. Taşıma işlemini kolaylaştırmak için lütfen sürüm notları sayfasına bakın.

  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ış

SVG veya VML kullanılarak tarayıcıda oluşturulan bir pasta grafik. Dilimler tıklandığında ipuçlarını görüntüler. Açıklama girişleri tıklandığında dilimlere animasyon ekler.

Oluşturan: Google

Örnek

Görselleştirme Playground'da kendiniz kodlayın

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["piechart"]});
      google.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.PieChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My Daily Activities'});
      }
    </script>
  </head>

  <body>
    <div id="chart_div"></div>
  </body>
</html>

Yükleniyor

google.load paketinin adı: "piechart"

  google.load("visualization", "1", {packages: ["piechart"]});

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

  var visualization = new google.visualization.PieChart(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

Ad Tür Varsayılan Açıklama
backgroundColor dize veya Nesne varsayılan renk Grafiğin ana alanı için arka plan rengi. Aşağıdaki seçeneklerden biri:
  • "Kırmızı" veya "#00cc00" gibi HTML tarafından desteklenen renklere sahip bir dize veya
  • Aşağıdaki özelliklere sahip n nesnesinin açıklaması:
    • stroke - Grafik kenarlık rengini açıklayan HTML renk dizesi.
    • fill - Grafik arka plan rengini açıklayan bir HTML renk dizesi.
    • strokeSize - Grafik kenarlığının kalınlığını piksel cinsinden açıklayan bir sayı. Kenarlık yoksa 0 olarak ayarlanabilir.
      Örnek: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}.
borderColor dize veya Nesne varsayılan renk Grafik öğelerinin etrafındaki kenarlık. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
renkler Dize veya nesne dizisi Varsayılan renkler

Her öğenin bir serinin rengini belirttiği bir renk dizisi. Her seri için bir dizi öğesi belirtmelisiniz.

  • is3D=false ise bu bir HTML renk dizisidir. Örnek: renkler:['#00FF00','orange']
  • is3D=true değeri, bu HTML renklerinden veya şu türdeki nesnelerden oluşan bir dizidir: {color:face_color, darker:shade_color} burada color, öğenin yüz rengi, darker ise gölge rengidir. Bununla birlikte, bir 3D nesne için HTML rengi belirtirseniz yüz ve gölge aynı renkte olur ve 3D efekti azalır. Örnek: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
enableTooltip boolean true Doğru değerine ayarlanırsa kullanıcı bir dilimi tıkladığında ipuçları gösterilir.
focusBorderColor dize veya Nesne varsayılan renk Odaklı (fare ile gösterilen) grafik öğelerinin etrafındaki kenarlık. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
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.
harita açıklamaları dize "sağ" Açıklamaların konumu ve türü. Aşağıdakilerden biri olabilir:
  • "right" (sağ): Grafiğin sağında.
  • "left": Grafiğin solunda.
  • "top" (üstte): Grafiğin üstünde.
  • "bottom": Grafiğin altında.
  • "label" - Dilimlerin yanındaki etiketler.
  • "none" (hiçbiri) - Açıklama gösterilmez.
legendBackgroundColor dize veya Nesne varsayılan renk Grafiğin açıklama alanı için arka plan rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
legendFontSize sayı otomatik Gösterge yazı tipinin piksel cinsinden boyutu.
legendTextColor dize veya Nesne varsayılan renk Gösterge metin rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
pieJoinAngle sayı 0 Bu açıdan küçük olan tüm dilimler, "Diğer" etiketli genel bir dilimde birleştirilir.
pieMinimalAngle sayı 0

Bu açıdan küçük olan dilimler pasta grafiğine çizilmez (ancak yine de açıklama girişi alır). Kalan dilimler, pastayı sabit oranda dolduracak şekilde genişler. Not: Pastadan bir miktar kaldırıldığı için bu durum özellikle bu sayı büyük olduğunda görünen değerleri bozabilir.

Dilimlerin boyutlarını hesaplamak için pieJoinAngle'dan küçük olan ilk açılar "Other" dilimiyle birleştirilir, daha sonra pieMinimalAngle'dan büyük olan tüm dilimler çizilir
title dize başlık yok Grafiğin üzerinde gösterilecek metin.
titleColor dize veya Nesne varsayılan renk Grafik başlığının rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
titleFontSize sayı otomatik Grafik başlığının yazı tipi boyutu (piksel).

tooltipFontSize		 sayı 11 İpucu metninin yazı tipi boyutu. İpucu, metni belirtilen yazı tipinde tutamayacak kadar küçükse bu boyut azaltılabilir.
tooltipHeight
 sayı 60 İpucunun piksel cinsinden yüksekliği. İpucu yüksekliği sabittir; hiçbir zaman metnin uzunluğuna veya yazı tipi boyutuna sığacak şekilde büyümez veya küçülmez. Ancak grafik yüksekliğinin 1/3'ünden fazlası kırpılır.
tooltipWidth sayı 120 İpucunun piksel cinsinden genişliği. İpucu genişliği sabittir; hiçbir zaman metnin uzunluğuna veya yazı tipi boyutuna sığacak şekilde büyümez veya küçülmez. Ancak grafik genişliğinden büyük olan her şey kırpılır.
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.
getSelection() Seçim öğeleri dizisi Standart getSelection() uygulaması. Seçilen öğeler, satır ve hücre öğeleri. Kullanıcı tarafından tek seferde birden çok satır ve/veya tek bir hücre seçilebilir.
setSelection() yok Standart setSelection() uygulamasıdır ancak birden fazla satır ve/veya bir hücrenin seçilmesini destekler. Her seçim girişini satır veya hücre seçimi olarak ele alır.

Etkinlikler

Ad Açıklama Özellikler
onmouseover Kullanıcı faresini bir dilimin üzerine getirdiğinde tetiklenir ve ilgili hücrenin satır ve sütun dizinlerinden geçer. satır, sütun
onmouseout Kullanıcı faresini bir dilimden uzaklaştırdığında ve karşılık gelen hücrenin satır ve sütun dizinlerinden geçtiğinde tetiklenir. satır, sütun
ready Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve grafiği çizdikten sonra yöntemleri çağırmak istiyorsanız draw yöntemini çağırmadan önce bu etkinlik için bir işleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra çağırmanız gerekir Yok
select

Kullanıcı bir dilimi veya açıklamaları tıkladığında tetiklenir. Bir dilim seçildiğinde, veri tablosundaki karşılık gelen hücre seçilir. Açıklama seçildiğinde, veri tablosundaki ilgili sütun seçilir. Neyin seçildiğini öğrenmek için getSelection() numaralı telefonu arayın.

Not: Bir dilimi tıkladığınızda hücreyi seçme ve seçimini kaldırma arasında geçiş yapılmaz. Dilim tıklandığında her zaman seçili olur. Diğer yandan, bir açıklama girişini tıkladığınızda satırın seçilmesi ve seçiminin kaldırılması arasında geçiş yapılır.

Yok

Veri Politikası

Tüm kod ve veriler tarayıcıda işlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.