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 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 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.
    }
  }
};
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: colorAxis: {colors:['red','#004411']}. Anda harus memiliki setidaknya dua nilai; gradien akan menyertakan semua nilai Anda, ditambah nilai perantara yang dihitung, dengan warna pertama sebagai nilai terkecil, dan warna terakhir sebagai nilai tertinggi.

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 colorAxis.colors.

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 colorAxis.colors.

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 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 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 dan noDataPattern.color untuk mengganti setelan default hitam putih, misalnya: 

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

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

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 ready diaktifkan. Extended description.

Jenis Pengembalian: tidak ada
getBoundingBox(id)

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

var cli = chart.getChartLayoutInterface();

Tinggi area diagram
cli.getBoundingBox('chartarea').height
Lebar batang ketiga dalam deret pertama diagram batang atau kolom
cli.getBoundingBox('bar#0#2').width
Kotak pembatas dari 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 suatu diagram horizontal (misalnya, batang):
cli.getBoundingBox('hAxis#0#gridline')

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. Extended description

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. Extended description

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 undefined.

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 undefined.

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 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.