Diagram Kalender

  1. Ringkasan
  2. Contoh Sederhana
  3. Hari
  4. Minggu
  5. Bulan
  6. Tahun
  7. Memuat
  8. Format Data
  9. Opsi Konfigurasi
  10. Metode
  11. Peristiwa
  12. Kebijakan Data

Ringkasan

Catatan: JavaScript menghitung bulan mulai dari nol: Januari adalah 0, Februari adalah 1, dan Desember adalah 11. Jika diagram kalender Anda tampak berbeda satu bulan, itulah alasannya.

Diagram kalender adalah visualisasi yang digunakan untuk menampilkan aktivitas selama rentang waktu yang lama, seperti bulan atau tahun. Metrik ini paling baik digunakan saat Anda ingin mengilustrasikan bagaimana beberapa kuantitas bervariasi, bergantung pada hari dalam seminggu, atau trennya dari waktu ke waktu.

Diagram kalender mungkin sedang menjalani revisi penting 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. Kemudian, kredit dicantumkan untuk kredit: diagram kalender kami terinspirasi oleh visualisasi kalender D3.

Contoh Sederhana

Misalnya, kami ingin menunjukkan variasi kehadiran tim olahraga di sepanjang musim. Dengan diagram kalender, kita dapat menggunakan kecerahan untuk menunjukkan nilai dan memungkinkan orang melihat tren secara sekilas:

Anda dapat mengarahkan mouse ke masing-masing hari untuk melihat nilai data pokok.

Untuk membuat diagram kalender, muat paket calendar, lalu buat dua kolom, satu untuk tanggal dan satu untuk nilai. (Kolom ketiga yang opsional untuk gaya visual yang disesuaikan akan tersedia 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, meskipun akan berubah dalam rilis Google Chart berikutnya.

Jika nilai data semuanya positif, warna akan berkisar dari putih hingga biru, dengan warna biru terdalam menunjukkan nilai tertinggi. Jika ada nilai data negatif, nilai tersebut akan muncul dengan warna oranye, seperti yang ditunjukkan di bawah.

Kode untuk kalender ini mirip dengan kode pertama, tetapi 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 menyingkat hari, dan oleh karena itu, 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 warna 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 guratan yang akan dibedakan dari monthOutlineColor, atau memilih opasitas yang rendah. Berikut adalah opsi untuk diagram di atas: 

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

Jika Anda fokus pada hari dalam diagram di atas, batas akan disorot 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 dalam seminggu diberi label dengan huruf pertama dari hari Minggu sampai Sabtu. Anda tidak dapat mengubah urutan hari, tetapi Anda dapat mengubah huruf yang digunakan dengan opsi calendar.daysOfWeek. Selain itu, Anda dapat mengontrol padding antara hari dalam seminggu dan diagram dengan calendar.dayOfWeekRightSpace, serta 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, serta 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 diidentifikasi 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:

Kita menetapkan font label ke cetak miring tebal Times-Roman 12 pt merah tua, menetapkan outline ke warna yang sama, dan menempatkan padding 16 piksel. Garis luar bulan yang tidak digunakan disetel ke warna yang lebih redup dari hue 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-tahun dalam diagram kalender selalu berada di tepi kiri diagram, dan dapat disesuaikan dengan calendar.yearLabel dan calendar.underYearSpace:

Kita menetapkan font tahun ke cetak miring tebal Times-Roman 32pt berwarna hijau tua, dan menambahkan sepuluh piksel 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 visualisasinya 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, tanggal/waktu, atau waktu angka ...
Peran: domain data ...
Peran kolom opsional:

None

None

 ...

 

Opsi Konfigurasi

Name
calendar.cellColor

Opsi calendar.cellColor memungkinkan Anda menyesuaikan batas kotak hari kalender: 

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.
    }
  }
};
Objek Type:
Default: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

Ukuran kotak 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
    }
  }
};
Objek Type:
Default: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

Jarak antara tepi kanan label minggu dan tepi kiri kotak hari diagram.

Jenis: bilangan bulat
Default: 4
calendar.daysOfWeek

Label satu huruf digunakan untuk hari Minggu sampai Sabtu.

Jenis: string
Default: 'SMTWTFS'
calendar.FocusCellColor

Saat pengguna fokus (misalnya, dengan mengarahkan kursor) ke kotak harian, diagram kalender akan menyorot kotak tersebut. 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
Objek Type:
Default: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

Gaya untuk label bulan, misalnya:

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
Objek Type:
Default: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

Bulan dengan nilai data ditandai dari yang lain menggunakan batas dalam gaya ini.

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Lihat juga calendar.unusedMonthOutlineColor.)
Objek Type:
Default: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

Jumlah piksel antara bagian bawah label bulan dan bagian atas kuadrat hari: 

var options = { calendar: { underMonthSpace: 12 } };
Jenis: bilangan bulat
Default: 6
calendar.underYearSpace

Jumlah piksel 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 ditandai dari yang lain menggunakan batas dalam gaya ini. 

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
(Lihat juga calendar.monthOutlineColor.)
Objek Type:
Default: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
Sumbu warna

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 ditunjukkan di sini: 

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
Objek Type:
Default: null
colorAxis.colors

Warna yang akan ditetapkan ke nilai dalam visualisasi. Array string, dengan setiap elemen adalah string warna HTML, misalnya: colorAxis: {colors:['red','#004411']}. Anda harus memiliki minimal dua nilai; gradien akan mencakup semua nilai, ditambah nilai perantara yang dihitung, dengan warna pertama sebagai nilai terkecil, dan warna terakhir sebagai tertinggi.

