Görselleştirme: Alan Grafiği (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ış

SVG veya VML kullanılarak tarayıcı içinde oluşturulan alan grafiği. Noktalar tıklandığında ipuçlarını görüntüler. Açıklama girişleri tıklandığında satırları canlandırıyor.

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:["areachart"]});
      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.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
      }
    </script>
  </head>

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

Yükleniyor

google.load paketinin adı: "areachart".

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

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

  var visualization = new google.visualization.AreaChart(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 ayrı bir çizgi olarak görüntülenir.

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 dizisi Varsayılan renkler Grafik öğeleri için kullanılacak renkler. Dize dizisi. Her öğe, "kırmızı" veya "#00cc00" gibi HTML tarafından desteklenen bir renk olan bir dizedir.
enableTooltip boolean true Doğru değerine ayarlanırsa kullanıcı bir veri noktasını 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.
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 Gösterge metin rengi. Olası değerler, backgroundColor yapılandırma seçeneğindeki değerlerdir.
lineSize sayı 2 Piksel cinsinden çizgi genişliği. Tüm çizgileri gizlemek ve yalnızca noktaları göstermek için sıfırı kullanın.
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, sonraki alt ızgara işaretine yuvarlanır.
pointSize sayı 3 Görüntülenen noktaların piksel cinsinden boyutu. Tüm noktaları gizlemek için sıfırı kullanın.
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 daha 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 öğeleridir. Kullanıcı tarafından tek seferde yalnızca bir sütun veya hücre seçilebilir.
setSelection() yok Standart setSelection() uygulaması 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 noktanın ü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 noktadan 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 noktayı veya açıklamayı tıkladığında tetiklenir. Bir nokta seçildiğinde veri tablosunda karşılık gelen hücre seçilir. Açıklama seçildiğinde ise 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.