Takvim Grafiği

  1. Genel Bakış
  2. Basit bir örnek
  3. Gün
  4. Hafta
  5. Ay
  6. Yıllar
  7. Yükleniyor
  8. Veri Biçimi
  9. Yapılandırma Seçenekleri
  10. Yöntemler
  11. Etkinlikler
  12. Veri Politikası

Genel bakış

Not: JavaScript, sıfırdan başlayan ayları sayar: Ocak 0, Şubat 1 ve Aralık 11'dir. Takvim grafiğiniz bir aylığına yetersiz görünüyorsa nedeni budur.

Takvim grafiği, uzun bir süre (ör. ay veya yıl) boyunca etkinliği göstermek için kullanılan bir görselleştirmedir. Haftanın gününe veya zaman içindeki trendine bağlı olarak bazı miktarların nasıl değiştiğini göstermek istediğinizde en iyi sonucu verirler.

Takvim grafiği, gelecekteki Google Listeleri sürümlerinde önemli düzeltmeler yapıyor olabilir.

Takvim grafikleri, kullanıcının tarayıcısına uygun olan SVG veya VML kullanılarak tarayıcıda oluşturulur. Tüm Google grafikleri gibi takvim grafikleri de kullanıcı verilerin üzerine geldiğinde ipuçları gösterir. Kredinin son kullanım tarihi geldiğinde ise kredi: Takvim grafiğimiz D3 takvim görselleştirmesinden ilham almıştır.

Basit Bir Örnek

Bir spor takımına katılımın sezon boyunca nasıl değişiklik gösterdiğini göstermek istediğimizi varsayalım. Takvim grafikleriyle, parlaklığı kullanarak değerleri belirtebilir ve kullanıcıların trendleri bir bakışta görmelerini sağlayabiliriz:

Temel veri değerlerini görmek için fare imlecini tek tek günlerin üzerine getirin.

Takvim grafiği oluşturmak için calendar paketini yükleyin ve ardından biri tarihler için, diğeri değerler için olmak üzere iki sütun oluşturun. (Özelleştirilmiş bir stil için isteğe bağlı üçüncü sütun, daha sonraki bir Google Listeler sürümünde sunulacaktır.)

Ardından satırlarınızı aşağıda gösterildiği gibi tarih-değer çiftleriyle doldurun.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

Gün

Takvim grafiğindeki her kare bir günü temsil eder. Şu anda veri grafiklerinin rengi özelleştirilemiyor ancak Google Listeleri'nin bir sonraki sürümünde değişecek.

Veri değerlerinin tümü pozitifse renkler beyazdan maviye kadar değişir ve en derin değerler en yüksek değerleri belirtir. Negatif veri değerleri varsa aşağıda gösterildiği gibi turuncu renkte görünür.

Bu takvim kodu, ilke benzer. Satırlar aşağıdaki gibidir:

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

calendar.cellSize seçeneğini kullanarak günlerin boyutunu ("hücreler") değiştirebilirsiniz:

Burada calendar.cellSize sayısını 10 olarak değiştirip gün sayısını ve dolayısıyla grafiği bir bütün olarak daralttık. 

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

Veri değeri olmayan günler noDataPattern seçeneğiyle özelleştirilebilir:

Burada color, açık mavi ve backgroundColor biraz daha koyu bir gölgeye ayarlanmıştır: 

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

Hücre kenarlık rengini, kenarlık genişliğini ve opaklığı calendar.cellColor ile kontrol edebilirsiniz:

monthOutlineColor ürününden ayırt edilebilecek bir fırça rengi veya düşük opaklık seçerken dikkatli olmanız gerekir. Yukarıdaki grafik için seçenekler şunlardır: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

Yukarıdaki grafikte bir güne odaklanıyorsanız kenarlık kırmızıyla vurgulanır. Bu davranışı calendar.focusedCellColor seçeneklerle kontrol edebilirsiniz: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

