Görselleştirme: Çubuk 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 çubuk 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:["imagebarchart"]});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

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

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Yükleniyor

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

  google.charts.load("current", {packages: [[]"imagebarchart"]});

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

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

Veri Biçimi

İlk sütun bir dize olmalı ve kategori etiketini içermelidir. Ardından, her biri sayısal olmak kaydıyla, istenilen sayıda sütun gelebilir. Her sütun bir çubuk grubu olarak görüntülenir. Veri tablosu birden fazla sayısal sütun içerdiğinde bir satırdaki değerler yığın çubuklar olarak gösterilir.

Yapılandırma Seçenekleri

Ad Tür Varsayılan Açıklama
backgroundColor dize "#FFFFFF" (beyaz) Grafik için Grafik API'si renk biçimindeki arka plan rengi.
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.
isStacked boolean true Birden fazla veri sütununun yığınlı (gruplandırılmış yerine) çubuklar olarak görüntülenip görüntülenmeyeceğini kontrol eder.
isVertical boolean false Çubukların dikey olup olmayacağını kontrol eder.
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.
  • "none" (hiçbiri) - Açıklama gösterilmez.
maks. sayı otomatik Y ekseninde gösterilecek maksimum değer.
dk sayı otomatik Y ekseninde gösterilecek minimum değer.
showCategoryLabels boolean true Yanlış değerine ayarlanırsa kategorilerin etiketlerini kaldırır.
showValueLabels boolean true Yanlış değerine ayarlanırsa değerlerin etiketlerini kaldırır.
title dize başlık yok Grafiğin üzerinde gösterilecek metin.
valueLabelsInterval sayı Otomatik Değer ekseni etiketlerinin gösterileceği aralık. Örneğin, min değeri 0, max 100 ve valueLabelsInterval değeri 20 ise grafik, eksen etiketlerini (0, 20, 40, 60, 80 100) konumunda gösterir.
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.