Jenis: array string warna
Default: null
colorAxis.maxValue

Jika ada, menentukan nilai maksimum untuk data warna diagram. Nilai data warna dari nilai ini dan yang lebih tinggi akan dirender sebagai warna terakhir dalam rentang colorAxis.colors.

Jenis: angka
Default: Nilai maksimum kolom warna dalam data diagram
colorAxis.minValue

Jika ada, menentukan nilai minimum untuk data warna diagram. Nilai data warna dari nilai ini dan yang lebih rendah akan dirender sebagai warna pertama dalam rentang colorAxis.colors.

Jenis: angka
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 di array colorAxis.colors. Nilai ini berlaku untuk data warna diagram. Pewarnaan dilakukan sesuai dengan gradien nilai yang ditentukan di sini. Tidak menentukan nilai untuk opsi ini sama dengan menentukan [minValue, maxValue].

Jenis: array angka
Default: null
forceIFrame

Menggambar diagram di dalam frame inline. (Perhatikan bahwa di IE8, opsi ini diabaikan; semua diagram IE8 digambar dalam i-frame.)

Jenis: boolean
Default: false (salah)
tinggi

Tinggi diagram, dalam piksel.

Jenis: angka
Default: tinggi elemen penampung
noDataPattern

Diagram kalender menggunakan pola diagonal garis-garis untuk menunjukkan bahwa tidak ada data untuk hari tertentu. Gunakan opsi noDataPattern.backgroundColor dan noDataPattern.color untuk mengganti default hitam putih, misalnya: 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
Objek Type:
Default: null
tooltip.isHtml

Setel ke false untuk menggunakan tooltip yang dirender SVG (bukan dirender HTML). Lihat Menyesuaikan Konten Tooltip untuk detail selengkapnya.

Catatan: penyesuaian konten tooltip HTML melalui peran data kolom tooltip tidak didukung oleh visualisasi Diagram Lingkaran dan Diagram Balon.

Jenis: boolean
Default: true (benar):
lebar

Lebar diagram, dalam piksel.

Jenis: angka
Default: lebar elemen yang memuatnya

Metode

Metode
draw(data, options)

Menggambar diagram. Diagram menerima panggilan metode lebih lanjut hanya setelah peristiwa ready diaktifkan. Extended description

Jenis Hasil: tidak ada
getBoundingBox(id)

Menampilkan objek yang berisi kiri, atas, lebar, dan tinggi elemen diagram id. Format untuk id belum didokumentasikan (ini adalah nilai hasil pengendali peristiwa), tetapi berikut adalah beberapa contohnya:

var cli = chart.getChartLayoutInterface();

Ketinggian area diagram
cli.getBoundingBox('chartarea').height
Lebar batang ketiga dalam rangkaian pertama diagram batang atau kolom
cli.getBoundingBox('bar#0#2').width
Kotak pembatas pada dudukan kelima diagram lingkaran
cli.getBoundingBox('slice#4')
Kotak pembatas data diagram dari diagram vertikal (misalnya: kolom):
cli.getBoundingBox('vAxis#0#gridline')
Kotak pembatas data diagram dari diagram horizontal (misalnya, batang):
cli.getBoundingBox('hAxis#0#gridline')

Nilai relatif terhadap penampung diagram. Panggil ini setelah diagram digambar.

Return Type:
getSelection()

Menampilkan array entitas diagram yang dipilih. Entitas yang dapat dipilih adalah batang, entri legenda, dan kategori. Batang sesuai dengan sel di tabel data, entri legenda ke kolom (indeks baris adalah null), dan kategori ke baris (indeks kolom bernilai null). Untuk diagram ini, hanya satu entitas yang dapat dipilih pada waktu tertentu. Extended description

Jenis Hasil: 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 di tabel data, entri legenda ke kolom (indeks baris adalah null), dan kategori ke baris (indeks kolom bernilai null). Untuk diagram ini, hanya satu entitas yang dapat dipilih sekaligus. Extended description

Jenis Hasil: tidak ada
clearChart()

Menghapus diagram, dan melepaskan semua resource yang dialokasikan.

Jenis Hasil: tidak ada

Acara

Name
error

Dipicu jika terjadi error saat mencoba merender diagram.

Properties: ID, pesan
onmouseover

Diaktifkan saat pengguna mengarahkan mouse ke entitas visual. Meneruskan indeks baris dan nilai tanggal entity. Jika tidak ada elemen tabel data untuk entitas, nilai yang ditampilkan untuk indeks baris adalah undefined.

Properti: baris, tanggal
onmouseout

Diaktifkan saat pengguna mouse menjauh dari entitas visual. Meneruskan indeks baris dan nilai tanggal entitas. Jika tidak ada elemen tabel data untuk entitas, nilai yang ditampilkan untuk indeks baris adalah undefined.

Baris Properti, 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 draw, dan memanggilnya hanya setelah peristiwa diaktifkan.

Properti: tidak ada
select

Diaktifkan saat pengguna mengklik entitas visual. Untuk mempelajari apa yang telah dipilih, panggil getSelection().

Properti: tidak ada

Kebijakan Data

Semua kode dan data diproses dan dirender di browser. Tidak ada data yang dikirim ke server mana pun.