Görselleştirme: Alan Grafiği (Resim)

Önemli: Google Grafik Araçları'nın Resim Listeleri bölümü, 20 Nisan 2012'den itibaren resmi olarak kullanımdan kaldırılmıştır. 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 Sitemaps API ile resim olarak oluşturulan alan grafiği.

Ö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:["imageareachart"]});
      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.ImageAreaChart(document.getElementById('chart_div'));

        chart.draw(data, {width: 400, height: 240, min: 300, max: 1400, title: 'Yearly Expenses and Sales'});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Yükleniyor

google.charts.load paket adı "imageareachart" 

  google.charts.load('current', {packages: ['imageareachart']});

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

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

Veri Biçimi

Her sütun grafikteki bir çizgiyi temsil eder; her giriş aynı X ekseni noktasındaki Y ekseni değeridir ve görselleştirme, bunları düz bir çizgiyle bağladıktan sonra çizginin altındaki alanı doldurur.

Veriler, sıfırdan başlayarak artmaya devam eden sütuna göre işlenir. Önce en yüksek satırları, ardından da alt satırları yazmanız gerekir. Çünkü önce bir alt çizgi boyadıysanız daha yüksek bir çizgi boyanarak alt çizgileri gizler. Bu nedenle, 1. sütunun 2. sütundan daha yüksek, 2. sütunun ise 3. sütundan daha yüksek olmasını sağlamaya çalışın. Bir sağ sütunda, sol sütundan bir veya iki nokta daha yüksekse alt çizgiyi kısmen gizleyebilir ancak yine de görünür olmalıdır.

Birincisi hariç tüm veriler sayısal tür olmalıdır. Bunlar sayısal veya dize olabilir. İlk sütun bir dize türüyse ilk sütun girişleri X'te etiketler olarak görüntülenir; ilk sütun bir sayıysa X ekseni etiketleri gösterilmez. Tüm sütunlar (ilk sütun hariç) sayı olmalıdır. Sütun sayısında bir sınırlama yoktur.

Yapılandırma Seçenekleri

Ad Tür Varsayılan Açıklama
arka plan rengi string "#FFFFFF" (beyaz) Chart API'sı renk biçimindeki grafiğin arka plan rengi.
renkler Dizi<string> Otomatik Her bir veri dizisine belirli renkler atamak için bunu kullanın. Renkler, Chart API'sı renk biçiminde belirtilir. Renk i, veri sütunu i için kullanılır ve renklerden daha fazla veri sütunu varsa başa gelir. Tüm seriler için tek bir renk varyasyonları kabul ediliyorsa bunun yerine color seçeneğini kullanın.
Etkinlikleri etkinleştir boolean yanlış Grafiklerin, tıklama veya fareyle üzerine gelme gibi kullanıcı tarafından tetiklenen etkinlikleri atlamasına neden olur. Yalnızca belirli grafik türleri için desteklenir. Aşağıdaki Etkinlikler'e göz atın.
yükseklik number (sayı) Kapsayıcının yüksekliği Grafiğin piksel cinsinden yüksekliği.
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.
maks. number (sayı) otomatik Y ekseninde gösterilecek maksimum değer.
dak number (sayı) otomatik Y ekseninde gösterilecek minimum değer.
KategoriKategorilerini boolean true Yanlış değerine ayarlanırsa kategorilerin etiketlerini (X ekseni etiketleri) kaldırır.
program_değeri boolean true Yanlış değerine ayarlanırsa değerlerin (Y ekseni etiketleri) etiketleri kaldırılır.
başlık string başlık yok Grafiğin üzerinde görüntülenecek metin.
değerEtiketi Aralığı number (sayı) Otomatik Değer ekseni etiketlerinin gösterileceği aralık. Örneğin, min 0, max 100 ve valueLabelsInterval 20 ise grafikte (0, 20, 40, 60, 80 100) eksen etiketleri gösterilir.
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.

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.