Omówienie
Typy danych kolumn DataTable date i datetime używają wbudowanej klasy JavaScript Date.
Ważne: w obiektach daty w języku JavaScript miesiące są indeksowane, zaczynając od zera i kończąc na jedenastu, przy czym styczeń to miesiąc 0, a grudzień to miesiąc 11.
Daty i godziny za pomocą konstruktora dat
Daty z konstruktorem dat
Aby utworzyć nowy obiekt Date, wywołaj konstruktor Date() ze słowem kluczowym new i argumentami określającymi komponenty daty. Argumenty te przyjmują formę kilku liczb odpowiadających różnym właściwościom daty.
new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)
Jeśli używasz konstruktora Data z typem danych date, musisz tylko określić rok, miesiąc i dzień.
Konstruktor daty może też mieć postać: new Date(Milliseconds), gdzie milisekundy to odległość od wybranej daty od 1 stycznia 1970 r. do godziny 00:00:00 czasu UTC. W przypadku dat i godzin sprzed tej daty zostanie podana ujemna liczba milisekund.
Użycie konstruktora daty jest przydatne podczas ręcznego tworzenia tabeli DataTable za pomocą metod addColumn(), addRow() i addRows() oraz arrayToDataTable(). Jeśli jednak do określania danych używasz formatu JSON, musisz użyć reprezentacji ciągu znaków.
Konstruktor daty w JavaScripcie może także akceptować datę w postaci ciągu jako argumentu. Ten ciąg znaków może mieć kilka różnych postaci. Najbardziej niezawodne formy są zgodne ze specyfikacją RFC 2822 lub specyfikacją ISO 8601. Dostępne formaty:
-
RFC 2822 —
'MMM DD, YYYY'lub'DD MMM, YYYY'(przykład:new Date('Jan 1, 2015')lubnew Date('1 Jan, 2015')) -
ISO 8601 –
'YYYY-MM-DD'(przykład:new Date('2015-01-01'))
Ostrzeżenie: ciąg znaków w konstruktorze daty może być inaczej analizowany przez różne przeglądarki i ich wersje, przez co zwraca różne daty dla tego samego ciągu. W związku z tym nie zalecamy przekazywania ciągów znaków do konstruktora daty. Zalecamy, aby jako argumenty konstruktora daty używać tylko liczb.
Oś czasu poniżej pokazuje mistrzów Super Bowl w każdym sezonie NFL od roku 2000.
Poniżej znajduje się kod pozwalający utworzyć tę oś czasu. Zwróć uwagę na użycie konstruktorów new Date() oraz liczby podane dla każdej daty przy użyciu miesięcy od 0 (jak wspomniano wcześniej).
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);
}
Daty i godziny za pomocą konstruktora dat
Typ danych kolumny datetime w tabeli danych korzysta z tego samego konstruktora daty co typ danych date, ale teraz używa wszystkich argumentów do wypełniania godziny.
Do konstruktora daty można też przekazać ciąg znaków reprezentujący wartość datetime. Reprezentacja funkcji datetime w postaci ciągu obejmuje dodanie godzin, minut i sekund oraz 4-cyfrowego przesunięcia strefy czasowej (np. czas pacyficzny standardowy (PST) to -0800). Zgodnie ze specyfikacją RFC 2822 godzina i strefa czasowa są dodawane spacjami między datą i godziną oraz godziną i strefą czasową. W specyfikacji ISO 8601 nie ma spacji. Po dacie następuje litera „T” oznaczająca czas. Między czasem a przesunięciem strefy czasowej nie ma też spacji. Pełny ciąg daty datetime z 6 grudnia 2014 r. o 10:30 czasu PST to:
- RFC 2822 –
Dec 6, 2014 10:30:00 -0800. - ISO 8601 –
2014-12-06T10:30:00-0800.
Ostrzeżenie: ciąg znaków może być różnie interpretowany w różnych przeglądarkach i wersjach. Zwłaszcza w przypadku czasu i stref czasowych występuje różnica pod względem tego, czy data i godzina jest zwracana w strefie czasowej UTC (GMT), czy też jest przesunięta i zwracana w czasie lokalnym. To jeszcze jeden powód, dla którego nie zalecamy używania ciągów znaków daty i godziny.
Poniższa oś czasu przedstawia przeciętny dzień z zastosowaniem typu danych „data i godzina”.
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);
}
Daty, godziny i strefy czasowe
Użycie konstruktora daty (date lub datetime) zwróci żądaną datę lub datę i godzinę w strefie czasowej ustawionej w przeglądarce użytkownika.
Ustawienie obiektu Date na określonej strefie czasowej można ustawić na kilka sposobów. Po pierwsze, Wykresy Google udostępniają narzędzie do formatowania dat, w którym można określić właściwość timeZone. Dzięki temu uzyskasz sformatowaną wartość dla każdej z wartości date i datetime w tabeli danych. Możesz też przekazać ciąg znaków jako argument do konstruktora new Date() lub spakować argumenty w metodzie Date.UTC(), na przykład:
new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))
Spowoduje to ustawienie obiektu Date z określoną datą i godziną w strefie czasowej UTC (GMT). Możesz w nim obliczyć przesunięcie strefy czasowej i ustawić daty i godziny według potrzeb.
Daty i godziny z użyciem ciągu tekstowego daty
Podczas serializacji danych w JavaScripcie notacji literału obiektu DataTable w celu utworzenia tabeli DataTable nie można używać konstruktora new Date(). Zamiast tego Wykresy Google udostępniają ciąg tekstowy zawierający datę, który pozwala na serializację i analizę pól date lub datetime podczas tworzenia tabeli DataTable. Ten format ciągu znaków daty powoduje po prostu usunięcie słowa kluczowego new i umieszczanie pozostałego wyrażenia w cudzysłowach:
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
Ważne: gdy używasz tego ciągu znaków daty, np. gdy używasz konstruktora new Date(), miesiące są indeksowane od 0 (styczeń to miesiąc 0, a grudzień to miesiąc 11).
Poniżej ta sama oś czasu Super Bowl, ale teraz korzystamy z notacji literału obiektu JavaScript i formatu ciągu daty.
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);
}
Tego formatu możesz też użyć w metodzie arrayToDataTable(), pod warunkiem że w pierwszej tablicy, w której określone są etykiety kolumn, zadeklarujesz potrzebną kolumnę jako type: 'date' lub 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)"]
]);
Praca z porą dnia
Typ danych kolumny DataTable timeofday przyjmuje tablicę złożoną z 3 lub 4 liczb, reprezentujących odpowiednio godziny, minuty, sekundy i opcjonalnie milisekundy. Użycie właściwości timeofday różni się od użycia właściwości date i datetime tym, że wartości nie odnoszą się konkretnie do daty, natomiast właściwości date i datetime zawsze określają datę.
Na przykład godzina 8:30 będzie wyglądać tak: [8, 30, 0, 0], gdzie czwarta wartość jest opcjonalna ([8, 30, 0] zwróci tę samą wartość „pora dnia”).
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));
}
Formatowanie osi, linii siatki i etykiet znaczników
Podczas pracy z datami, datą i godziną i godziną może być pożądane formatowanie etykiet osi i linii siatki lub etykiet znaczników. Można to osiągnąć na kilka sposobów.
Po pierwsze, możesz użyć opcji hAxis.format lub vAxis.format. Ta opcja jest stosowana, gdy opcja gridlines.count jest pominięta. W takim przypadku domyślnie liczba na wykresie wynosi 5, a także gdy ustawisz wartość inną niż -1. Dzięki temu możesz podać ciąg formatu, w którym będziesz używać liter zastępczych w odniesieniu do różnych części daty, daty, godziny i godziny. Więcej informacji o obiektach zastępczych i ich działaniu znajdziesz w dokumentacji narzędzia date formatter, a zwłaszcza w sekcji 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);
};
}
Możesz też określić reguły formatowania dla określonych jednostek wartości daty i godziny. W tym celu dodaj opcję units w kolumnie gridlines i minorGridlines w przypadku obu osi. Ta opcja jest używana tylko wtedy, gdy opcja gridlines.count ma wartość -1.
Opcja gridlines.units to obiekt, w którym określasz format różnych aspektów daty, daty, godziny i godziny obliczonej linii siatki, a wykres oblicza linie siatki na podstawie pierwszego formatu, który mieści się na etykietę linii siatki.
Możesz ustawić formaty dla lat, miesięcy, dni, godzin, minut, sekund i milisekund.
Opcja formatu akceptuje tablicę formatów ciągów znaków i będzie używać ich po kolei, dopóki format nie pasuje do obszaru etykiety. Dlatego zalecamy listę formatów w kolejności od najdłuższego do najkrótszego. Formaty ciągów znaków korzystają z tych samych wzorców, co wspomniane wcześniej odwołanie do formatowania daty.
Pamiętaj, że na powyższym wykresie, gdy zmieniasz okno widoku, zmienia się format jednostki hours, biorąc pod uwagę, że godziny pracy zmieniają się z mniejszych linii siatki na główne, a format w opcjach zmienia się wraz z nimi. Zwróć też uwagę, że w przypadku obiektów podrzędnych używają drugiego, krótszego formatu, ponieważ pierwsze formaty nie mieszczą się w poszczególnych instancjach.
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']}
}
}
}
Więcej informacji o datach JavaScript
Jeśli chcesz dowiedzieć się więcej o obiekcie JavaScript Date(), odwiedź witrynę Mozilla Developer Network. Znajdziesz tam informacje o
obiektach JavaScript Date