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

Kullanımdan kaldırıldı

Bu görselleştirmenin yerini yeni sürüm aldı. Lütfen bu sürümü kullanın. Kolay taşıma 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 yatay çubuk grafik. Noktalar tıklandığında ipuçlarını gösterir. Açıklamaları tıklarken çizgileri canlandırır. Bu grafiğin dikey bir sürümü için Sütun Grafiği'ne bakın.

Oluşturan: Google

Örnek

Görselleştirme Oyun Alanı'nda kodu 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:["barchart"]});
      google.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.BarChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Company Performance'});
      }
    </script>
  </head>

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

Yükleniyor

google.load paket adı "barchart" 

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

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

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

Veri Biçimi

Tablodaki her satır, komşu grupları temsil eder.

Tablodaki ilk sütun bir dize olmalıdır ve bu çubuk grubunun etiketini temsil eder. Daha sonra istenilen sayıda sütun gelebilir. Bunların her biri sayısal olmakla birlikte, her grupta aynı renk ve göreli konuma sahip çubukları temsil eder.

Belirli bir satır ve sütundaki değer, bu satır ve sütunun temsil ettiği tek çubuğun yüksekliğini denetler.

Yapılandırma Seçenekleri

Ad Tür Varsayılan Açıklama
eksen rengi dize veya Nesne varsayılan renk Eksenin rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
eksenArka Rengi dize veya Nesne varsayılan renk Eksen arka planının etrafındaki kenarlık. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
ekseniYazıBoyutu number (sayı) otomatik Grafik ekseni metninin piksel cinsinden yazı tipi boyutu.
arka plan Rengi dize veya Nesne varsayılan renk Grafiğin ana alanının arka plan rengi. Aşağıdakilerden biri olabilir:
  • HTML tarafından desteklenen, 'kırmızı' veya '#00cc00' gibi bir dize
  • stroke fill ve strokeSize özelliklerine sahip bir nesne. stroke ve fill, renkli bir dize olmalıdır. strokeSize bir sayıdır. Örneğin: {backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}. Yalnızca dolguyla, çizgi olmadan kullanmak için stroke:null, strokeSize: 0 kullanın.
kenarlık rengi dize veya Nesne varsayılan renk Grafik öğelerinin çevresindeki 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 HTML renklerinden oluşan dizidir. Örnek: renkler:['#00FF00','orange']
  • Bu is3D=true ise bir HTML renkleri veya bu türden nesnelerden oluşan bir dizidir: {color:face_color, darker:shade_color}. Burada color, öğenin yüz rengidir ve darker gölge rengidir. Ancak 3D bir nesne için bir HTML rengi belirtirseniz yüz ve gölge aynı renk olur ve 3D efekti azalır. Örnek: {is3D:true, colors:[{color:'#FF0000', darker:'#680000'}, {color:'cyan', darker:'deepskyblue'}]}
araç ipucunu etkinleştir boolean true Doğru değerine ayarlanırsa kullanıcı bir çubuğu tıkladığında araç ipuçları gösterilir.
odakBorderColor dize veya Nesne varsayılan renk Odaklanılan (fare tarafından işaret edilen) grafik öğelerinin etrafındaki kenarlık. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
yükseklik number (sayı) Kapsayıcının yüksekliği Grafiğin piksel cinsinden yüksekliği.
3D boolean yanlış Doğru değerine ayarlanırsa üç boyutlu değişiklik gösterir.
Yığınlı boolean yanlış Doğru değerine ayarlanırsa satır değerleri yığınlı (birleştirilmiş) olur.
açıklama string "sağ" Açıklamaların konumu ve türü. Aşağıdakilerden biri olabilir:
  • "sağ" - Grafiğin sağ tarafında.
  • "left" (sol) - Grafiğin solunda.
  • "top" (üst) - Grafiğin üzerinde.
  • "bottom" - Grafiğin altında.
  • "none" - Açıklama yok.
