Omówienie
Typy danych „date” i „datetime” w tabeli danych korzystają z wbudowanej klasy daty JavaScript.
Ważne: w obiektach Data JavaScript miesiące są indeksowane od zera i rosną o jedenaście, gdzie 0 stycznia to 0, a 11 grudnia.
Daty i godziny za pomocą Konstruktora dat
Daty z użyciem konstruktora dat
Aby utworzyć nowy obiekt Data, wywołujesz konstruktor Date() ze słowem kluczowym new oraz argumentami określającymi komponenty daty. Te argumenty mają postać kilku liczb odpowiadających różnym właściwościom Twojej daty.
new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)
Jeśli używasz konstruktora dat z typem danych date, wystarczy, że określisz rok, miesiąc i dzień.
Konstruktor daty może też mieć format new Date(Milliseconds), gdzie Milisekundy to odległość w milisekundach określonej daty od 1 stycznia 1970 00:00:00 UTC. W przypadku dat i godzin poprzedzających określoną datę można podać ujemną liczbę milisekund.
Korzystanie z konstruktora dat jest przydatne podczas ręcznego tworzenia tabeli danych przy użyciu metod addColumn(), addRow() i addRows(), a także metody arrayToDataTable(). Jeśli jednak do określania danych używasz JSON, musisz użyć reprezentacji ciągu.
Konstruktor daty JavaScript może też zaakceptować ciąg znaków jako datę jako argument. Ten ciąg znaków może przyjmować różne formy. Niezawodne formularze 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: reprezentacja ciągu znaków w konstruktorze dat może być różnie analizowana przez różne przeglądarki i ich różne wersje, dlatego zwraca różne daty tego samego ciągu. W związku z tym nie zalecamy przekazywania ciągów znaków do konstruktora dat. Zamiast tego zalecamy używanie wartości argumentu konstruktora daty.
Oś czasu poniżej pokazuje mistrzostwo każdego sezonu NFL od roku 2000.
Poniżej znajduje się kod tworzenia tej osi czasu. Zwróć uwagę na wykorzystanie konstruktorów new Date() i liczb podanych dla każdej daty z użyciem poprzednich miesięcy.
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 w kolumnie Tabela danych datetime korzysta z tego samego konstruktora daty co typ danych date, ale do wypełnienia godziny używa teraz wszystkich argumentów.
Możesz też przekazać do konstruktora daty reprezentację ciągu datetime. Przedstawienie ciągu znaków datetime obejmuje godziny, minuty, sekundy oraz 4-cyfrowe przesunięcie czasu (np. czas pacyficzny standardowy (PST) to -0800). W przypadku specyfikacji RFC 2822 godzina i strefa czasowa są dodawane z użyciem spacji między datą a godziną oraz godziną i strefą czasową. W specyfikacji ISO 8601 nie ma spacji, a za data i następnie umieszcza się wielką literę „T”. Między czasem a przesunięciem strefy czasowej nie ma już spacji. Pełny ciąg znaków datetime w dniu 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.
Uwaga: w różnych przeglądarkach i wersjach ciągi tekstowe mogą być różnie interpretowane. Jeśli chodzi o czas i strefy czasowe, występują różnice między tym, czy data i godzina jest zwracana w strefie czasowej UTC (GMT), a może przesunięcie jest zwracane w czasie lokalnym. To inny powód, dla którego nie zalecamy korzystania z ciągów czasowych.
Poniższa oś czasu dzieli przeciętny dzień według 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 datę lub datę w strefie czasowej ustawionej przez przeglądarkę użytkownika.
Aby ustawić obiekt Data na określoną strefę czasową, możesz to zrobić na kilka sposobów. Po pierwsze, Wykresy Google udostępniają formatowanie daty, w którym można określić timeZone. Spowoduje to sformatowanie każdej wartości date i datetime w tabeli danych. Możesz też przekazać ciąg znaków jako argument do konstruktora new Date() lub dodać je do metody Date.UTC(), na przykład:
new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))
Spowoduje to ustawienie obiektu Date na określoną datę i godzinę w strefie czasowej UTC (GMT). Tutaj możesz obliczyć potrzebne przesunięcie dla strefy czasowej oraz ustawić daty i godziny.
Daty i godziny używające ciągu znaków daty
Podczas serializowania danych za pomocą notacji literalnej obiektu DataTable JavaScriptu do utworzenia tabeli DataTable nie można używać konstruktora new Date(). Zamiast tego Wykresy Google udostępniają reprezentację ciągu znaków daty, która pozwala na zserializację znaczników date lub datetime podczas tworzenia tabeli danych. Ten format daty daty wystarczy pominąć słowo kluczowe new i umieścić pozostałe wyrażenie w cudzysłowie:
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
Ważne: w przypadku ciągu znaków z datą, czyli w przypadku konstruktora new Date(), miesiące są indeksowane od zera (styczeń 0 miesiąc, grudzień 11).
Poniżej przedstawiono tę samą oś czasu z Super Bowl, ale teraz w notacji obiektu JavaScript i w formacie ciągu znaków z datą.
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żna też używać w metodzie arrayToDataTable(), pod warunkiem że w pierwszej tablicy, w której określono etykiety kolumn, zadeklarowana kolumna jest określona 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 w kolumnie „Tabela danych” timeofday składa się z 3 lub 4 cyfr i oznacza odpowiednio godziny, minuty, sekundy oraz opcjonalnie milisekundy. Używanie właściwości timeofday różni się od używania właściwości date i datetime, ponieważ wartości nie odnoszą się do konkretnej daty, a wartości date i datetime zawsze określają datę.
np. godzina 8:30 będzie wyglądać tak: [8, 30, 0, 0], gdzie czwarta wartość będzie opcjonalna ([8, 30, 0] zwróci tę samą wartość pory 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, godziną i godziną warto sformatować etykiety osi, etykiety siatki lub zaznaczyć etykiety w określony sposób. Jest to możliwe na kilka sposobów.
Najpierw możesz użyć opcji hAxis.format lub vAxis.format. Ta opcja ma zastosowanie, gdy opcja gridlines.count zostanie pominięta. W takim przypadku domyślna liczba na wykresie wynosi 5, a jeśli jest ustawiona na inną niż 1. Dzięki temu możesz określić ciąg formatu, w którym użyjesz liter zastępczych w różnych częściach daty, godziny i godziny dnia. Więcej informacji o zmiennych i ich działaniu znajdziesz w sekcji dotyczącej formatowania daty, a zwłaszcza 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ż podać reguły formatowania dotyczące określonych jednostek daty i godziny. W tym celu dodaj opcję units w gridlines i minorGridlines na obu osiach. Ta opcja będzie używana tylko wtedy, gdy opcja gridlines.count będzie mieć wartość -1.
Opcja gridlines.units to obiekt, w którym podajesz format różnych aspektów daty/godziny/godziny dla obliczonej linii siatki, a wykres pokazuje linie siatki na podstawie pierwszego formatu, który pasuje do miejsca na etykietę siatki siatki.
Formaty możesz ustawiać na lata, miesiące, dni, godziny, minuty, sekundy i milisekundy.
Opcja formatowania obsługuje wiele formatów ciągu znaków. Będzie ona używana w określonej kolejności, dopóki format nie będzie pasował do obszaru etykiety. Z tego powodu zalecamy podanie formatu danych w kolejności od najstarszego do najkrótszego. Formaty ciągów używają tych samych wzorców co wspomniane wcześniej narzędzie do formatowania dat.
Na powyższym wykresie, gdy zmieniasz okno widoku, format jednostki hours zmienia się zależnie od tego, czy godziny zmieniły się z obrazów głównych na linie siatki, a format w opcjach się zmienia. Zwróć też uwagę, że linie pomocnicze używają drugiego, krótszego formatu, ponieważ pierwsze formaty nie pasują do miejsca w każdej instancji.
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(), doskonałym źródłem informacji będzie Mozilla Developer Network. Znajdziesz tam informacje o obiektach JavaScript Data.