Hafta

Varsayılan olarak, haftanın günleri Pazar ile Cumartesi arasındaki ilk harflerle etiketlenir. Günlerin sırasını değiştiremezsiniz ancak calendar.daysOfWeek seçeneğiyle hangi harflerin kullanılacağını değiştirebilirsiniz. Ayrıca, haftanın günleri ile grafik arasındaki dolguyu calendar.dayOfWeekRightSpace ile kontrol edebilir ve metin stilini calendar.dayOfWeekLabel ile özelleştirebilirsiniz:

Bu kuralda, hafta etiketlerinin yazı tipini değiştiriyor, etiketler ile grafik verileri arasına 10 piksellik bir dolgu yerleştiriyor ve Pazartesi günleri çalışmaya başlıyoruz. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

Ay

Aylar varsayılan olarak koyu gri çizgilerle gösterilir. Kenarlıkları kontrol etmek için calendar.monthOutlineColor, etiket yazı tipini özelleştirmek için calendar.monthLabel ve etiket dolgusunu ayarlamak için calendar.underMonthSpace seçeneklerini kullanabilirsiniz:

Etiket yazı tipini kalın kırmızı, 12 pt Times-Roman kalın italik değerine, ana hatları aynı renge ve 16 piksellik bir dolguya yerleştiriyoruz. Kullanılmayan ana hatlar aynı renk tonuyla daha soluk renkte ayarlanır. 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

Yıllar

Takvim grafiklerindeki yıllar her zaman grafiğin sol tarafındadır ve calendar.yearLabel ile calendar.underYearSpace arasında özelleştirilebilir:

Yıl yazı tipini koyu yeşil 32pt Times-Roman kalın italik olarak ayarlayıp yıl etiketleri ile grafiğin en altına on piksel ekledik: 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

Yükleniyor

google.charts.load paket adı "calendar": 

  google.charts.load("current", {packages: ["calendar"]});

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

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

Veri Biçimi

Satırlar: Tablodaki her satır bir tarihi temsil eder.

Sütunlar:

  Sütun 0 1. Sütun ... Sütun N (isteğe bağlı)
Amaç: Tarihler Değerler ... İsteğe bağlı roller
Veri Türü: tarih, tarih veya saat number (sayı) ...
Rol: alan veri ...
İsteğe bağlı sütun rolleri:

Yok

Yok

 ...

 

Yapılandırma Seçenekleri

Ad
calendar.cellColor

calendar.cellColor seçeneği, takvim günü karelerinin kenarlığını özelleştirmenize olanak tanır: 

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
Tür: nesne
Varsayılan: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

Takvim günü karelerinin boyutu:

var options = { calendar: { cellSize: 10 } };
Tür: Tam sayı
Varsayılan: 16
calendar.dayOfWeekEtiketi

Grafiğin üst kısmındaki hafta etiketlerinin yazı tipi stilini kontrol eder:

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
Tür: nesne
Varsayılan: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfHaftaSağAlanı

Haftanın etiketlerinin sağ kenarı ile grafik günü karelerinin sol kenarı arasındaki mesafe.

Tür: Tam sayı
Varsayılan: 4
calendar.daysOfWeek

Pazar ile Cumartesi arasında kullanılacak tek harfli etiketler.

Tür: dize
Varsayılan: 'SMTWTFS'
calendar.OdaklıHücreselRenk

Kullanıcı bir kare kareye odaklandığında (örneğin, fareyle üzerine gelerek) takvim grafikleri kareyi vurgular. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Tür: nesne
Varsayılan: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthEtiketi

Ay etiketleri için stil, ör.

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
Tür: nesne
Varsayılan: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

Veri değerlerine sahip olan aylar, bu stilde kenarlık kullanılarak diğerlarından ayrılır.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Ayrıca bkz. calendar.unusedMonthOutlineColor.)
Tür: nesne
Varsayılan: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.altMonthSpace

