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

Görselleştirme: Sütun 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.

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

Genel bakış

SVG veya VML kullanılarak tarayıcıda oluşturulan dikey çubuk grafik. Noktalar tıklandığında ipuçlarını görüntüler. Açıklama girişleri tıklandığında satırları canlandırıyor. Bu grafiğin yatay bir sürümü için Çubuk Grafiği bölümüne bakın.

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:["columnchart"]});
      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.ColumnChart(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 paketinin adı: "columnchart"

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

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

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

Veri Biçimi

Tablodaki her satır, bitişik çubuklardan oluşan bir grubu temsil eder.

Tablodaki ilk sütun bir dize olmalıdır ve bu çubuk grubunun etiketini temsil eder. Ardından, her biri aynı renge ve her grupta göreli konuma sahip çubukları temsil eden, tamamı sayısal olmak üzere istenilen sayıda sütun gelebilir.

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

Yapılandırma Seçenekleri

Ad	Tür	Varsayılan	Açıklama
axisColor	dize veya Nesne	varsayılan renk	Eksenin rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
axisBackgroundColor	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.
axisFontSize	sayı	otomatik	Grafik ekseni metninin piksel cinsinden yazı tipi boyutu.
backgroundColor	dize veya Nesne	varsayılan renk	Grafiğin ana alanı için arka plan rengi. Aşağıdaki seçeneklerden biri olabilir: "Kırmızı" veya "#00cc00" gibi, HTML tarafından desteklenen renklere sahip bir dize `stroke` `fill` ve `strokeSize` özelliklerine sahip bir nesne. `stroke` ve `fill`, renkli bir dize olmalıdır. stepSize bir sayıdır. Örnek: `{backgroundColor: {stroke:'black', fill:'#eee', strokeSize: 1}`. Çizgi olmadan yalnızca doldur özelliğini kullanmak için `stroke:null, strokeSize: 0` işlevini kullanın.
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 sütunu 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 değişiklik gösterir.
isStacked	boolean	false	Doğru değerine ayarlanırsa satır değerleri yığılır (toplanmış).
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.
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	Açıklamaların metin girişlerinin rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
logScale	boolean	false	Doğru ise ana eksen logaritmik olarak ölçeklendirilmelidir.
maks.	sayı	otomatik	En yüksek Y ekseni ızgara çizgisini belirtir. Gerçek kılavuz çizgisi, iki değerden büyük olanı olur: maksimum seçenek değeri veya en yüksek veri değeri (bir sonraki üst ızgara işaretine yuvarlanır).
dk	sayı	otomatik	En alt Y ekseni ızgara çizgisini belirtir. Gerçek kılavuz çizgisi, iki değerin alt kısmı olur: minimum seçenek değeri veya en düşük veri değeri (bir sonraki alt ızgara işaretine yuvarlanır).
reverseAxis	boolean	false	Doğru değerine ayarlanırsa kategoriler sağdan sola doğru çizilir. Varsayılan olarak soldan sağa doğru çizim yapılır.
showCategories	boolean	true	Değer true ise kategori etiketleri gösterilir. Yanlış ise girmez.
title	dize	başlık yok	Grafiğin üzerinde gösterilecek metin.
titleX	dize	başlık yok	Yatay eksenin altında görüntülenecek metin.
titleY	dize	başlık yok	Dikey eksenle 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 sütun ve hücre öğeleri. Kullanıcı tarafından aynı anda yalnızca bir sütun veya hücre seçilebilir.
`setSelection()`	yok	Standart `setSelection()` uygulamasıdır ancak yalnızca bir öğenin seçilmesini 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ı fareyle bir çubuğun üzerine geldiğinde tetiklenir ve ilgili hücrenin satır ve sütun dizinlerinden geçer.	satır, sütun
`onmouseout`	Kullanıcı fareyi bir çubuktan 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 çubuğu veya açıklamayı tıkladığında tetiklenir. Bir çubuk seçildiğinde veri tablosunda karşılık gelen hücre seçilir. Gösterge seçildiğinde, veri tablosundaki ilgili sütun seçilir. Neyin seçildiğini öğrenmek için `getSelection()` numaralı telefonu arayın.	Yok

Veri Politikası

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

Görselleştirme: Sütun Grafik (Eski Sürüm) Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.