概要
DataTable 列のデータ型は date
と datetime
で、組み込みの JavaScript Date クラスを使用しています。
重要: JavaScript の日付オブジェクトでは、月はゼロから始まり、11 まで上がります。1 月は 0 月、12 月は 11 月です。
日付コンストラクタを使用した日付と時刻
日付コンストラクタを使用した日付
新しい Date オブジェクトを作成するには、new
キーワードを指定して Date()
コンストラクタを呼び出し、日付の構成要素を指定します。これらの引数は、日付のさまざまなプロパティに対応する複数の数値の形式を取ります。
new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)
日付型コンストラクタで date
データ型を使用する場合は、年、月、日を指定するだけで済みます。
日付コンストラクタの形式は、new Date(Milliseconds)
です。ここで、ミリ秒は目的の日付の、1970 年 1 月 1 日 00:00:00 UTC からの距離(ミリ秒単位)です。その日付より前の日付の時刻には、ミリ秒の負数を指定できます。
日付コンストラクタを使用すると、addColumn()
、addRow()
、addRows()
メソッド、および arrayToDataTable()
メソッドを使用して DataTable を手動で作成できます。ただし、JSON を使用してデータを指定する場合は、文字列表現を使用する必要があります。
JavaScript の Date コンストラクタは、日付の文字列表現を引数として受け取ることもできます。この文字列にはさまざまな形式があります。最も信頼性の高い形式は、RFC 2822 仕様または ISO 8601 仕様のいずれかに準拠しています。形式は以下の通りです。
-
RFC 2822 -
'MMM DD, YYYY'
または'DD MMM, YYYY'
(例:new Date('Jan 1, 2015')
またはnew Date('1 Jan, 2015')
) -
ISO 8601 -
'YYYY-MM-DD'
(例:new Date('2015-01-01')
)
警告: 日付コンストラクタの文字列表現は、ブラウザやブラウザのバージョンによって異なるため、同じ文字列に対して異なる日付が返されることがあります。そのため、日付コンストラクタに文字列を渡すことはおすすめしません。代わりに、日付コンストラクタの引数に数値のみを使用することをおすすめします。
以下のタイムラインは、2000 年以降の各 NFL シーズンのスーパーボウル優勝者を示しています。
このタイムラインを作成するコードを以下に示します。new Date()
コンストラクタの使用と、各日付に指定された数値が、先述の 0 から始まる月を使用していることに留意してください。
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); }
日付コンストラクタを使用した日時
DataTable 列の datetime
データ型は、date
データ型と同じ Date コンストラクタを使用しますが、すべての引数を使用して時間を埋めるようになりました。
または、datetime
の文字列表現を日付コンストラクタに渡すこともできます。datetime
の文字列表現には、4 桁のタイムゾーン オフセット(太平洋標準時(PST)は -0800 など)に加えて時間、分、秒が含まれます。RFC 2822 の仕様では、日時とタイムゾーンに、日付と時刻、およびタイムゾーンの間にスペースを入れて追加します。ISO 8601 規格では、スペースは使用せず、日付の後に時間要素を表す大文字の「T」を続けます。また、時刻とタイムゾーン オフセットの間にもスペースは入りません。2014 年 12 月 6 日午前 10 時 30 分(太平洋標準時)の完全な datetime
日付文字列は次のようになります。
- RFC 2822
Dec 6, 2014 10:30:00 -0800
- - ISO 8601 -
2014-12-06T10:30:00-0800
警告: ここでも、文字列表現はブラウザやバージョンによって解析されない場合があります。特に、時刻とタイムゾーンを扱う場合は、日時を UTC(GMT)タイムゾーンで返すのか、オフセットして現地時間で返すのかが異なります。これも、日時文字列の使用が推奨されない理由です。
以下のタイムラインでは、日時データ型を使用して平均的な 1 日を分類します。
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); }
日付、時刻、タイムゾーン
date
または datetime
の日付コンストラクタを使用すると、ユーザーのブラウザで設定されているタイムゾーンで、目的の日付または日時が返されます。日付オブジェクトを特定のタイムゾーンに設定する方法はいくつかあります。まず、Google Charts には、timeZone
を指定できる日付形式設定ツールが用意されています。これにより、DataTable の date
と datetime
の各値のフォーマットされた値が提供されます。引数として string を new Date()
コンストラクタに渡すことも、引数を Date.UTC()
メソッドでラップすることもできます。次に例を示します。
new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))
これにより、Date オブジェクトが UTC(GMT)タイムゾーンで指定された日時に設定されます。次に、タイムゾーンに必要なオフセットを計算し、必要に応じて日付と時刻を設定できます。
日付文字列表現を使用した日時
JavaScript の DataTable オブジェクト リテラル表記法を使用してデータをシリアル化し、DataTable をビルドする場合、new Date()
コンストラクタは使用できません。代わりに、Google グラフでは、DateTable の作成時に date
または datetime
を適切にシリアル化して解析できる日付文字列表現が提供されます。この日付文字列の形式は、new
キーワードを削除するだけで、残りの式は引用符で囲みます。
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
重要: この日付文字列表現を使用する場合、new Date()
コンストラクタを使用する場合と同様に、月はゼロから始まります(1 月は 0 月、12 月は 11 か月)。
以下のスーパーボウルのタイムラインは以前と同じですが、JavaScript オブジェクト リテラル表記と日付文字列形式を使用しています。
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); }
この形式は arrayToDataTable()
メソッドでも使用できます。ただし、最初の配列で列ラベルが指定されている場合は、必要な列を type: 'date'
または 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)"] ]);
Timeofday に対応
DataTable の timeofday
列のデータ型は、3 時間または 4 桁の数値(それぞれ時間、分、秒、ミリ秒単位)の配列を受け取ります。timeofday
の使用は、値が日付に特化していないという点で date
と datetime
を使用する場合とは異なります。一方、date
と datetime
では常に日付を指定します。
たとえば、午前 8:30 の時刻は [8, 30, 0, 0]
で、4 番目の値はオプションです([8, 30, 0]
は同じ timeofday の値を出力します)。
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)); }
軸、グリッド線、目盛りの書式設定
日付、日時、時刻を扱う場合は、軸ラベル、グリッドラベル、目盛りラベルを特定の形式で書式設定することが望ましい場合があります。これにはいくつかの方法があります。
まず、hAxis.format
または vAxis.format
オプションを使用します。このオプションは、gridlines.count
オプションを省略する場合に適用されます。その場合、グラフはデフォルトで 5 に設定され、また -1 以外の数値に設定されている場合にも使用されます。これにより、日付、日時、時刻のさまざまな部分にプレースホルダ文字を使用する書式設定文字列を指定できます。プレースホルダとその仕組みの詳細については、日付フォーマッタのリファレンス、特に pattern
のセクションをご覧ください。
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); }; }
また、両軸の gridlines
と minorGridlines
に units
オプションを含めることで、特定の日付と時刻の値の書式ルールを指定することもできます。このオプションは、gridlines.count
オプションが -1 に設定されている場合にのみ使用されます。
gridlines.units
オプションはオブジェクトとして計算されるグリッド線の日付、時刻、時刻のさまざまな形式を指定できます。グラフでは、グリッド線のスペースに合う最初の形式に基づいてグリッド線が計算されます。形式は、年、月、日、時間、分、秒、ミリ秒に設定できます。
書式設定オプションは、文字列形式の配列を受け入れ、形式がラベル領域に収まるまで順番に使用します。そのため、形式を長いものから順に並べることをおすすめします。文字列の形式は、前述の日付フォーマッタのリファレンスと同じパターンを使用します。
上記のグラフでは、ビュー ウィンドウを変更すると時間の単位がマイナーからメジャーに切り替わり、オプションの形式も変わるため、hours
ユニットの形式が変わります。また、マイナーグリッドは 2 番目の短い形式を使用していることにも注意してください。これらの最初の形式は、各インスタンスのスペースに収まりません。
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']} } } }
JavaScript の日付について
JavaScript Date()
オブジェクトの詳細については、Mozilla Developer Network をご利用ください。JavaScript の日付オブジェクトの詳細については、こちら