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

Görselleştirme: Gösterge

Genel bakış
Örnek
Yükleniyor
Veri Biçimi
Yapılandırma Seçenekleri
Yöntemler
Etkinlikler
Veri Politikası

Genel bakış

Tarayıcıda SVG veya VML kullanılarak oluşturulan, kadranılı gösterge.

Örnek

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

function drawChart() {

var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

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

chart.draw(data, options);

setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }

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

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Label', 'Value'],
          ['Memory', 80],
          ['CPU', 55],
          ['Network', 68]
        ]);

        var options = {
          width: 400, height: 120,
          redFrom: 90, redTo: 100,
          yellowFrom:75, yellowTo: 90,
          minorTicks: 5
        };

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

        chart.draw(data, options);

        setInterval(function() {
          data.setValue(0, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 13000);
        setInterval(function() {
          data.setValue(1, 1, 40 + Math.round(60 * Math.random()));
          chart.draw(data, options);
        }, 5000);
        setInterval(function() {
          data.setValue(2, 1, 60 + Math.round(20 * Math.random()));
          chart.draw(data, options);
        }, 26000);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 120px;"></div>
  </body>
</html>

Şu anda, diğer Google Grafiklerinde olduğu gibi, gösterge grafiğin başlığını belirtmenin bir yolu yoktur. Yukarıdaki örnekte, başlığı görüntülemek için basit HTML kullanılmıştır.

Ayrıca, diğer birçok Google Çizelgesi için sunulan animation.startup seçeneği Gösterge Grafik'te kullanılamaz. Başlangıç animasyonu isterseniz grafiği başlangıçta sıfıra ayarlanmış değerlerle çizin, ardından animasyonunu istediğiniz değerle tekrar çizin.

Yükleniyor

google.charts.load paketinin adı: "gauge".

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

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

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

Veri Biçimi

Her sayısal değer gösterge olarak görüntülenir. İki alternatif veri biçimi desteklenir:

İki sütun. İlk sütun bir dize olmalı ve gösterge etiketini içermelidir. İkinci sütun bir sayı olmalı ve gösterge değerini içermelidir.
Herhangi bir sayıda sayısal sütun. Her göstergenin etiketi, sütunun etiketidir.

Yapılandırma Seçenekleri

Ad
animation.duration	Animasyonun süresi (milisaniye cinsinden). Ayrıntılar için animasyon dokümanlarına bakın. Tür: numara Varsayılan: 400
animation.easing	Animasyona uygulanan yumuşak geçiş işlevi. Aşağıdaki seçenekler kullanılabilir: "doğrusal" - Sabit hız. 'in' - Yavaş gir - Yavaşça başlayıp hızlan. 'out' - Yumuşak çıkış - Hızlı başlayın ve yavaşlayın. 'inAndOut' - Yumuşak giriş ve çıkış - Yavaş başlayın, hızla başlayın, daha sonra yavaşlayın. Tür: dize Varsayılan: 'Doğrusal'
forceIFrame	Grafiği bir satır içi çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın. Tüm IE8 grafikleri, iç çerçeveler kullanılarak çizilir.) Tür: boole Varsayılan: false
greenColor	HTML renk gösteriminde, yeşil bölüm için kullanılacak renk. Tür: dize Varsayılan: '#109618'
greenFrom	Yeşil renkle işaretlenmiş bir aralığın en düşük değeri. Tür: numara Varsayılan: yok
greenTo	Yeşil renkle işaretlenmiş bir aralık için en yüksek değer. Tür: numara Varsayılan: yok
yükseklik	Grafiğin piksel cinsinden yüksekliği. Tür: numara Varsayılan: Kapsayıcının genişliği
majorTicks	Büyük onay işaretleri için etiketler. Etiket sayısı, tüm göstergelerdeki büyük değer çizgilerinin sayısını tanımlar. Varsayılan değer, minimum ve maksimum gösterge değerinin etiketlerine sahip beş büyük değer işaretidir. Tür: Dize dizisi Varsayılan: yok
maks.	Bir göstergenin maksimum değeri. Tür: numara Varsayılan: 100
dk	Bir göstergenin minimum değeri. Tür: numara Varsayılan: 0
minorTicks	Her bir önemli işaret bölümündeki küçük işaret bölümünün sayısı. Tür:sayı Varsayılan: 2
redColor	HTML renk gösteriminde, kırmızı bölüm için kullanılacak renk. Tür: dize Varsayılan: '#DC3912'
redFrom	Kırmızı renkle işaretlenmiş bir aralık için en düşük değerdir. Tür: numara Varsayılan: yok
redTo	Kırmızı renkle işaretlenmiş bir aralık için en yüksek değer. Tür: numara Varsayılan: yok
genişlik	Grafiğin piksel cinsinden genişliği. Tür: numara Varsayılan: Kapsayıcının genişliği
yellowColor	HTML renk gösteriminde, sarı bölüm için kullanılacak renk. Tür: dize Varsayılan: '#FF9900'
yellowFrom	Sarı renkle işaretlenmiş bir aralığın en düşük değeri. Tür: numara Varsayılan: yok
yellowTo	Sarı renkle işaretlenmiş bir aralık için en yüksek değer. Tür: numara Varsayılan: yok

Yöntemler

Yöntem
`draw(data, options)`	Grafiği çizer. Return Type (Dönüş Türü): yok
`clearChart()`	Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Return Type (Dönüş Türü): yok

Etkinlikler

Tetiklenen etkinlik yok.

Veri Politikası

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