Görselleştirme: Alan Grafiği (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 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 paketinin 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ğlayarak çizginin altındaki alanı doldurur.

Veriler, sıfırdan başlayarak sütuna göre işlenir. Önce en yüksek satırları, sonra alt çizgileri yazmalısınız. Çünkü önce alt çizgiyi boyadıysanız daha yüksek bir çizgi boyanır ve alt çizgileri gizler. Bu nedenle, 1. sütunun 2. sütundan daha yüksek noktalara, 2. sütunun 3. sütundan daha yüksek noktalara sahip olmasını sağlamaya çalışın. Sağ bir sütunda sol sütuna göre bir veya iki nokta daha yüksekse alt çizginin üzerini kısmen örtebilir ancak yine de görünür olmalıdır.

İlki dışındaki tüm veriler sayısal türde olmalıdır (sayısal veya dize olabilir). İlk sütun dize türündeyse ilk sütun girişleri X üzerinde etiketler olarak görüntülenir. İlk sütun bir sayıysa X ekseni etiketi gösterilmez. (İlk sütun hariç) tüm sütunlar sayı olmalıdır. Sütun sayısı için bir sınır yoktur.

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.
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 (X ekseni etiketleri) kaldırır.
showValueLabels boolean true Yanlış değerine ayarlanırsa değerlerin etiketlerini (Y ekseni etiketleri) 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.