Ringkasan
Jenis data kolom DataTable date
dan datetime
menggunakan
class Tanggal JavaScript bawaan.
Penting: Pada objek Tanggal JavaScript, bulan diindeks mulai dari nol dan naik hingga sebelas, dengan Januari menjadi bulan 0 dan Desember menjadi bulan 11.
Tanggal dan Waktu Menggunakan Konstruktor Tanggal
Tanggal Menggunakan Konstruktor Tanggal
Untuk membuat objek Tanggal baru, panggil konstruktor Date()
dengan kata kunci
new
, dengan argumen untuk menentukan komponen tanggal. Argumen ini berbentuk beberapa angka yang sesuai dengan properti yang berbeda dari tanggal Anda.
new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)
Saat menggunakan konstruktor Tanggal dengan jenis data date
, Anda hanya perlu menentukan
Tahun, Bulan, dan Hari.
Konstruktor Tanggal juga dapat berbentuk: new Date(Milliseconds)
, dengan
Milidetik adalah jarak dalam milidetik dari tanggal yang diinginkan dari
1 Januari 1970 00:00:00 UTC. Untuk tanggal dan waktu sebelum tanggal tersebut, jumlah negatif
Milidetik akan diberikan.
Menggunakan konstruktor Tanggal akan berguna saat membuat DataTable secara manual
menggunakan metode addColumn()
, addRow()
, dan addRows()
,
serta metode arrayToDataTable()
. Namun, jika menggunakan JSON untuk menentukan data,
representasi string harus digunakan.
Konstruktor Tanggal JavaScript juga dapat menerima representasi string dari tanggal sebagai argumen. String ini dapat memiliki beberapa bentuk yang berbeda. Formulir yang paling andal sesuai dengan spesifikasi RFC 2822 atau spesifikasi ISO 8601. Formatnya adalah:
-
RFC 2822 —
'MMM DD, YYYY'
atau'DD MMM, YYYY'
(Contoh:new Date('Jan 1, 2015')
ataunew Date('1 Jan, 2015')
) -
ISO 8601 —
'YYYY-MM-DD'
(Contoh:new Date('2015-01-01')
)
Peringatan: Representasi string di konstruktor Tanggal dapat diuraikan secara berbeda oleh browser dan versi browser yang berbeda pula, sehingga menampilkan tanggal yang berbeda untuk string yang sama. Karena itu, tidak disarankan meneruskan string ke konstruktor Tanggal. Sebagai gantinya, sebaiknya hanya gunakan angka untuk argumen konstruktor Tanggal.
Linimasa di bawah menunjukkan juara Super Bowl dari setiap musim NFL sejak tahun 2000.
Berikut adalah kode untuk membuat linimasa ini. Perhatikan penggunaan konstruktor new Date()
, dan angka yang diberikan untuk setiap tanggal, menggunakan bulan berbasis 0 seperti yang disebutkan sebelumnya.
google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Team'); data.addColumn('date', 'Season Start Date'); data.addColumn('date', 'Season End Date'); data.addRows([ ['Baltimore Ravens', new Date(2000, 8, 5), new Date(2001, 1, 5)], ['New England Patriots', new Date(2001, 8, 5), new Date(2002, 1, 5)], ['Tampa Bay Buccaneers', new Date(2002, 8, 5), new Date(2003, 1, 5)], ['New England Patriots', new Date(2003, 8, 5), new Date(2004, 1, 5)], ['New England Patriots', new Date(2004, 8, 5), new Date(2005, 1, 5)], ['Pittsburgh Steelers', new Date(2005, 8, 5), new Date(2006, 1, 5)], ['Indianapolis Colts', new Date(2006, 8, 5), new Date(2007, 1, 5)], ['New York Giants', new Date(2007, 8, 5), new Date(2008, 1, 5)], ['Pittsburgh Steelers', new Date(2008, 8, 5), new Date(2009, 1, 5)], ['New Orleans Saints', new Date(2009, 8, 5), new Date(2010, 1, 5)], ['Green Bay Packers', new Date(2010, 8, 5), new Date(2011, 1, 5)], ['New York Giants', new Date(2011, 8, 5), new Date(2012, 1, 5)], ['Baltimore Ravens', new Date(2012, 8, 5), new Date(2013, 1, 5)], ['Seattle Seahawks', new Date(2013, 8, 5), new Date(2014, 1, 5)], ]); var options = { height: 450, timeline: { groupByRowLabel: true } }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); }
Tanggal dan Waktu menggunakan Konstruktor Tanggal
Jenis data kolom datetime
DataTable menggunakan konstruktor Tanggal yang sama seperti
jenis data date
, tetapi kini menggunakan semua argumen untuk mengisi waktu.
Atau, representasi string dari datetime
juga dapat diteruskan ke
konstruktor Tanggal. Representasi string datetime
terdiri dari penambahan
jam, menit, dan detik, selain offset zona waktu 4 digit (misalnya, Waktu Standar
Pasifik (PST) adalah -0800). Untuk spesifikasi RFC 2822, waktu dan zona waktu ditambahkan dengan spasi
antara tanggal dan waktu, serta waktu dan zona waktu. Dalam spesifikasi ISO 8601, tidak ada
spasi, tanggal diikuti dengan huruf besar "T" untuk menunjukkan komponen waktu. Juga tidak ada spasi antara waktu dan selisih zona waktu. String tanggal datetime
lengkap
untuk 6 Desember 2014 pukul 10.30 PST adalah:
- RFC 2822 —
Dec 6, 2014 10:30:00 -0800
. - ISO 8601 —
2014-12-06T10:30:00-0800
.
Peringatan: Sekali lagi, representasi string dapat diuraikan secara berbeda oleh browser/versi yang berbeda. Khususnya, saat menangani waktu dan zona waktu, ada perbedaan apakah tanggal waktu ditampilkan dengan zona waktu UTC (GMT), atau diimbangi dan dikembalikan dalam waktu lokal. Ini adalah alasan lain mengapa penggunaan string tanggal/waktu tidak direkomendasikan.
Linimasa di bawah menguraikan hari rata-rata, menggunakan jenis data tanggal dan waktu.
google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Activity', 'Start Time', 'End Time'], ['Sleep', new Date(2014, 10, 15, 0, 30), new Date(2014, 10, 15, 6, 30)], ['Eat Breakfast', new Date(2014, 10, 15, 6, 45), new Date(2014, 10, 15, 7)], ['Get Ready', new Date(2014, 10, 15, 7, 4), new Date(2014, 10, 15, 7, 30)], ['Commute To Work', new Date(2014, 10, 15, 7, 30), new Date(2014, 10, 15, 8, 30)], ['Work', new Date(2014, 10, 15, 8, 30), new Date(2014, 10, 15, 17)], ['Commute Home', new Date(2014, 10, 15, 17), new Date(2014, 10, 15, 18)], ['Gym', new Date(2014, 10, 15, 18), new Date(2014, 10, 15, 18, 45)], ['Eat Dinner', new Date(2014, 10, 15, 19), new Date(2014, 10, 15, 20)], ['Get Ready For Bed', new Date(2014, 10, 15, 21), new Date(2014, 10, 15, 22)] ]); var options = { height: 450, }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); }
Tanggal, Waktu, dan Zona Waktu
Menggunakan konstruktor Tanggal, baik untuk date
atau datetime
, akan menampilkan
tanggal atau tanggal/waktu yang diinginkan dalam zona waktu yang ditetapkan oleh browser pengguna.
Menetapkan objek Tanggal ke zona waktu tertentu dapat dilakukan dalam beberapa cara. Pertama, Google Chart menyediakan
Pemformat Tanggal tempat Anda dapat
menentukan timeZone
. Tindakan ini akan memberikan nilai berformat untuk setiap nilai date
dan datetime
di DataTable. Anda juga dapat meneruskan string sebagai argumen ke konstruktor new Date()
, atau Anda dapat menggabungkan argumen dalam metode Date.UTC()
, seperti:
new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))
Ini akan menetapkan objek Tanggal ke tanggal dan waktu yang ditentukan dalam zona waktu UTC (GMT). Dari sana, Anda dapat menghitung selisih yang diinginkan untuk zona waktu dan menetapkan tanggal serta waktu yang diinginkan.
Tanggal dan Waktu Menggunakan Representasi String Tanggal
Saat melakukan serialisasi data menggunakan
notasi literal objek DataTable JavaScript
untuk membuat DataTable, konstruktor new Date()
tidak dapat digunakan. Sebagai gantinya,
Google Chart menyediakan representasi string Tanggal yang memungkinkan date
atau
datetime
Anda diserialisasi dan diurai dengan benar saat membuat DataTable. Format string
Tanggal ini hanya menghapus kata kunci new
dan menggabungkan ekspresi yang tersisa dalam
tanda kutip:
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
Penting: Saat menggunakan Representasi String Tanggal ini, seperti saat menggunakan
konstruktor new Date()
, bulan diindeks mulai dari nol (Januari adalah bulan 0,
Desember adalah bulan 11).
Di bawah ini adalah linimasa Super Bowl yang sama dari sebelumnya, tetapi sekarang menggunakan notasi literal objek JavaScript dan format string Tanggal.
google.charts.load('current', {'packages':['timeline']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable({ cols: [ {id: 'team', label: 'Team', type: 'string'}, {id: 'start', label: 'Season Start Date', type: 'date'}, {id: 'end', label: 'Season End Date', type: 'date'} ], rows: [ {c: [{v: 'Baltimore Ravens'}, {v: 'Date(2000, 8, 5)'}, {v: 'Date(2001, 1, 5)'}]}, {c: [{v: 'New England Patriots'}, {v: 'Date(2001, 8, 5)'}, {v: 'Date(2002, 1, 5)'}]}, {c: [{v: 'Tampa Bay Buccaneers'}, {v: 'Date(2002, 8, 5)'}, {v: 'Date(2003, 1, 5)'}]}, {c: [{v: 'New England Patriots'}, {v: 'Date(2003, 8, 5)'}, {v: 'Date(2004, 1, 5)'}]}, {c: [{v: 'New England Patriots'}, {v: 'Date(2004, 8, 5)'}, {v: 'Date(2005, 1, 5)'}]}, {c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2005, 8, 5)'}, {v: 'Date(2006, 1, 5)'}]}, {c: [{v: 'Indianapolis Colts'}, {v: 'Date(2006, 8, 5)'}, {v: 'Date(2007, 1, 5)'}]}, {c: [{v: 'New York Giants'}, {v: 'Date(2007, 8, 5)'}, {v: 'Date(2008, 1, 5)'}]}, {c: [{v: 'Pittsburgh Steelers'}, {v: 'Date(2008, 8, 5)'}, {v: 'Date(2009, 1, 5)'}]}, {c: [{v: 'New Orleans Saints'}, {v: 'Date(2009, 8, 5)'}, {v: 'Date(2010, 1, 5)'}]}, {c: [{v: 'Green Bay Packers'}, {v: 'Date(2010, 8, 5)'}, {v: 'Date(2011, 1, 5)'}]}, {c: [{v: 'New York Giants'}, {v: 'Date(2011, 8, 5)'}, {v: 'Date(2012, 1, 5)'}]}, {c: [{v: 'Baltimore Ravens'}, {v: 'Date(2012, 8, 5)'}, {v: 'Date(2013, 1, 5)'}]}, {c: [{v: 'Seattle Seahawks'}, {v: 'Date(2013, 8, 5)'}, {v: 'Date(2014, 1, 5)'}]} ] }); var options = { height: 450, timeline: { groupByRowLabel: true } }; var chart = new google.visualization.Timeline(document.getElementById('chart_div')); chart.draw(data, options); }
Format ini juga dapat digunakan dalam metode arrayToDataTable()
, asalkan di array pertama, tempat label kolom ditentukan, Anda mendeklarasikan kolom yang diperlukan sebagai type: 'date'
atau type: 'datetime'
.
var data = google.visualization.arrayToDataTable([ ["Team", {type: 'date', label: 'Season Start Date'}, {type: 'date', label: 'Season End Date'}], ["Baltimore Ravens", "Date(2000, 8, 5)", "Date(2001, 1, 5)"], ["New England Patriots", "Date(2001, 8, 5)", "Date(2002, 1, 5)"], ["Tampa Bay Buccaneers", "Date(2002, 8, 5)", "Date(2003, 1, 5)"], ["New England Patriots", "Date(2003, 8, 5)", "Date(2004, 1, 5)"], ["New England Patriots", "Date(2004, 8, 5)", "Date(2005, 1, 5)"], ["Pittsburgh Steelers", "Date(2005, 8, 5)", "Date(2006, 1, 5)"], ["Indianapolis Colts", "Date(2006, 8, 5)", "Date(2007, 1, 5)"], ["New York Giants", "Date(2007, 8, 5)", "Date(2008, 1, 5)"], ["Pittsburgh Steelers", "Date(2008, 8, 5)", "Date(2009, 1, 5)"], ["New Orleans Saints", "Date(2009, 8, 5)", "Date(2010, 1, 5)"], ["Green Bay Packers", "Date(2010, 8, 5)", "Date(2011, 1, 5)"], ["New York Giants", "Date(2011, 8, 5)", "Date(2012, 1, 5)"], ["Baltimore Ravens", "Date(2012, 8, 5)", "Date(2013, 1, 5)"], ["Seattle Seahawks", "Date(2013, 8, 5)", "Date(2014, 1, 5)"] ]);
Bekerja dengan Waktu
Jenis data kolom timeofday
DataTable menggunakan array yang terdiri dari 3 atau 4 angka, yang masing-masing mewakili jam, menit, detik, dan milidetik (opsional). Penggunaan
timeofday
berbeda dengan penggunaan date
dan datetime
karena
nilainya tidak spesifik untuk tanggal, sedangkan date
dan datetime
selalu menentukan tanggal.
Misalnya, waktu
08.30 adalah: [8, 30, 0, 0]
, dengan nilai ke-4 bersifat opsional
([8, 30, 0]
akan menghasilkan nilai waktu yang sama).
google.charts.load('current', {'packages':['bar']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('timeofday', 'Time of Day'); data.addColumn('number', 'Emails Received'); data.addRows([ [[8, 30, 45], 5], [[9, 0, 0], 10], [[10, 0, 0, 0], 12], [[10, 45, 0, 0], 13], [[11, 0, 0, 0], 15], [[12, 15, 45, 0], 20], [[13, 0, 0, 0], 22], [[14, 30, 0, 0], 25], [[15, 12, 0, 0], 30], [[16, 45, 0], 32], [[16, 59, 0], 42] ]); var options = { title: 'Total Emails Received Throughout the Day', height: 450 }; var chart = new google.charts.Bar(document.getElementById('chart_div')); chart.draw(data, google.charts.Bar.convertOptions(options)); }
Memformat Label Sumbu, Petak, dan Centang
Saat menggunakan tanggal, tanggal/waktu, dan waktu, sebaiknya format label sumbu, label garis kisi, atau label centang dengan cara tertentu. Hal ini dapat dilakukan dengan beberapa cara.
Pertama, Anda dapat menggunakan opsi hAxis.format
atau vAxis.format
. Opsi
ini berlaku jika opsi gridlines.count
dihilangkan, dalam hal ini, diagram
ditetapkan secara default ke jumlah 5, serta jika ditetapkan ke angka selain -1. Hal ini memungkinkan Anda
menentukan string format, tempat Anda menggunakan huruf placeholder untuk berbagai bagian
tanggal/tanggal/waktu. Lihat referensi
pemformat tanggal,
khususnya bagian pattern
untuk mengetahui informasi selengkapnya tentang placeholder dan
cara kerjanya.
google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('date', 'Time of Day'); data.addColumn('number', 'Rating'); data.addRows([ [new Date(2015, 0, 1), 5], [new Date(2015, 0, 2), 7], [new Date(2015, 0, 3), 3], [new Date(2015, 0, 4), 1], [new Date(2015, 0, 5), 3], [new Date(2015, 0, 6), 4], [new Date(2015, 0, 7), 3], [new Date(2015, 0, 8), 4], [new Date(2015, 0, 9), 2], [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6], [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5], [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6], [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2], [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5], [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9], [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4], [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7], [new Date(2015, 1, 2), 9] ]); var options = { title: 'Rate the Day on a Scale of 1 to 10', width: 900, height: 500, hAxis: { format: 'M/d/yy', gridlines: {count: 15} }, vAxis: { gridlines: {color: 'none'}, minValue: 0 } }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')); chart.draw(data, options); var button = document.getElementById('change'); button.onclick = function () { // If the format option matches, change it to the new option, // if not, reset it to the original format. options.hAxis.format === 'M/d/yy' ? options.hAxis.format = 'MMM dd, yyyy' : options.hAxis.format = 'M/d/yy'; chart.draw(data, options); }; }
Anda juga dapat menyediakan aturan pemformatan untuk unit tanggal dan nilai waktu tertentu dengan menyertakan opsi
units
di bagian gridlines
dan minorGridlines
untuk kedua
sumbu. Opsi ini hanya akan digunakan jika opsi gridlines.count
ditetapkan ke -1.
Opsi gridlines.units
adalah objek, tempat Anda menentukan format untuk berbagai aspek tanggal/tanggal/waktu untuk garis petak yang dihitung, dan diagram Anda akan menghitung garis kisi berdasarkan format pertama yang sesuai dengan ruang untuk label garis kisi.
Anda dapat menyetel format untuk tahun, bulan, hari, jam, menit, detik, dan milidetik.
Opsi format menerima array format string, dan akan menggunakannya secara berurutan sampai format tersebut sesuai dengan area label. Oleh karena itu, sebaiknya buat daftar format dengan urutan dari yang terpanjang hingga terpendek. Format string menggunakan pola yang sama dengan referensi pemformat tanggal yang disebutkan sebelumnya.
Perlu diperhatikan bahwa pada diagram di atas, saat mengubah jendela tampilan, format untuk unit hours
akan berubah, dengan mempertimbangkan perubahan jam dari garis kecil ke garis kisi utama, dan format dalam opsi akan berubah. Selain itu, perhatikan bahwa minorGridline menggunakan format kedua yang lebih pendek, karena format pertama tidak sesuai dengan ruang di setiap instance.
hAxis: { viewWindow: { min: new Date(2014, 11, 31, 18), max: new Date(2015, 0, 3, 1) }, gridlines: { count: -1, units: { days: {format: ['MMM dd']}, hours: {format: ['HH:mm', 'ha']}, } }, minorGridlines: { units: { hours: {format: ['hh:mm:ss a', 'ha']}, minutes: {format: ['HH:mm a Z', ':mm']} } } }
Informasi Lebih Lanjut tentang Tanggal JavaScript
Jika Anda ingin mempelajari objek Date()
JavaScript lebih lanjut, Mozilla
Developer Network adalah referensi yang bagus. Di sana, Anda dapat mempelajari semua
objek Tanggal JavaScript.