Görselleştirme: Gösterge

  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 kadranlı gösterge.

Ö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':['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 Listeleri için olduğu gibi bir gösterge grafiğinin başlığını belirtmek mümkün değildir. Yukarıdaki örnekte, başlığı görüntülemek için basit HTML kullanılır.

Ayrıca, diğer birçok Google Grafikte kullanılabilen animation.startup seçeneği Gösterge Tablosu için kullanılamaz. Başlangıç animasyonu kullanmak isterseniz başlangıçta grafiği sıfır değerine ayarlanmış olarak çizin, ardından canlandırmasını istediğiniz değerle tekrar çizin.

Yükleniyor

google.charts.load paket 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 bir gösterge olarak gösterilir. İki alternatif veri biçimi desteklenir:

  1. İ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.
  2. İstediğiniz sayıda sayısal sütun. Her bir göstergenin etiketi, sütunun etiketidir.

Yapılandırma Seçenekleri

Ad
animasyon.süre

Animasyonun milisaniye cinsinden süresi. Ayrıntılar için animasyon dokümanlarına bakın.

Tür: sayı
Varsayılan: 400
animasyon.yumuşak geçiş

Animasyona uygulanan yumuşak geçiş işlevi. Aşağıdaki seçenekler kullanılabilir:

  • "linear" - Sabit hız.
  • 'in' - Yavaş girin - Yavaş başlayın ve hızınızı artırın.
  • "out" (Çıkış) - Yavaşlatma - Hızlı başlatma ve yavaşlatma.
  • 'inAndOut' - Kolayca giriş ve çıkış - Yavaşlayın, hızlandırın ve ardından yavaşlatın.
Tür: dize
Varsayılan: "doğrusal"
Zorunlu iFrame

Grafiği satır içi bir çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın; tüm IE8 grafikleri i-frame'ler ile çizilmiştir.)

Tür: boole
Varsayılan: false
yeşilRenk

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şaretlenen bir aralığın en düşük değeri.

Tür: sayı
Varsayılan: yok
yeşil

Yeşil bir renkle işaretlenen aralığın en yüksek değeri.

Tür: sayı
Varsayılan: yok
yükseklik

Grafiğin piksel cinsinden yüksekliği.

Tür: sayı
Varsayılan: Kapsayıcının genişliği
Ticktici'ler

Büyük onay işaretleri için etiketler. Etiket sayısı, tüm göstergelerdeki büyük kenelerin sayısını tanımlar. Varsayılan değer, beş minimum değerdir. Minimum ve maksimum gösterge değerleri kullanılır.

Tür: Dize dizisi
Varsayılan: yok
maks.

Bir göstergenin maksimum değeri.

Tür: sayı
Varsayılan: 100
dak

Bir göstergenin minimum değeri.

Tür: sayı
Varsayılan: 0
küçük punto

Her büyük tik atma bölümündeki küçük işaret bölümünün sayısı.

Tür:number
Varsayılan: 2
kırmızırenk

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şaretlenen bir aralığın en düşük değeri.

Tür: sayı
Varsayılan: yok
redTo

Kırmızı renkle işaretlenen bir aralığın en yüksek değeri.

Tür: sayı
Varsayılan: yok
genişlik

Grafiğin piksel cinsinden genişliği.

Tür: sayı
Varsayılan: Kapsayıcının genişliği
sarıRenk

HTML renk gösteriminde sarı bölüm için kullanılacak renk.

Tür: dize
Varsayılan: "#FF9900"
sarından

Sarı renkle işaretlenen bir aralığın en düşük değeri.

Tür: sayı
Varsayılan: yok
sarıTo

Sarı renkle işaretlenen bir aralık için en yüksek değer.

Tür: sayı
Varsayılan: yok

Yöntemler

Yöntem
draw(data, options)

Grafiği çizer.

Dönüş Türü: yok
clearChart()

Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır.

Dönüş Türü: yok

Etkinlikler

Tetiklenen etkinlik yok.

Veri Politikası

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