Genel bakış
Not: JavaScript, ayları sıfır'dan itibaren sayar: Ocak 0, Şubat 1 ve Aralık 11'dir. Takvim grafiğiniz bir ay yanlış görünüyorsa nedeni budur.
Takvim grafiği, aylar veya yıllar gibi uzun bir zaman aralığındaki etkinlikleri göstermek için kullanılan bir görselleştirmedir. Belirli bir miktarın haftanın gününe göre nasıl değiştiğini veya zaman içinde nasıl bir eğilim gösterdiğini göstermek istediğinizde kullanmanız daha uygun olur.
Takvim grafiği, gelecekteki Google Grafikler sürümlerinde önemli değişiklikler yapıyor olabilir.
Takvim grafikleri, kullanıcının tarayıcısı için uygun olan SVG veya VML kullanılarak tarayıcıda oluşturulur. Tüm Google grafiklerinde olduğu gibi takvim grafiklerinde de kullanıcılar verilerin üzerine geldiğinde ipuçları görüntülenir. Kredinin verilmesi gereken kredi: Takvim grafiğimizde, D3 takvim görselleştirmesinden esinlenildi.
Basit Bir Örnek
Bir spor takımının katılımlarının sezon boyunca nasıl değiştiğini göstermek istediğimizi varsayalım. Takvim grafiğinde, değerleri belirtmek ve kullanıcıların trendleri bir bakışta görmesini sağlamak için parlaklığı kullanabiliriz:
Temel veri değerlerini görmek için fareyi tek tek günlerin üzerine getirebilirsiniz.
Takvim grafiği oluşturmak için calendar paketini yükleyin, ardından biri tarihler, diğeri değerler için olmak üzere iki sütun oluşturun. (Özelleştirilmiş stil için isteğe bağlı üçüncü bir sütun, gelecekteki bir Google Charts sürümünde kullanıma sunulacaktır.)
Daha sonra, 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 hücrelerinin rengi özelleştirilememektedir, ancak Google Grafikler'in bir sonraki sürümünde bu durum değişecektir.
Veri değerlerinin tümü pozitifse renkler beyazdan maviye kadar değişir. En derin maviler en yüksek değerleri gösterir. Negatif veri değerleri varsa bunlar aşağıda gösterildiği gibi turuncu renkte görünür.
Bu takvimin kodu ilk takvime benzer, ancak satırlar şu şekilde görünür:
[ 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 ("hücreler") boyutunu değiştirebilirsiniz:
Burada calendar.cellSize değerini 10 olarak değiştirip günleri ve dolayısıyla bir bütün olarak grafiği
küçülttük.
var options = {
title: 'Red Sox Attendance',
calendar: { cellSize: 10 },
};
Veri değeri olmayan günler, noDataPattern seçeneğiyle özelleştirilebilir:
Burada, color için açık mavi, backgroundColor için de biraz daha koyu bir tona ayarlıyoruz:
var options = {
title: "Red Sox Attendance",
height: 350,
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
};
calendar.cellColor ile hücre kenarlığı rengini, kenarlık genişliğini ve opaklığını kontrol edebilirsiniz:
monthOutlineColor ile ayırt edilecek bir fırça rengi veya düşük opaklıklı bir seçim yaparken dikkatli olmanız gerekir. Yukarıdaki grafikle ilgili 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ırsanız kenarlık kırmızı renkle vurgulanır. Bu davranışı calendar.focusedCellColor seçenekleriyle 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 pazardan cumartesiyenin ilk harfleriyle etiketlenir.
Günlerin sıralamasını değiştiremezsiniz ancak calendar.daysOfWeek seçeneğiyle kullanılan harfleri değiştirebilirsiniz. Ayrıca, calendar.dayOfWeekRightSpace kullanarak haftanın günleri ile grafik arasındaki dolguyu kontrol edebilir ve metin stilini calendar.dayOfWeekLabel ile özelleştirebilirsiniz:
Burada, hafta etiketlerinin yazı tipini değiştiriyor, etiketler ile grafik verileri arasına 10 piksellik bir dolgu koyuyoruz ve haftaları Pazartesi'den itibaren başlatı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',
}
};
Aylar
Aylar varsayılan olarak koyu gri çizgilerle tanımlanır. Kenarlıkları kontrol etmek için calendar.monthOutlineColor seçeneğini, etiketin yazı tipini özelleştirmek için calendar.monthLabel seçeneğini ve etiket dolgusunu ayarlamak için calendar.underMonthSpace seçeneğini kullanabilirsiniz:
Etiketin yazı tipini koyu kırmızı, 12 punto Times-Roman kalın italik olarak ayarladık, dış çizgileri aynı renge ayarladık ve 16 piksellik bir dolgu koyduk. Kullanılmayan ay sınırları aynı tonda daha soluk bir renge 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 daima grafiğin sol kenarında yer alır ve calendar.yearLabel ile calendar.underYearSpace ile özelleştirilebilir:
Yıl yazı tipini koyu yeşil 32 punto Times-Roman kalın italik olarak ayarladık ve yıl etiketleriyle grafiğin alt kısmı arası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 paketinin 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, saat veya günün saati | sayı | ... | |
| Rol: | alan | veri | ... | |
| İsteğe bağlı sütun rolleri: | Yok |
Yok |
... |
Yapılandırma Seçenekleri
| Ad | |
|---|---|
| calendar.cellColor |
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.dayOfWeekLabel |
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.dayOfWeekRightSpace |
Hafta etiketlerinin sağ kenarı ile grafik gün karelerinin sol kenarı arasındaki mesafe. Tür: tam sayı
Varsayılan: 4
|
| calendar.daysOfWeek |
Pazardan cumartesiye kadar kullanılan tek harfli etiketler. Tür: dize
Varsayılan:
'SMTWTFS' |
| calendar.focusedCellColor |
Kullanıcı bir gün karesinin üzerine geldiğinde (örneğin fareyle üzerine gelindiğinde) takvim grafiklerinde kare vurgulanır.
var options = {
calendar:
focusedCellColor: {
stroke: 'red',
strokeOpacity: 0.8,
strokeWidth: 3
}
}
};
Tür: nesne
Varsayılan:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
| calendar.monthLabel |
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ğerleri içeren aylar, bu stilde bir kenarlık kullanılarak diğer aylardan 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.underMonthSpace |
Ay etiketlerinin alt kısmı ile günün üst kısmı kareleri arasındaki piksel sayısı: var options = { calendar: { underMonthSpace: 12 } };
Tür: tam sayı
Varsayılan: 6
|
| calendar.underYearSpace |
En alttaki yıl etiketi ile grafiğin alt kısmı arasındaki piksel sayısı: var options = { calendar: { underYearSpace: 2 } };
Tür: tam sayı
Varsayılan: 0
|
| calendar.unusedMonthOutlineColor |
Veri değeri olmayan aylar, bu stilde bir kenarlık kullanılarak diğer aylardan 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 }
|
| colorAxis |
Renk sütunu değerleri ile renkler veya gradyan ölçeği arasında eşleme belirten bir nesne. Bu nesnenin özelliklerini belirtmek için burada gösterildiği gibi nesne değişmez değer gösterimini kullanabilirsiniz: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Tür: nesne
Varsayılan: null
|
| colorAxis.colors |
Görselleştirmedeki değerlere atanacak renkler. Her öğenin bir HTML renk dizesi olduğu bir dize dizisi. Örneğin: Tür: renk dizelerinden oluşan dizi
Varsayılan: null
|
| colorAxis.maxValue |
Varsa grafik rengi verileri için maksimum değer belirtir. Bu değer ve daha yüksek olan renk verisi değerleri, Tür: numara
Varsayılan: Grafik verilerindeki maksimum renk sütunu değeri
|
| colorAxis.minValue |
Varsa grafik renk verileri için minimum değeri belirtir. Bu değerin ve altındaki renk verisi değerleri, Tür: numara
Varsayılan: Grafik verilerindeki minimum renk sütunu değeri
|
| colorAxis.values |
Varsa değerlerin renklerle nasıl ilişkilendirileceğini kontrol eder. Her değer, Tür: sayı dizisi
Varsayılan: null
|
| forceIFrame |
Grafiği bir satır içi çerçevenin içine çizer. (IE8'de bu seçeneğin yoksayıldığını unutmayın. Tüm IE8 grafikleri, iç çerçeveler kullanılarak çizilir.) Tür: boole
Varsayılan: false
|
| yükseklik |
Grafiğin piksel cinsinden yüksekliği. Tür: numara
Varsayılan: kapsayıcı öğenin yüksekliği
|
| noDataPattern |
Takvim grafiklerinde, belirli bir gün için veri olmadığını belirtmek amacıyla çapraz olarak çizgili bir desen kullanılır. Gri tonlamalı varsayılanları geçersiz kılmak için
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Tür: nesne
Varsayılan: null
|
| tooltip.isHtml |
SVG ile oluşturulmuş (HTML tarafından oluşturulan) ipuçlarını kullanmak için Not: HTML ipucu içeriğinin ipucu sütunu veri rolü aracılığıyla özelleştirilmesi Pasta Grafik ve Balon Grafik görselleştirmeleri tarafından desteklenmez. Tür: boole
Varsayılan: true
|
| genişlik |
Grafiğin piksel cinsinden genişliği. Tür: numara
Varsayılan: kapsayıcı öğenin genişliği
|
Yöntemler
| Yöntem | |
|---|---|
draw(data, options) |
Grafiği çizer. Grafik, yalnızca Return Type (Dönüş Türü): yok
|
getBoundingBox(id) |
Değerler, grafiğin kapsayıcısına bağlıdır. Grafik çizildikten sonra bunu çağırın. Return Type: nesne
|
getSelection() |
Seçilen grafik varlıklarından oluşan bir dizi döndürür.
Seçilebilir varlıklar çubuklar, gösterge girişleri ve kategorilerdir.
Çubuk, veri tablosundaki bir hücreye, bir sütuna açıklama girişine (satır dizini null) ve bir satıra (sütun dizini null) karşılık gelir.
Bu grafik için aynı anda yalnızca bir öğe seçilebilir.
Dönüş Türü: Seçim öğeleri dizisi
|
setSelection() |
Belirtilen grafik varlıklarını seçer. Önceki seçimleri iptal eder.
Seçilebilir varlıklar çubuklar, gösterge girişleri ve kategorilerdir.
Çubuk, veri tablosundaki bir hücreye, bir sütuna açıklama girişine (satır dizini null) ve bir satıra (sütun dizini null) karşılık gelir.
Bu grafik için aynı anda yalnızca bir öğe seçilebilir.
Return Type (Dönüş Türü): yok
|
clearChart() |
Grafiği temizler ve ayrılan tüm kaynaklarını serbest bırakır. Return Type (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ı fareyle bir görsel öğenin üzerine geldiğinde tetiklenir. Varlığın satır dizinini ve tarih değerini geri verir. Varlık için bir veri tablosu öğesi yoksa satır dizini için döndürülen değer Özellikler: satır, tarih
|
onmouseout |
Kullanıcı faresini görsel bir öğeden uzaklaştırdığında tetiklenir. Varlığın satır dizinini ve tarih değerini geri verir. Varlık için bir veri tablosu öğesi yoksa satır dizini için döndürülen değer Özellikler satırı, tarih
|
ready |
Grafik, harici yöntem çağrıları için hazır. Grafikle etkileşim kurmak ve
çizdikten sonra yöntemleri çağırmak isterseniz Özellikler: yok
|
select |
Kullanıcı bir görsel öğeyi tıkladığında tetiklenir. Neyin seçildiğini öğrenmek için Özellikler: yok
|
Veri Politikası
Tüm kod ve veriler tarayıcıda işlenip oluşturulur. Herhangi bir sunucuya veri gönderilmez.