Ringkasan
Catatan: JavaScript menghitung bulan yang dimulai dari nol: 0 Januari, 1 Februari, dan 11 Desember. Jika Anda melihat grafik kalender Anda dalam satu bulan, inilah alasannya.
Diagram kalender adalah visualisasi yang digunakan untuk menampilkan aktivitas dalam rentang waktu yang lama, seperti bulan atau tahun. Jenis ini paling tepat digunakan jika Anda ingin menggambarkan variasi jumlah tertentu bergantung pada hari, atau trennya dari waktu ke waktu.
Diagram kalender mungkin akan mengalami revisi substansial dalam rilis Google Chart mendatang.
Diagram kalender dirender di browser menggunakan SVG atau VML, mana saja yang sesuai untuk browser pengguna. Seperti semua diagram Google, diagram kalender menampilkan tooltip saat pengguna mengarahkan kursor ke data. Dan kredit yang sesuai: bagan kalender kami terinspirasi oleh visualisasi kalender D3.
Contoh Sederhana
Katakanlah kita ingin menampilkan bagaimana variasi kehadiran tim olahraga sepanjang musim. Dengan diagram kalender, kita dapat menggunakan kecerahan untuk menunjukkan nilai dan memungkinkan orang melihat tren secara sekilas:
Anda dapat mengarahkan kursor ke setiap hari untuk melihat nilai data pokok.
Untuk membuat diagram kalender, muat paket calendar, lalu buat dua kolom,
satu untuk tanggal dan satu lagi untuk nilai. (Kolom ketiga opsional untuk gaya visual yang disesuaikan akan
disertakan dalam rilis Google Chart mendatang.)
Kemudian isi baris Anda dengan pasangan nilai tanggal, seperti yang ditunjukkan di bawah ini.
<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>
Hari
Setiap persegi dalam diagram kalender mewakili satu hari. Saat ini, warna sel data tidak dapat disesuaikan, tetapi warna tersebut akan berubah pada rilis Google Chart berikutnya.
Jika semua nilai data positif, warnanya akan berkisar dari putih ke biru, dengan biru terdalam menunjukkan nilai tertinggi. Jika ada nilai data negatif, nilai tersebut akan berwarna oranye, seperti yang ditunjukkan di bawah ini.
Kode untuk kalender ini mirip dengan yang pertama, hanya saja barisnya terlihat seperti ini:
[ 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 ],
Anda dapat mengubah ukuran hari ("sel") dengan opsi calendar.cellSize:
Di sini, kita mengubah calendar.cellSize menjadi 10, yang mengecilkan hari dan juga diagram
secara keseluruhan.
var options = {
title: 'Red Sox Attendance',
calendar: { cellSize: 10 },
};
Hari tanpa nilai data dapat disesuaikan dengan opsi noDataPattern:
Di sini, kita menetapkan color ke biru muda dan backgroundColor ke
warna yang sedikit lebih gelap:
var options = {
title: "Red Sox Attendance",
height: 350,
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
};
Anda dapat mengontrol warna batas sel, lebar batas, dan opasitas dengan
calendar.cellColor:
Anda harus berhati-hati dalam memilih warna goresan yang akan dibedakan dengan monthOutlineColor, atau memilih opasitas yang rendah. Berikut opsi untuk diagram di atas:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
cellColor: {
stroke: '#76a7fa',
strokeOpacity: 0.5,
strokeWidth: 1,
}
}
};
Jika Anda berfokus pada satu hari dalam diagram di atas, batas akan ditandai dengan warna merah. Anda dapat mengontrol perilaku tersebut dengan opsi calendar.focusedCellColor:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
focusedCellColor: {
stroke: '#d3362d',
strokeOpacity: 1,
strokeWidth: 1,
}
}
};
Minggu
Secara default, hari diberi label dengan huruf pertama dari hari Minggu hingga Sabtu.
Anda tidak dapat mengubah urutan hari, tetapi dapat mengubah huruf yang digunakan dengan
opsi calendar.daysOfWeek. Selain itu, Anda dapat mengontrol padding antara hari dan diagram dengan calendar.dayOfWeekRightSpace, dan Anda dapat menyesuaikan gaya teks dengan calendar.dayOfWeekLabel:
Di sini, kita mengubah font label minggu, menempatkan padding 10 piksel di antara label dan data diagram, dan memulai minggu pada hari Senin.
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',
}
};
Bulan
Secara default, bulan ditandai dengan garis abu-abu tua. Anda dapat menggunakan opsi
calendar.monthOutlineColor untuk mengontrol batas, calendar.monthLabel untuk menyesuaikan font label, dan
calendar.underMonthSpace untuk menyesuaikan padding label:
Kami menyetel font label ke huruf tebal miring Times-Roman 12 pt merah tua, menyetel garis luar ke warna yang sama, dan menempatkan dalam padding 16 piksel. Garis batas bulan yang tidak digunakan disetel ke warna yang lebih redup dari rona yang sama.
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,
}
};
Tahun
Tahun dalam diagram kalender selalu berada di tepi kiri diagram, dan dapat disesuaikan dengan calendar.yearLabel dan calendar.underYearSpace:
Kami menetapkan font tahun ke hijau tua 32pt Times-Roman tebal miring, dan menambahkan sepuluh piksel di antara label tahun dan bagian bawah diagram:
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
}
}
};
Memuat
Nama paket google.charts.load adalah "calendar":
google.charts.load("current", {packages: ["calendar"]});
Nama class visualisasi adalah google.visualization.Calendar:
var visualization = new google.visualization.Calendar(container);
Format Data
Baris: Setiap baris dalam tabel mewakili tanggal.
Kolom:
| Kolom 0 | Kolom 1 | ... | Kolom N (opsional) | |
|---|---|---|---|---|
| Tujuan: | Tanggal | Nilai | ... | Peran opsional |
| Jenis Data: | tanggal, datetime, atau waktu | number | ... | |
| Peran: | domain | data | ... | |
| Peran kolom opsional: | None |
None |
... |
Opsi Konfigurasi
| Name | |
|---|---|
| calendar.cellColor |
Opsi
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.
}
}
};
Jenis: objek
Default:
{ stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.cellSize |
Ukuran kotak untuk hari kalender:
var options = { calendar: { cellSize: 10 } };
Jenis: bilangan bulat
Default: 16
|
| calendar.dayOfWeekLabel |
Mengontrol gaya font label minggu di bagian atas diagram:
var options = {
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: 'black',
bold: false,
italic: false
}
}
};
Jenis: objek
Default:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.dayOfWeekRightSpace |
Jarak antara tepi kanan label minggu dan tepi kiri kotak hari pada diagram. Jenis: bilangan bulat
Default: 4
|
| calendar.daysOfWeek |
Label satu huruf yang digunakan untuk hari Minggu hingga Sabtu. Jenis: string
Default:
'SMTWTFS' |
| calendar.focusedCellColor |
Saat pengguna berfokus (misalnya, dengan mengarahkan kursor) ke kotak hari, diagram kalender akan menyoroti kotak tersebut.
var options = {
calendar:
focusedCellColor: {
stroke: 'red',
strokeOpacity: 0.8,
strokeWidth: 3
}
}
};
Jenis: objek
Default:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
| calendar.monthLabel |
Gaya untuk label bulan, mis.:
var options = {
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 16,
color: 'green',
bold: true,
italic: false
}
}
};
Jenis: objek
Default:
{ fontName: 'sans-serif', color: '#888', bold: false, italic: false }
|
| calendar.monthOutlineColor |
Bulan dengan nilai data dipisahkan dari bulan lain menggunakan batas dengan gaya ini.
var options = {
calendar: {
monthOutlineColor: {
stroke: 'blue',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Lihat juga calendar.unusedMonthOutlineColor.)
Jenis: objek
Default:
{ stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
| calendar.underMonthSpace |
Jumlah {i>pixel<i} antara label bagian bawah bulan dan bagian atas kotak hari: var options = { calendar: { underMonthSpace: 12 } };
Jenis: bilangan bulat
Default: 6
|
| calendar.underYearSpace |
Jumlah {i>pixel<i} antara label tahun paling bawah dan bagian bawah diagram: var options = { calendar: { underYearSpace: 2 } };
Jenis: bilangan bulat
Default: 0
|
| calendar.unusedMonthOutlineColor |
Bulan tanpa nilai data dipisahkan dari bulan lain menggunakan batas dengan gaya ini.
var options = {
calendar: {
unusedMonthOutlineColor: {
stroke: 'yellow',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(Lihat juga calendar.monthOutlineColor.)
Jenis: objek
Default:
{ stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
|
| colorAxis |
Objek yang menentukan pemetaan antara nilai kolom warna dan warna atau skala gradien. Untuk menentukan properti objek ini, Anda dapat menggunakan notasi literal objek, seperti yang ditampilkan di sini: {minValue: 0, colors: ['#FF0000', '#00FF00']}
Jenis: objek
Default: null
|
| colorAxis.colors |
Warna untuk menetapkan nilai-nilai dalam visualisasi. Array string, dengan setiap elemennya adalah string warna HTML, misalnya: Jenis: array string warna
Default: null
|
| colorAxis.maxValue |
Jika ada, tentukan nilai maksimum untuk data warna diagram. Nilai data warna dari nilai ini dan yang lebih tinggi akan dirender sebagai warna terakhir dalam rentang Jenis: nomor
Default: Nilai maksimum kolom warna dalam data diagram
|
| colorAxis.minValue |
Jika ada, tentukan nilai minimum untuk data warna diagram. Nilai data warna dari nilai ini dan yang lebih rendah akan dirender sebagai warna pertama dalam rentang Jenis: nomor
Default: Nilai minimum kolom warna dalam data diagram
|
| colorAxis.values |
Jika ada, kontrol cara nilai dikaitkan dengan warna. Setiap nilai dikaitkan dengan warna yang sesuai dalam array Jenis: array angka
Default: null
|
| forceIFrame |
Menggambar diagram di dalam bingkai inline. (Perhatikan bahwa pada IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.) Jenis: boolean
Default: false
|
| tinggi |
Tinggi diagram, dalam piksel. Jenis: nomor
Default: tinggi elemen yang memuatnya
|
| noDataPattern |
Diagram kalender menggunakan pola diagonal bergaris untuk menunjukkan bahwa tidak ada data untuk
hari tertentu. Gunakan opsi
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Jenis: objek
Default: null
|
| tooltip.isHtml |
Setel ke Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Diagram Lingkaran dan Bagan Balon. Jenis: boolean
Default: benar (true)
|
| lebar |
Lebar diagram, dalam piksel. Jenis: nomor
Default: lebar elemen yang memuatnya
|
Metode
| Metode | |
|---|---|
draw(data, options) |
Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa Jenis Pengembalian: tidak ada
|
getBoundingBox(id) |
Menampilkan objek yang berisi bagian kiri, atas, lebar, dan tinggi elemen diagram
Nilai bersifat relatif terhadap penampung diagram. Panggil ini setelah diagram digambar. Jenis Pengembalian: objek
|
getSelection() |
Menampilkan array entitas diagram yang dipilih.
Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori.
Batang sesuai dengan sel dalam tabel data, entri legenda ke kolom (indeks baris null),
dan kategori dengan baris (indeks kolom null).
Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu.
Jenis Pengembalian: Array elemen pilihan
|
setSelection() |
Memilih entitas diagram yang ditentukan. Membatalkan pilihan sebelumnya.
Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori.
Batang sesuai dengan sel dalam tabel data, entri legenda ke kolom (indeks baris null),
dan kategori dengan baris (indeks kolom null).
Untuk diagram ini, hanya satu entitas yang dapat dipilih pada satu waktu.
Jenis Pengembalian: tidak ada
|
clearChart() |
Mengosongkan diagram, dan melepaskan semua resource yang dialokasikan. Jenis Pengembalian: tidak ada
|
Acara
| Name | |
|---|---|
error |
Diaktifkan saat terjadi error saat mencoba merender diagram. Properties: id, pesan
|
onmouseover |
Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan kembali indeks baris dan nilai tanggal entity. Jika tidak ada elemen tabel data untuk entitas, nilai yang ditampilkan untuk indeks baris adalah Properti: baris, tanggal
|
onmouseout |
Diaktifkan saat pengguna menjauhi entity visual. Meneruskan kembali indeks baris dan nilai tanggal entity. Jika tidak ada elemen tabel data untuk entitas, nilai yang ditampilkan untuk indeks baris adalah Properti baris, tanggal
|
ready |
Diagram siap untuk panggilan metode eksternal. Jika ingin berinteraksi dengan diagram, dan memanggil metode setelah menggambarnya, Anda harus menyiapkan pemroses untuk peristiwa ini sebelum memanggil metode Properti: tidak ada
|
select |
Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil
Properti: tidak ada
|
Kebijakan Data
Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.