arka plan rengi dize veya Nesne varsayılan renk Grafiğin açıklama bölümünün arka plan rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
açıklamaYazıBoyutu number (sayı) otomatik Açıklamalar yazı tipinin piksel cinsinden boyutu.
açıklama MetniRenkleri dize veya Nesne varsayılan renk Açıklama metni rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
logScale boolean yanlış Doğru ise ana eksen logaritmik olarak ölçeklenmelidir.
maks. number (sayı) otomatik En yüksek Y eksenindeki ızgara çizgisini belirtir. Gerçek ızgara çizgisi, iki değerden büyük olur: maksimum seçenek değeri veya sonraki en yüksek ızgara işaretine yuvarlanan en yüksek veri değeri.
dak number (sayı) otomatik En düşük Y eksenindeki ızgara çizgisini belirtir. Gerçek ızgara çizgisi, iki değerden daha düşük olanı oluşturur. Min. seçenek değeri veya en düşük veri değeri, sonraki alt ızgara işaretine yuvarlanır.
Ters Eksen boolean true Doğru değerine ayarlanırsa (varsayılan), kategorileri yukarıdan aşağı çizer. Yanlış değerine ayarlanırsa çubukları alttan çizer.
kategorileri göster boolean true Doğruysa kategori etiketleri gösterilir. Yanlış değerine ayarlanırsa yanlış.
başlık string başlık yok Grafiğin üzerinde görüntülenecek metin.
başlıkX string başlık yok Yatay eksenin altında görüntülenecek metin.
başlıkY string başlık yok Dikey eksene göre görüntülenecek metin.
başlık Rengi dize veya Nesne varsayılan renk Grafik başlığının rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
başlıkYazı Boyutu number (sayı) otomatik Grafik başlığı için piksel cinsinden yazı tipi boyutu.

TipFontSizeSize		 number (sayı) 11 İpucu metninin yazı tipi boyutu. İpucu, metni belirtilen yazı tipinde tutamayacak kadar küçükse bu değer azaltılabilir.
İpucu
 number (sayı) 60 İpucunun piksel cinsinden yüksekliği. İpucu yüksekliği sabittir. Metnin uzunluğuna veya yazı tipi boyutuna sığacak şekilde hiçbir zaman büyümez veya küçülmez. Ancak grafik yüksekliğinin 1/3'ünden daha fazlası kırpılır.
İpucu Genişliği number (sayı) 120 İpucunun piksel cinsinden genişliği. İpucu genişliği sabittir. Metnin uzunluğuna veya yazı tipi boyutuna sığacak şekilde hiçbir zaman büyümez veya küçülmez. Ancak grafik genişliğinden büyük olan her şey kırpılır.
genişlik number (sayı) Kapsayıcının 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 öğesi dizisi Standart getSelection() uygulaması. Seçilen öğeler sütun ve hücre öğeleridir. Kullanıcı aynı anda yalnızca bir sütun veya hücre seçebilir.
setSelection() yok Standart setSelection() uygulaması, ancak yalnızca bir öğenin seçimini destekler. Her seçim girişini sütun veya hücre seçimi olarak ele alır. Etiket sütununun seçilemeyeceğini unutmayın.

Etkinlikler

Ad Açıklama Özellikler
onmouseover Kullanıcı fare imlecini bir çubuğun üzerine getirdiğinde ve ilgili hücrenin satır ve sütun dizinlerinden geçtiğinde tetiklenir. satır, sütun
onmouseout Kullanıcı bir çubuktan ayrılıp ilgili hücrenin satır ve sütun dizinlerine geçtiğinde tetiklenir. satır, sütun
ready Grafik, harici yöntem çağrıları için hazır. Çizdikten sonra grafik ve arama yöntemleriyle etkileşimde bulunmak isterseniz 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 çubuğu veya göstergeyi tıkladığında tetiklenir. Bir çubuk seçildiğinde, veri tablosundaki ilgili hücre seçilir; bir açıklama seçildiğinde veri tablosundaki ilgili sütun seçilir. Nelerin seçildiğini öğrenmek için getSelection() numaralı telefonu arayın. Yok

Veri Politikası

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