Обзор
Типы данных столбцов DataTable date и datetime используют встроенный класс Date JavaScript.
Важно: в объектах JavaScript Date месяцы индексируются, начиная с нуля и заканчивая одиннадцатью, при этом январь — это месяц 0, а декабрь — месяц 11.
Даты и время с использованием конструктора даты
Даты с использованием конструктора дат
Чтобы создать новый объект Date, вы вызываете конструктор Date() с ключевым словом new и аргументами для указания компонентов даты. Эти аргументы принимают форму нескольких чисел, соответствующих различным свойствам вашей даты.
new Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)
При использовании конструктора Date с типом данных date вам нужно указать только год, месяц и день.
Конструктор Date также может иметь форму: new Date(Milliseconds) , где Миллисекунды — это расстояние в миллисекундах от желаемой даты с 00:00:00 UTC 1 января 1970 года. Для дат и времени, предшествующих этой дате, будет указано отрицательное число миллисекунд.
Использование конструктора Date полезно при создании DataTable вручную с помощью методов addColumn() , addRow() и addRows() , а также метода arrayToDataTable() . Однако если для указания данных используется JSON, необходимо использовать строковое представление .
Конструктор даты JavaScript также может принимать строковое представление даты в качестве аргумента. Эта строка может принимать несколько разных форм. Наиболее надежные формы соответствуют либо спецификации 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'))
Предупреждение. Строковое представление в конструкторе Date может анализироваться по-разному в разных браузерах и разных версиях браузеров, в результате чего для одной и той же строки возвращаются разные даты. Таким образом, не рекомендуется передавать строки конструктору Date. Вместо этого рекомендуется использовать в качестве аргументов конструктора Date только числа.
На временной шкале ниже показаны чемпионы Суперкубка каждого сезона НФЛ, начиная с 2000 года.
Ниже приведен код для создания этой временной шкалы. Обратите внимание на использование 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);
}
Datetime с использованием конструктора Date
Тип данных столбца datetime DataTable использует тот же конструктор Date, что и тип данных date , но теперь использует все аргументы для заполнения времени.
В качестве альтернативы в конструктор Date также можно передать строковое представление datetime . Строковое представление datetime состоит из сложения часов, минут и секунд в дополнение к 4-значному смещению часового пояса (например, стандартное тихоокеанское время (PST) — -0800). В спецификации RFC 2822 время и часовой пояс добавляются с пробелами между датой и временем, а также временем и часовым поясом. В спецификации ISO 8601 нет пробелов, вместо этого за датой следует заглавная буква «T», обозначающая компонент времени. Между временем и смещением часового пояса также нет пробела. Полная строка даты и datetime для 6 декабря 2014 г. в 10:30 по тихоокеанскому стандартному времени будет выглядеть так:
- RFC 2822 —
Dec 6, 2014 10:30:00 -0800. - ISO 8601 —
2014-12-06T10:30:00-0800.
Предупреждение. Опять же, строковое представление может анализироваться по-разному в разных браузерах/версиях. Примечательно, что при работе со временем и часовыми поясами существуют различия в том, возвращается ли дата и время с часовым поясом UTC (GMT) или смещается и возвращается по местному времени. Это еще одна причина, по которой не рекомендуется использовать строки даты и времени.
На приведенной ниже временной шкале показан средний день с использованием типа данных datetime.
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 для date или datetime вернет желаемую дату или дату и время в часовом поясе, установленном браузером пользователя. Установить для объекта Date определенный часовой пояс можно несколькими способами. Во-первых, Google Charts предоставляет форматировщик даты , в котором вы можете указать timeZone . Это предоставит форматированное значение для каждого значения date и datetime в вашем DataTable. Вы также можете передать строку в качестве аргумента new Date() или обернуть свои аргументы в метод Date.UTC() , например:
new Date(Date.UTC(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds))
Это установит для объекта Date указанную дату и время в часовом поясе UTC (GMT). Отсюда вы можете рассчитать желаемое смещение для часового пояса и установить дату и время по своему желанию.
Даты и время с использованием представления строки даты
При сериализации данных с использованием нотации объекта DataTable в JavaScript для построения DataTable new Date() использовать нельзя. Вместо этого Google Charts предоставляет строковое представление даты, которое позволяет сериализовать и правильно анализировать date или datetime при создании DataTable. Этот формат строки даты просто удаляет new ключевое слово и заключает оставшееся выражение в кавычки:
"Date(Year, Month, Day, Hours, Minutes, Seconds, Milliseconds)"
Важно: при использовании этого представления строки даты, как и при использовании new Date() , месяцы индексируются, начиная с нуля (январь — месяц 0, декабрь — месяц 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
Тип данных столбца timeofday DataTable принимает массив из 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));
}
Форматирование меток оси, линии сетки и делений
При работе с датами, датой и временем дня может потребоваться определенным образом отформатировать метки осей, метки линий сетки или метки делений. Этого можно добиться несколькими способами.
Во-первых, вы можете использовать опцию 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);
};
}
Вы также можете предоставить правила форматирования для определенных единиц значений даты и времени, включив параметр units в разделах gridlines и minorGridlines для обеих осей. Этот параметр будет использоваться только в том случае, если для gridlines.count установлено значение -1.
Параметр gridlines.units — это объект, в котором вы указываете формат для различных аспектов даты/даты/времени дня для вычисленной линии сетки, и ваша диаграмма будет вычислять линии сетки на основе первого формата, который соответствует пространству для метки линии сетки. Вы можете установить форматы лет, месяцев, дней, часов, минут, секунд и миллисекунд.
Опция формата принимает массив строковых форматов и будет использовать их по порядку, пока формат не будет соответствовать области метки. По этой причине рекомендуется перечислять форматы в порядке от самого длинного к самому короткому. В строковых форматах используются те же шаблоны, что и в справочнике по форматированию даты, упомянутом ранее.
Обратите внимание, что на приведенной выше диаграмме при изменении окна просмотра формат единицы измерения hours меняется, поскольку часы переключаются с второстепенных линий сетки на основные, а вместе с ними меняется и формат в параметрах. Также обратите внимание, что majorGridlines используют вторые, более короткие форматы, поскольку первые форматы не помещаются в пространство в каждом экземпляре.
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 — отличный ресурс. Там вы можете узнать все об объектах Date в JavaScript.