Görselleştirme: Çizgi Grafik (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 bir çizgi grafik.

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

        chart.draw(data, {width: 400, height: 240, min: 0});
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 400px; height: 240px;"></div>
  </body>
</html>

Yükleniyor

google.charts.load paketinin adı: "imagelinechart". 

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

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

  var visualization = new google.visualization.ImageLineChart(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
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.
showAxisLines boolean true Yanlış değerine ayarlanırsa eksen çizgileri ve etiketleri kaldırılır.
showCategoryLabels boolean showAxisLines ile aynı Yanlış değerine ayarlanırsa kategorilerin etiketlerini (X ekseni etiketleri) kaldırır.
showValueLabels boolean showAxisLines ile aynı 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.