Ayın en altında ve günün en üstünde bulunan kare sayısı: 

var options = { calendar: { underMonthSpace: 12 } };
Tür: Tam sayı
Varsayılan: 6
calendar.altYılAlan

En alttaki yıl etiketi ile grafiğin en altındaki piksel sayısı:

var options = { calendar: { underYearSpace: 2 } };
Tür: Tam sayı
Varsayılan: 0
calendar.unusedMonthOutlineColor

Veri değerleri olmayan aylar, bu stilde kenarlık kullanan diğer oyunculardan ayrılır. 

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Ayrıca bkz. calendar.monthOutlineColor.)
Tür: nesne
Varsayılan: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
Renk Ekseni

Renk sütunu değerleri ve renkler arasında eşleme ya da gradyan ölçeği kullanarak belirtilen bir nesne. Bu nesnenin özelliklerini belirtmek için aşağıda gösterildiği gibi nesne değişmez gösterimini kullanabilirsiniz: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Tür: nesne
Varsayılan: null
renkEkseni.renkler

Görselleştirmedeki değerlere atanacak renkler. Her bir öğenin HTML renk dizesi olduğu bir dize dizisi. Örneğin: colorAxis: {colors:['red','#004411']}. Gradyan en az iki değere sahip olmalıdır. Gradyan tüm değerlerinizi ve hesaplanan aracı değerlerini (en küçük değer ilk renk, son renk en yüksek değer içerir) içerir.

Tür: Renk dizeleri dizisi
Varsayılan: null
colorAxis.maxValue

Varsa grafik rengi verileri için maksimum değeri belirtir. Bu değer ve daha yüksek değerdeki renk verisi değerleri, colorAxis.colors aralığındaki son renk olarak oluşturulur.

Tür: sayı
Varsayılan: Grafik verilerinde maksimum renk sütunu değeri
colorAxis.minValue

Varsa grafik rengi verileri için minimum bir değer belirtir. Bu değer ve daha düşük değerdeki renk verisi değerleri, colorAxis.colors aralığındaki ilk renk olarak oluşturulur.

Tür: sayı
Varsayılan: Grafik verilerindeki minimum renk sütunu değeri
colorAxis.values

Varsa değerlerin renklerle nasıl ilişkilendirilebileceğini kontrol eder. Her değer, colorAxis.colors dizisinde karşılık gelen renkle ilişkilendirilir. Bu değerler grafik rengi veriler için geçerlidir. Boyama, burada belirtilen değerlerin gradyanına göre yapılır. Bu seçenek için bir değer belirtilmemişse [minValue, maxValue] değeri belirtilebilir.

Tür: sayı dizisi
Varsayılan: null
Zorunlu iFrame

Grafiği satır içi bir çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın; tüm IE8 grafikleri i-frame'ler ile çizilmiştir.)

Tür: boole
Varsayılan: false
yükseklik

Grafiğin piksel cinsinden yüksekliği.

Tür: sayı
Varsayılan: kapsayıcı öğenin yüksekliği
Veri Kalıbı Yok

Takvim grafikleri belirli bir güne ait veri olmadığını belirtmek için çizgili çapraz çizgi deseni kullanır. Gri tonlardaki varsayılan ayarları geçersiz kılmak için noDataPattern.backgroundColor ve noDataPattern.color seçeneklerini kullanın. Örneğin: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Tür: nesne
Varsayılan: null
ipucu.ishtml

SVG ile oluşturulan (HTML tarafından oluşturulan yerine) ipuçlarını kullanmak için false olarak ayarlayın. Daha fazla ayrıntı için İpucu İçeriğini Özelleştirme bölümüne bakın.

Not: HTML araç ipucu içeriğinin ipuçu sütunu veri rolü aracılığıyla özelleştirilmesi, Pasta Grafik ve Balon Listesi görselleştirmeleri tarafından desteklenmez.

Tür: boole
Varsayılan: true
genişlik

