簡介
date
和 datetime
資料表欄資料類型使用內建的 JavaScript 日期類別。
重要事項:在 JavaScript Date 物件中,月份則會從零開始建立索引,且漲幅為 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 世界標準時間為準的日期起算。針對該日期之前的日期和時間,則會提供負數毫秒數。
使用 addColumn()
、addRow()
和 addRows()
方法以及 arrayToDataTable()
方法手動建構 DataTable 時,可使用日期建構函式。不過,如果使用 JSON 指定資料,則必須使用字串表示法。
JavaScript Date 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
資料類型相同的日期建構函式,但現在會使用所有引數來填入時間。
或者,也可以將 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) 時區傳回,還是與當地時間的偏移和傳回時間有些差異。這也是我們不建議使用日期時間字串的另一個原因。
下方時間軸以日期時間資料類型細分平均日期。
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
的 Date 建構函式,會在使用者瀏覽器設定的時區傳回所需日期或日期。
您可以透過幾種方式達成設定 Date 物件的特定時區。首先,Google 圖表提供日期格式工具,您可以在其中指定 timeZone
。此格式將針對 DataTable 中的每個 date
和 datetime
值提供格式化值。您也可以將 string 做為引數傳遞至 new Date()
建構函式,或將引數納入 Date.UTC()
方法中,例如:
new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))
這會將日期物件設為世界標準時間 (GMT) 時區的指定日期和時間。您可以在這裡計算時區所需的偏移量,並視需要設定日期和時間。
使用日期字串表示的日期和時間
使用 JavaScript DataTable 物件常值標記法對資料進行序列化,以建立 DataTable 時,無法使用 new Date()
建構函式。相反地,Google Charts 提供了日期字串表示,可讓您在建立 DataTable 時正確地對 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)"] ]);
使用時段功能
DataTable timeofday
資料欄資料類型採用 3 或 4 位數的陣列,分別代表小時、分鐘、秒和選用的毫秒數。使用 timeofday
與使用 date
和 datetime
的做法不同,其值並非日期,而 date
和 datetime
則一律指定日期。
舉例來說,上午 8 點 30 分會是:[8, 30, 0, 0]
,而第 4 個值是選用項目 ([8, 30, 0]
會輸出相同的時段值)。
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)); }
設定軸軸、格線和 Tick 標籤的格式
使用日期、日期和日期時間時,建議您以特定方式設定軸標籤、格線標籤或刻點標籤的格式。這可透過多種方式達成。
首先,您可以使用 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
單位的格式會隨之變更,因為該營業時間的長度已從次要格線變成主要格狀,而選項的格式也會隨時間改變。另請注意,次要格式使用第二個較短的格式,因為第一個格式並不符合每個執行個體中的空間。
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 開發人員網路的實用資源。您可以前往這裡瞭解 JavaScript 日期物件