Обзор
Примечание. JavaScript считает месяцы, начиная с нуля : январь — 0, февраль — 1 и декабрь — 11. Если вам кажется, что ваша календарная диаграмма отклоняется на месяц, вот почему.
Календарь — это визуализация, используемая для отображения активности в течение длительного периода времени, например месяцев или лет. Их лучше всего использовать, когда вы хотите проиллюстрировать, как некоторые количества варьируются в зависимости от дня недели или как они меняются с течением времени.
Календарная диаграмма может подвергнуться существенным изменениям в будущих версиях Google Charts.
Календарные диаграммы отображаются в браузере с использованием SVG или VML , в зависимости от того, что подходит для браузера пользователя. Как и все диаграммы Google, календарные диаграммы отображают всплывающие подсказки, когда пользователь наводит курсор на данные. И надо отдать должное: наша календарная диаграмма была вдохновлена визуализацией календаря D3.
Простой пример
Допустим, мы хотели показать, как менялась посещаемость спортивной команды в течение сезона. С помощью календарной диаграммы мы можем использовать яркость, чтобы указать значения и позволить людям сразу увидеть тенденции:
Вы можете навести указатель мыши на отдельные дни, чтобы увидеть базовые значения данных.
Чтобы создать календарную диаграмму, загрузите пакет calendar , а затем создайте два столбца: один для дат и один для значений. (Необязательный третий столбец для индивидуального оформления появится в будущей версии Google Charts.)
Затем заполните строки парами дата-значение, как показано ниже.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["calendar"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>
Дни
Каждый квадрат календарной диаграммы представляет день. В настоящее время цвет ячеек данных нельзя настроить, но это изменится в следующей версии Google Charts.
Если все значения данных положительны, цвета будут варьироваться от белого до синего, причем самый глубокий синий цвет указывает на самые высокие значения. Если есть отрицательные значения данных, они будут отображаться оранжевым цветом, как показано ниже.
Код этого календаря аналогичен первому, за исключением того, что строки выглядят так:
[ new Date(2013, 9, 4), 10 ],
[ new Date(2013, 9, 5), 3 ],
[ new Date(2013, 9, 7), -1 ],
[ new Date(2013, 9, 8), 2 ],
[ new Date(2013, 9, 12), -1 ],
[ new Date(2013, 9, 13), 1 ],
[ new Date(2013, 9, 15), 1 ],
[ new Date(2013, 9, 16), -4 ],
Вы можете изменить размер дней («ячеек») с помощью опции calendar.cellSize :
Здесь мы изменили calendar.cellSize на 10, уменьшив дни и, следовательно, диаграмму в целом.
var options = {
title: 'Red Sox Attendance',
calendar: { cellSize: 10 },
};
Дни без значений данных можно настроить с помощью опции noDataPattern :
Здесь мы устанавливаем светло-голубой color , а backgroundColor — чуть более темный оттенок:
var options = {
title: "Red Sox Attendance",
height: 350,
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
};
Вы можете управлять цветом границы ячейки, ее шириной и непрозрачностью с помощью calendar.cellColor :
Вам нужно быть осторожным и выбирать цвет обводки, который будет отличаться от monthOutlineColor , или выбирать низкую непрозрачность. Вот варианты диаграммы выше:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
cellColor: {
stroke: '#76a7fa',
strokeOpacity: 0.5,
strokeWidth: 1,
}
}
};
Если вы сосредоточитесь на дне на графике выше, граница будет выделена красным. Вы можете контролировать это поведение с помощью параметров calendar.focusedCellColor :
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
focusedCellColor: {
stroke: '#d3362d',
strokeOpacity: 1,
strokeWidth: 1,
}
}
};
Недели
По умолчанию дни недели обозначаются первыми буквами с воскресенья по субботу. Вы не можете изменить порядок дней, но можете изменить используемые буквы с помощью параметра calendar.daysOfWeek . Кроме того, вы можете контролировать отступы между днями недели и диаграммой с помощью calendar.dayOfWeekRightSpace и настраивать стиль текста с помощью calendar.dayOfWeekLabel :
Здесь мы меняем шрифт меток недель, добавляем отступ в 10 пикселей между метками и данными диаграммы и начинаем неделю с понедельника.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#1a8763',
bold: true,
italic: true,
},
dayOfWeekRightSpace: 10,
daysOfWeek: 'DLMMJVS',
}
};
Месяцы
По умолчанию месяцы обозначаются темно-серыми линиями. Вы можете использовать параметр calendar.monthOutlineColor для управления границами, параметр calendar.monthLabel для настройки шрифта метки и calendar.underMonthSpace для настройки заполнения метки:
Мы установили шрифт метки — темно-красный жирный курсив Times-Roman размером 12 пунктов, установили тот же цвет для контуров и добавили отступ в 16 пикселей. Неиспользуемые контуры месяцев имеют более бледный цвет того же оттенка.
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: '#981b48',
bold: true,
italic: true
},
monthOutlineColor: {
stroke: '#981b48',
strokeOpacity: 0.8,
strokeWidth: 2
},
unusedMonthOutlineColor: {
stroke: '#bc5679',
strokeOpacity: 0.8,
strokeWidth: 1
},
underMonthSpace: 16,
}
};
Годы
Годы в календарных диаграммах всегда располагаются на левом краю диаграммы и могут быть настроены с помощью calendar.yearLabel и calendar.underYearSpace :
Мы устанавливаем шрифт года — темно-зеленый жирный курсив Times-Roman размером 32 пт и добавляем десять пикселей между метками года и нижней частью диаграммы:
var options = {
title: 'Red Sox Attendance',
height: 350,
calendar: {
underYearSpace: 10, // Bottom padding for the year labels.
yearLabel: {
fontName: 'Times-Roman',
fontSize: 32,
color: '#1A8763',
bold: true,
italic: true
}
}
};
Загрузка
Имя пакета google.charts.load — "calendar" :
google.charts.load("current", {packages: ["calendar"]});
Имя класса визуализации — google.visualization.Calendar :
var visualization = new google.visualization.Calendar(container);
Формат данных
Строки: каждая строка в таблице представляет дату.
Столбцы:
| Столбец 0 | Столбец 1 | ... | Столбец N (необязательно) | |
|---|---|---|---|---|
| Цель: | Даты | Ценности | ... | Дополнительные роли |
| Тип данных: | дата, дата-время или время дня | число | ... | |
| Роль: | домен | данные | ... | |
| Дополнительные роли столбцов : | Никто | Никто | ... |
Параметры конфигурации
| Имя | |
|---|---|
| календарь.cellColor | Параметр
var options = {
calendar: {
cellColor: {
stroke: 'red', // Color the border of the squares.
strokeOpacity: 0.5, // Make the borders half transparent.
strokeWidth: 2 // ...and two pixels thick.
}
}
};
Тип: объект По умолчанию: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 } |
| календарь.cellSize | Размер квадратов календарных дней:
var options = { calendar: { cellSize: 10 } };
Тип: целое число По умолчанию: 16 |
| календарь.dayOfWeekLabel | Управляет стилем шрифта меток недель в верхней части диаграммы:
var options = {
calendar: {
dayOfWeekLabel: {
fontName: 'Times-Roman',
fontSize: 12,
color: 'black',
bold: false,
italic: false
}
}
};
Тип: объект По умолчанию: { fontName: 'sans-serif', color: '#888', bold: false, italic: false } |
| календарь.dayOfWeekRightSpace | Расстояние между правым краем меток недели и левым краем квадратов дней на графике. Тип: целое число По умолчанию: 4 |
| календарь.daysOfWeek | Однобуквенные метки, которые можно использовать с воскресенья по субботу. Тип: строка По умолчанию: 'SMTWTFS' |
| календарь.focusedCellColor | Когда пользователь фокусируется (скажем, наводит указатель мыши) на квадрат дня, календарные диаграммы выделяют этот квадрат.
var options = {
calendar:
focusedCellColor: {
stroke: 'red',
strokeOpacity: 0.8,
strokeWidth: 3
}
}
};
Тип: объект По умолчанию: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 } |
| календарь.МесяцLabel | Стиль для меток месяцев, например:
var options = {
calendar: {
monthLabel: {
fontName: 'Times-Roman',
fontSize: 16,
color: 'green',
bold: true,
italic: false
}
}
};
Тип: объект По умолчанию: { fontName: 'sans-serif', color: '#888', bold: false, italic: false } |
| календарь.месяцOutlineColor | Месяцы со значениями данных отделяются от других с помощью рамки в этом стиле.
var options = {
calendar: {
monthOutlineColor: {
stroke: 'blue',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(см. также calendar.unusedMonthOutlineColor .) Тип: объект По умолчанию: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 } |
| календарь.underMonthSpace | Количество пикселей между нижней частью меток месяца и верхней частью квадратов дня: var options = { calendar: { underMonthSpace: 12 } }; Тип: целое число По умолчанию: 6 |
| календарь.underYearSpace | Количество пикселей между самой нижней меткой года и нижней частью диаграммы: var options = { calendar: { underYearSpace: 2 } }; Тип: целое число По умолчанию: 0 |
| календарь.unusedMonthOutlineColor | Месяцы без значений данных отделяются от других с помощью рамки в этом стиле.
var options = {
calendar: {
unusedMonthOutlineColor: {
stroke: 'yellow',
strokeOpacity: 0.8,
strokeWidth: 2
}
}
};
(см. также calendar.monthOutlineColor .) Тип: объект По умолчанию: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 } |
| цветОсь | Объект, определяющий сопоставление между значениями столбца цвета и цветами или шкалой градиента. Чтобы указать свойства этого объекта, вы можете использовать буквальную запись объекта, как показано здесь: {minValue: 0, colors: ['#FF0000', '#00FF00']} Тип: объект По умолчанию: ноль |
| colorAxis.colors | Цвета для назначения значениям в визуализации. Массив строк, где каждый элемент представляет собой строку цвета HTML, например: Тип: массив цветных строк. По умолчанию: ноль |
| цветAxis.maxValue | Если присутствует, указывает максимальное значение для данных цвета диаграммы. Значения цветовых данных этого значения и выше будут отображаться как последний цвет в диапазоне Тип: номер По умолчанию: максимальное значение столбца цвета в данных диаграммы. |
| colorAxis.minValue | Если присутствует, указывает минимальное значение для данных цвета диаграммы. Значения цветовых данных этого значения и ниже будут отображаться как первый цвет в диапазоне Тип: номер По умолчанию: минимальное значение столбца цвета в данных диаграммы. |
| colorAxis.values | Если присутствует, управляет тем, как значения связаны с цветами. Каждое значение связано с соответствующим цветом в массиве Тип: массив чисел По умолчанию: ноль |
| сила IFrame | Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.) Тип: логический По умолчанию: ложь |
| высота | Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента. |
| noDataPattern | На календарных диаграммах используется полосатый диагональный узор, указывающий на отсутствие данных за определенный день. Используйте параметры
noDataPattern: {
backgroundColor: '#76a7fa',
color: '#a0c3ff'
}
Тип: объект По умолчанию: ноль |
| подсказка.isHtml | Установите значение Примечание. Настройка содержимого всплывающей подсказки HTML с помощью роли данных столбца подсказки не поддерживается визуализациями круговой диаграммы и пузырьковой диаграммы . Тип: логический По умолчанию: правда |
| ширина | Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента. |
Методы
| Метод | |
|---|---|
draw(data, options) | Рисует диаграмму. Диаграмма принимает дальнейшие вызовы методов только после запуска события Тип возврата: нет |
getBoundingBox(id) | Возвращает объект, содержащий
Значения относятся к контейнеру диаграммы. Вызовите это после того, как диаграмма будет нарисована. Тип возвращаемого значения: объект |
getSelection() | Возвращает массив выбранных объектов диаграммы. Выбираемыми объектами являются полосы, записи легенды и категории. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки имеет значение NULL), а категория — строке (индекс столбца имеет значение NULL). Для этой диаграммы в любой момент времени можно выбрать только одну сущность. Тип возвращаемого значения: Массив элементов выбора. |
setSelection() | Выбирает указанные объекты диаграммы. Отменяет любой предыдущий выбор. Выбираемыми объектами являются полосы, записи легенды и категории. Полоса соответствует ячейке в таблице данных, запись легенды — столбцу (индекс строки равен нулю), а категория — строке (индекс столбца равен нулю). Для этой диаграммы одновременно можно выбрать только одну сущность. Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
События
| Имя | |
|---|---|
error | Вызывается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение |
onmouseover | Вызывается, когда пользователь наводит указатель мыши на визуальный объект. Возвращает индекс строки и значение даты объекта. Если для сущности нет элемента таблицы данных, значение, возвращаемое для индекса строки, Свойства: строка, дата |
onmouseout | Вызывается, когда пользователь уводит указатель мыши от визуального объекта. Возвращает индекс строки и значение даты объекта. Если для сущности нет элемента таблицы данных, значение, возвращаемое для индекса строки, Строка свойств , дата |
ready | Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода Свойства: нет |
select | Запускается, когда пользователь щелкает визуальный объект. Чтобы узнать, что было выбрано, вызовите Свойства: нет |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.