Заголовок панели
Заголовки задают название и подписи для панельных диаграмм. Название заголовка описывает поле, по которому диаграмма разбивается на панели, а подписи — значение этого поля для каждой отдельной диаграммы.
По умолчанию Vega-Lite автоматически создаёт заголовки со стандартными свойствами для каналов row и column панельного представления. Чтобы изменить свойства заголовка, задайте объект header в определении поля строки или столбца.
Помимо свойства header в определении поля строки или столбца, можно задать значения по умолчанию для всех заголовков через конфигурацию заголовков объекта config: config: {header: {...}}.
Содержание страницы
Свойства заголовка
// Спецификация одиночного представления или слоёв
{
...,
"mark/layer": ...,
"encoding": {
"row": {
"field": ...,
"type": ...,
"header": {...}, // Заголовок панели
...
},
"x": ...,
"y": ...,
...
}
}
// Спецификация панельной диаграммы
{
...,
"facet": {
"row/column": {
"field": ...,
"type": ...,
"header": {...}, // Заголовок панели
...
},
...
},
"spec": ...
}
Объект header в определении поля строки или столбца может содержать следующие группы свойств.
Общие настройки
| Свойство | Тип | Описание |
|---|---|---|
title |
Text, null | Название поля. null убирает название.По умолчанию: формируется из имени поля и преобразований aggregate, bin и timeUnit. Функция агрегирования включается в название, например "Sum of Profit"; разбиение и единица времени указываются в скобках, например "Profit (binned)" или "Transaction Date (year-month)". Без преобразований используется имя поля.Формат названия можно изменить свойством fieldTitle в config или функцией fieldTitle в параметрах compile. Если задано и название поля, и title оси, заголовка панели или легенды, используется название оси, заголовка или легенды. |
См. также: конфигурации стилей guide-title и guide-label позволяют задавать общее оформление подписей и названий осей, легенд и заголовков панелей.
Подписи панелей
| Свойство | Тип | Описание |
|---|---|---|
format |
Format | Спецификатор формата чисел и дат/времени в подписях осей, легенд, заголовков панелей и в текстовых примитивах. При formatType: "number", например для количественных полей, используется строка шаблона числового формата D3.При formatType: "time", например для временных полей, используется либо строка статического формата времени D3, либо объект динамического формата времени, выбирающий формат по детализации входной даты — границе года, месяца, дня, часа и т. п.При собственном formatType это значение передаётся зарегистрированной функции как format вместе с datum.value.По умолчанию: определяется numberFormat или timeFormat конфигурации. |
formatType |
string | Тип формата подписей: "number", "time" или зарегистрированный собственный тип.По умолчанию: "time" для временных полей и порядковых/номинальных полей с timeUnit; "number" для количественных полей и порядковых/номинальных полей без timeUnit. |
labelAlign |
Align, ExprRef | Горизонтальное выравнивание подписей заголовка: "left", "center" или "right". |
labelAnchor |
TitleAnchor | Положение привязки подписей: "start", "middle" или "end". Например, при расположении сверху эти значения соответствуют выравниванию слева, по центру и справа. |
labelAngle |
number | Угол поворота подписей, в градусах от −360 до 360. По умолчанию: 0 для заголовков столбцов и -90 для заголовков строк. |
labelBaseline |
TextBaseline, ExprRef | Вертикальная базовая линия подписей: "alphabetic" (по умолчанию), "top", "middle", "bottom", "line-top" или "line-bottom". Варианты line-top и line-bottom действуют подобно top и bottom, но рассчитываются относительно высоты строки labelLineHeight, а не только размера шрифта labelFontSize. |
labelColor |
Color, ExprRef | Цвет подписи: шестнадцатеричный код или обычное имя цвета. |
labelExpr |
string | Выражение Vega для изменения подписей. Примечание: текст подписи и её значение доступны через свойства label и value объекта datum, содержащего данные заголовка. |
labelFont |
string, ExprRef | Гарнитура шрифта подписи. |
labelFontSize |
number, ExprRef | Размер шрифта подписи в пикселях, неотрицательный. |
labelFontStyle |
FontStyle, ExprRef | Начертание шрифта подписи. |
labelFontWeight |
FontWeight, ExprRef | Насыщенность шрифта подписи. |
labelLimit |
number, ExprRef | Максимальная ширина подписи в пикселях. Если ширина отрисованного текста превышает предел, текст автоматически обрезается. По умолчанию: 0, то есть без ограничения. |
labelLineHeight |
number, ExprRef | Высота строки в пикселях для многострочных подписей или текста подписи с базовой линией "line-top" / "line-bottom". |
labelOrient |
Orient | Сторона расположения подписи: "top", "bottom", "left" или "right". |
labelPadding |
number, ExprRef | Отступ между подписью заголовка панели и диаграммой, в пикселях. По умолчанию: 10. |
Название поля
| Свойство | Тип | Описание |
|---|---|---|
titleAlign |
Align, ExprRef | Горизонтальное выравнивание названия заголовка относительно точки привязки. |
titleAnchor |
TitleAnchor | Положение привязки названия: "start", "middle" или "end". Например, при расположении сверху эти значения соответствуют выравниванию слева, по центру и справа. |
titleAngle |
number | Угол поворота названия, в градусах от −360 до 360. По умолчанию: 0. |
titleBaseline |
TextBaseline, ExprRef | Вертикальная базовая линия названия: "alphabetic", "top", "middle", "bottom", "line-top" или "line-bottom". Варианты line-top и line-bottom действуют подобно top и bottom, но рассчитываются относительно titleLineHeight, а не только titleFontSize.По умолчанию: "middle". |
titleColor |
Color, ExprRef | Цвет названия: шестнадцатеричный код или обычное имя цвета. |
titleFont |
string, ExprRef | Гарнитура шрифта названия, например "Helvetica Neue". |
titleFontWeight |
FontWeight, ExprRef | Насыщенность шрифта названия: строка, например "bold" или "normal", либо число 100, 200, 300, …, 900, где "normal" соответствует 400, а "bold" — 700. |
titleFontSize |
number, ExprRef | Размер шрифта названия, неотрицательный. |
titleFontStyle |
FontStyle, ExprRef | Начертание шрифта названия. |
titleLimit |
number, ExprRef | Максимальная ширина названия в пикселях. Если ширина отрисованного текста превышает предел, текст автоматически обрезается. По умолчанию: 0, то есть без ограничения. |
titleLineHeight |
number, ExprRef | Высота строки в пикселях для многострочного названия или названия с базовой линией "line-top" / "line-bottom". |
titleOrient |
Orient | Сторона расположения названия: "top", "bottom", "left" или "right". |
titlePadding |
number, ExprRef | Отступ между названием заголовка панели и подписью, в пикселях. По умолчанию: 10. |
Пример
В этом примере свойства заголовка изменяют размер шрифта названия и подписей панельной диаграммы.
Настройка заголовков по умолчанию
// Спецификация представления верхнего уровня
{
...,
"config": {
"header": {...}, // Заголовок панели
"headerRow": {...},
"headerColumn": {...},
"headerFacet": {...},
...
}
}
Свойство header объекта config верхнего уровня задаёт значения по умолчанию для всех заголовков. Свойства заголовка, заданные в определении поля строки, столбца или панели, переопределяют эти значения. Дополнительные блоки свойств позволяют настраивать конкретные виды заголовков по каналам разбиения: "headerRow", "headerColumn" и "headerFacet".
Конфигурация заголовков может содержать любые свойства заголовка.