Grafiğin piksel cinsinden genişliği.

Tür: sayı
Varsayılan: kapsayıcı öğenin genişliği

Yöntemler

Yöntem
draw(data, options)

Grafiği çizer. Grafik, yalnızca readyetkinliği tetiklendikten sonra gerçekleştirilen diğer yöntem çağrılarını kabul eder. Extended description dokunun.

Dönüş Türü: yok
getBoundingBox(id)

id grafik öğesinin sol, üst, genişlik ve yüksekliğini içeren bir nesne döndürür. id biçimi henüz belgelenmemiş (etkinlik işleyicilerin döndürme değerleridir), ancak bazı örnekler aşağıda verilmiştir:

var cli = chart.getChartLayoutInterface();

Grafik alanının yüksekliği
cli.getBoundingBox('chartarea').height
Çubuk veya sütun grafiğin ilk serisindeki üçüncü çubuğun genişliği
cli.getBoundingBox('bar#0#2').width
Pasta grafiğin beşinci takozunun sınırlayıcı kutusu
cli.getBoundingBox('slice#4')
Dikey (ör. sütun) grafiğin grafik verilerindeki sınır kutusu:
cli.getBoundingBox('vAxis#0#gridline')
Yatay (ör. çubuk) grafiğin veri grafiklerinin sınırlayıcı kutusu:
cli.getBoundingBox('hAxis#0#gridline')

Değerler, grafiğin kapsayıcısıyla ilgilidir. Bunu, grafik çizildikten sonra çağırın.

Dönüş Türü: nesne
getSelection()

Seçilen grafik varlıklarından oluşan bir diziyi döndürür. Seçilebilir öğeler çubuklar, açıklama girişi ve kategorilerdir. Çubuk, veri tablosundaki bir hücreye, bir sütun için açıklama girişine (satır dizini null) ve bir satıra ait bir kategoriye (sütun dizini null) karşılık gelir. Bu grafik için herhangi bir zamanda yalnızca bir varlık seçilebilir. Extended description .

Dönüş Türü: Seçim öğeleri dizisi
setSelection()

Belirtilen grafik öğelerini seçer. Önceki seçimleri iptal eder. Seçilebilir öğeler çubuklar, açıklama girişi ve kategorilerdir. Çubuk, veri tablosundaki bir hücreye, bir sütun için açıklama girişine (satır dizini null) ve bir satıra ait bir kategoriye (sütun dizini null) karşılık gelir. Bu grafik için tek seferde yalnızca bir öğe seçilebilir. Extended description .

Dönüş Türü: yok
clearChart()

Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır.

Dönüş Türü: yok

Etkinlikler

Ad
error

Grafik oluşturulmaya çalışılırken bir hata oluştuğunda tetiklenir.

Özellikler: kimlik, mesaj
onmouseover

Kullanıcı görsel bir varlığın üzerine geldiğinde tetiklenir. Varlığın satır dizinini ve tarih değerini geri döndürür. Varlık için veri tablosu öğesi yoksa satır dizini için döndürülen değer undefined olur.

Özellikler: satır, tarih
onmouseout

Kullanıcı görsel varlıktan fareyi uzaklaştırdığında tetiklenir. Varlığın satır dizinini ve tarih değerini geri döndürür. Varlık için veri tablosu öğesi yoksa satır dizini için döndürülen değer undefined olur.

Özellikler satırı, tarih
ready

Grafik, harici yöntem çağrıları için hazır. Grafik ve çizim yöntemlerinden sonra etkileşimde bulunmak isterseniz draw yöntemini çağırmadan önce bu etkinlik için bir dinleyici oluşturmanız ve bunları yalnızca etkinlik tetiklendikten sonra kullanmanız gerekir.

Özellikler: yok
select

Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Nelerin seçildiğini öğrenmek için getSelection() numaralı telefonu arayın.

Özellikler: yok

Veri Politikası

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