Ось

Оси предоставляют линии, деления и подписи, показывающие, как диапазон позиций соответствует диапазону данных. Проще говоря, оси визуализируют шкалы.

По умолчанию Vega-Lite автоматически создаёт оси со стандартными свойствами для каналов x и y, когда они кодируют поля данных. Свойство axis в определении поля канала X или Y можно задать объектом для настройки свойств оси либо установить в null, чтобы удалить ось.

Помимо axis в определении поля, объект config предоставляет конфигурацию осей (config: {axis: {...}}), задающую свойства по умолчанию для всех осей.

Содержание страницы

Свойства оси

// Спецификация одиночного представления или слоя
{
  ...,
  "mark/layer": ...,
  "encoding": {
    "x": {
      "field": ...,
      "type": ...,
      "axis": {                // Ось
        ...
      },
      ...
    },
    "y": ...,
    ...
  }
}

Для настройки оси задайте объект axis в определении канала кодирования. В этом разделе перечислены все свойства осей.

См. также: интерактивная статья «A Guide to Guides: Axes & Legends in Vega» демонстрирует оси и легенды в базовом языке Vega.

Общие свойства

Свойство Тип Описание
aria boolean, ExprRef Включать ли атрибуты ARIA (только при выводе SVG). При false группа SVG получает aria-hidden, удаляя ось из дерева доступности ARIA.

По умолчанию: true.
bandPosition number, ExprRef Доля интерполяции, определяющая положение делений оси полосовой шкалы band. 0 помещает деления у левого края полос, 0.5 — в середине.

По умолчанию: 0.5.
description string, ExprRef Текстовое описание оси для доступности ARIA (только при выводе SVG). Если aria равно true, атрибут aria-label получает это описание. Если описание не задано, оно создаётся автоматически.
maxExtent number, ExprRef Максимальный размер пространства в пикселях, занимаемого делениями и подписями оси. Определяет максимальное смещение названия оси.

По умолчанию: не задано (undefined).
minExtent number, ExprRef Минимальный размер пространства в пикселях, занимаемого делениями и подписями оси. Определяет минимальное смещение названия оси.

По умолчанию: 30 для оси Y; не задано (undefined) для оси X.
orient AxisOrient, ExprRef Ориентация оси: "top", "bottom", "left" или "right". Позволяет уточнить тип оси, например разместить ось Y у правого края диаграммы.

По умолчанию: "bottom" для X, "left" для Y.
offset number, ExprRef Смещение оси от края содержащей группы или прямоугольника данных, в пикселях.

По умолчанию: offset конфигурации осей, обычно 0.
position number, ExprRef Положение привязки оси в пикселях. Для осей X сверху или снизу задаёт координату X группы оси; для осей Y слева или справа — координату Y группы оси.

По умолчанию: 0.
style string, string[] Строка или массив строк с именами собственных стилей оси. Стиль — именованный набор свойств в конфигурации стилей. В массиве более поздние стили переопределяют ранние.

По умолчанию: не задано.

Заданный стиль дополняет стандартный. Например, ось X со "style": "foo" использует config.axisX и config.style.foo; собственный стиль foo имеет более высокий приоритет.
translate number, ExprRef Смещение пространства координат при размещении оси. По умолчанию оси сдвигаются на 0.5 пикселя по X и Y для согласования обводок с пиксельной сеткой. Для векторного вывода такие поправки могут быть нежелательны: значение можно изменить, например на ноль.

По умолчанию: 0.5.
zindex number Неотрицательное целое число, определяющее порядок наложения оси. При 0 ось рисуется позади элементов диаграммы; 1 или больше размещает её поверх них.

По умолчанию: 0 — позади примитивов.

Пример: minExtent для выравнивания осей нескольких представлений

Vega-Lite рассчитывает место под подписи автоматически. Чтобы выровнять оси разных представлений, можно явно задать minExtent и, при необходимости, maxExtent:

Линия оси

Свойство Тип Описание
domain boolean Включать ли базовую линию оси.

По умолчанию: true.
domainCap StrokeCap, ExprRef Форма концов обводки линии оси: "butt", "round" или "square".

По умолчанию: "butt".
domainColor null, Color, ExprRef Цвет линии оси.

По умолчанию: "gray".
domainOpacity number, ExprRef Непрозрачность линии оси.
domainWidth number, ExprRef Толщина обводки линии оси.

По умолчанию: 1.
domainDash number[], ExprRef Массив чередующихся длин штрихов и промежутков [штрих, промежуток] для пунктирной линии оси.
domainDashOffset number, ExprRef Начальное смещение в пикселях при рисовании линии оси по массиву штрихов.

Подписи

Свойство Тип Описание
format Format Спецификатор формата чисел и дат/времени в подписях осей, легенд, заголовков панелей и в текстовых примитивах.

При formatType: "number", например для количественных полей, используется строка шаблона числового формата D3.

При formatType: "time", например для временных полей, используется либо строка статического формата времени D3, либо объект динамического формата времени, выбирающий формат по детализации входной даты — границе года, месяца, дня, часа и т. п.

При собственном formatType это значение передаётся зарегистрированной функции как format вместе с datum.value.

По умолчанию: определяется numberFormat или timeFormat конфигурации.
formatType string Тип формата подписей: "number", "time" или зарегистрированный собственный тип.

По умолчанию: "time" для временных полей и порядковых/номинальных полей с timeUnit; "number" для количественных полей и порядковых/номинальных полей без timeUnit.
labels boolean Включать ли подписи делений оси.

По умолчанию: true.
labelAlign Align, ExprRef, ConditionalAxisLabelAlign Горизонтальное выравнивание текста подписей делений. Переопределяет стандартную настройку для текущей ориентации оси.
labelAngle number, ExprRef Угол поворота подписей оси, от −360 до 360 градусов.

По умолчанию: -90 для номинальных и порядковых полей, иначе 0.
labelBaseline TextBaseline, ExprRef, ConditionalAxisLabelBaseline Вертикальная базовая линия подписей делений. Переопределяет стандартную настройку для текущей ориентации оси. Значения: "alphabetic" (по умолчанию), "top", "middle", "bottom", "line-top", "line-bottom". Варианты line-top и line-bottom действуют подобно top и bottom, но вычисляются относительно высоты строки, а не только размера шрифта.
labelBound number, boolean, ExprRef Скрывать ли подписи, выходящие за диапазон оси. false (по умолчанию) отключает проверку границ. true скрывает подписи, выходящие более чем на один пиксель. Число задаёт допустимый выход ограничивающего прямоугольника подписи за диапазон, в пикселях.

По умолчанию: false.
labelColor null, Color, ExprRef, ConditionalAxisColor Цвет подписи деления: шестнадцатеричный код или обычное имя цвета.
labelExpr string Выражение Vega для настройки подписей.

Примечание: текст и значение подписи доступны через свойства label и value объекта datum, используемого осью.
labelFlush boolean, number Выравнивать ли первую и последнюю подписи по краям диапазона шкалы. На горизонтальной оси первая выравнивается влево, последняя — вправо; на вертикальной используются базовые линии снизу и сверху.

Число также задаёт дополнительное смещение крайних подписей наружу: например, 2 выравнивает их по краям и сдвигает на два пикселя от центра оси. Это может улучшить визуальную связь подписей с делениями.

По умолчанию: true для непрерывной шкалы X, иначе false.
labelFlushOffset number, ExprRef Дополнительное смещение выровненных по краям подписей, в пикселях. Например, 2 сдвигает их на два пикселя наружу от центра оси, улучшая визуальную связь с делениями.

По умолчанию: 0.
labelFont string, ExprRef, ConditionalAxisString Гарнитура шрифта подписи деления.
labelFontSize number, ExprRef, ConditionalAxisNumber Размер шрифта подписи в пикселях, неотрицательный.
labelFontStyle FontStyle, ExprRef, ConditionalAxisLabelFontStyle Начертание шрифта подписи деления.
labelFontWeight FontWeight, ExprRef, ConditionalAxisLabelFontWeight Насыщенность шрифта подписей делений оси.
labelLimit number, ExprRef Максимальная допустимая ширина подписей делений оси, в пикселях.

По умолчанию: 180.
labelLineHeight number, ExprRef Высота строки в пикселях для многострочной подписи или подписи с базовой линией "line-top" / "line-bottom".
labelOffset number, ExprRef, ConditionalAxisNumber Смещение положения подписей в пикселях, дополнительно к tickOffset.

По умолчанию: 0.
labelOpacity number, ExprRef, ConditionalAxisNumber Непрозрачность подписей.
labelOverlap LabelOverlap, ExprRef Стратегия устранения пересечения подписей оси. false отключает устранение. true или "parity" удаляет каждую вторую подпись; подходит обычным линейным осям. "greedy" последовательно просматривает подписи, удаляя каждую, пересекающую последнюю видимую; часто лучше работает для логарифмических осей.

По умолчанию: true для неноминальных полей с нелогарифмической шкалой, "greedy" для логарифмических шкал, иначе false.
labelPadding number, ExprRef, ConditionalAxisNumber Отступ между подписями и делениями, в пикселях.

По умолчанию: 2.
labelSeparation number, ExprRef Минимальное расстояние между ограничивающими прямоугольниками подписей, при котором они считаются непересекающимися. Игнорируется, если устранение пересечения labelOverlap выключено.

По умолчанию: 0.

См. также: стиль guide-label, общий для подписей осей, легенд и заголовков панелей.

Пример: labelExpr для первой буквы названия месяца

Деления

Свойство Тип Описание
ticks boolean Включать ли деления оси.

По умолчанию: true.
tickBand "center", "extent", ExprRef Для полосовой шкалы задаёт положение делений и линий сетки: "center" (по умолчанию) — в центре полосы; "extent" — у границ, чтобы обозначить интервалы.
tickCap StrokeCap, ExprRef Форма концов линий делений: "butt", "round" или "square".

По умолчанию: "butt".
tickColor null, Color, ExprRef, ConditionalAxisColor Цвет делений оси.

По умолчанию: "gray".
tickCount number, TimeInterval, TimeIntervalStep, ExprRef Желаемое число делений оси количественной шкалы. Фактическое число может отличаться, чтобы значения были удобными (кратными 2, 5, 10) и помещались в диапазон шкалы.

Для шкал time и utc можно задать интервал времени: "millisecond", "second", "minute", "hour", "day", "week", "month", "year"; либо объект, например {"interval": "month", "step": 3}, создающий деления на границах кварталов (январь, апрель, июль, октябрь).

По умолчанию: ceil(width / 40) для X и ceil(height / 40) для Y. Числовое значение неотрицательное.
tickDash number[], ExprRef, ConditionalAxisNumberArray Массив чередующихся длин штрихов и промежутков [штрих, промежуток] для пунктирных линий делений.
tickExtra boolean Добавлять ли дополнительное деление у начала оси. Полезно для полосовой шкалы, если деления должны стоять у границ, а не в середине полос. Используется совместно с bandPosition: 1 и нулевым отступом полосовой шкалы.
tickMinStep number, ExprRef Минимальный желаемый шаг между делениями в единицах области данных. Например, 1 запрещает расстояние меньше одной единицы. При необходимости tickCount корректируется, чтобы соблюсти минимальный шаг.
tickOffset number, ExprRef Смещение положения делений, подписей и линий сетки, в пикселях.
tickOpacity number, ExprRef, ConditionalAxisNumber Непрозрачность делений.
tickRound boolean Округлять ли пиксельные координаты до ближайшего целого.

По умолчанию: true.
tickSize number, ExprRef, ConditionalAxisNumber Длина делений оси в пикселях, неотрицательная.

По умолчанию: 5.
tickWidth number, ExprRef, ConditionalAxisNumber Толщина делений в пикселях, неотрицательная.

По умолчанию: 1.
values number[], string[], boolean[], DateTime[], ExprRef Явно заданные видимые значения делений оси.

Пример: tickBand для сетки между примитивами

С помощью tickBand деления и линии сетки можно переместить между метками:

Название оси

Свойство Тип Описание
title Text, null Название поля. null убирает название.

По умолчанию: формируется из имени поля и преобразований aggregate, bin и timeUnit. Функция агрегирования включается в название, например "Sum of Profit"; разбиение и единица времени указываются в скобках, например "Profit (binned)" или "Transaction Date (year-month)". Без преобразований используется имя поля.

Формат названия можно изменить свойством fieldTitle в config или функцией fieldTitle в параметрах compile. Если задано и название поля, и title оси, заголовка панели или легенды, используется название оси, заголовка или легенды.
titleAlign Align, ExprRef Горизонтальное выравнивание текста названия оси.
titleAnchor TitleAnchor, ExprRef Положение текстовой привязки для размещения названия оси.
titleAngle number, ExprRef Угол поворота названия оси в градусах.
titleBaseline TextBaseline, ExprRef Вертикальная базовая линия названия оси: "alphabetic" (по умолчанию), "top", "middle", "bottom", "line-top", "line-bottom". Варианты line-top и line-bottom действуют подобно top и bottom, но вычисляются относительно высоты строки, а не только размера шрифта.
titleColor null, Color, ExprRef Цвет названия: шестнадцатеричный код или обычное имя цвета.
titleFont string, ExprRef Гарнитура шрифта названия, например "Helvetica Neue".
titleFontSize number, ExprRef Размер шрифта названия, неотрицательный.
titleFontStyle FontStyle, ExprRef Начертание шрифта названия.
titleFontWeight FontWeight, ExprRef Насыщенность шрифта названия: строка, например "bold" или "normal", либо число 100, 200, …, 900, где "normal" соответствует 400, а "bold" — 700.
titleLimit number, ExprRef Максимальная допустимая ширина названия оси в пикселях, неотрицательная.
titleLineHeight number, ExprRef Высота строки в пикселях для многострочного названия или названия с базовой линией "line-top" / "line-bottom".
titleOpacity number, ExprRef Непрозрачность названия оси.
titlePadding number, ExprRef Отступ между названием и осью, в пикселях.
titleX number, ExprRef Координата X названия относительно группы оси.
titleY number, ExprRef Координата Y названия относительно группы оси.

Пример: настройка названия

Пример настройки названия оси x:

См. также: конфигурация названий осей и стиль guide-title, общий для названий осей, легенд и заголовков панелей.

Линии сетки

Свойство Тип Описание
grid boolean Включать ли линии сетки оси.

По умолчанию: true для непрерывных шкал без разбиения на интервалы, иначе false.
gridCap StrokeCap, ExprRef Форма концов линий сетки: "butt", "round" или "square".

По умолчанию: "butt".
gridColor null, Color, ExprRef, ConditionalAxisColor Цвет линий сетки.

По умолчанию: "lightGray".
gridDash number[], ExprRef, ConditionalAxisNumberArray Массив чередующихся длин штрихов и промежутков [штрих, промежуток] для пунктирных линий сетки.
gridOpacity number, ExprRef, ConditionalAxisNumber Непрозрачность обводки сетки, от 0 до 1.

По умолчанию: 1.
gridWidth number, ExprRef, ConditionalAxisNumber Толщина линий сетки в пикселях, неотрицательная.

По умолчанию: 1.

Условные свойства оси

Свойства оси, допускающие тип ConditionalAxisProperty, можно задать условным определением значения.

Каждое деление, линия сетки и подпись используют объект данных со следующими полями, доступными в проверочном условии свойства оси:

  • label — текст подписи;
  • value — значение данных;
  • index — относительный номер от 0 у первого деления до 1 у последнего.

Пример: условные свойства оси и многострочные подписи

В примере штриховка сетки и делений зависит от того, совпадает ли дата с началом года. Через labelExpr выводятся двухстрочные подписи, а год показывается только у января:

В диаграмме ниже некоторые подписи и деления условно скрываются через labelColor и tickColor:

Настройка осей по умолчанию

// Спецификация представления верхнего уровня
{
  ...,
  "config": {
    "axis": ...,
    "axisX": ...,
    "axisY": ...,
    "axisLeft": ...,
    "axisRight": ...,
    "axisTop": ...,
    "axisBottom": ...,
    "axisBand": ...,
    "axisQuantitative": ...,
    "axisTemporal": ...,
    ...
  }
}

Конфигурация осей задаёт настройки по умолчанию. Свойства axis объекта config верхнего уровня применяются ко всем осям.

Дополнительные блоки настраивают более конкретные виды осей: по ориентации (axisX, axisY, axisLeft, axisTop и т. п.), полосовому типу шкалы (axisBand), типу данных шкалы (axisDiscrete, axisQuantitative, axisTemporal) или сочетанию ориентации и типа шкалы/данных, например axisXTemporal. Так, свойства axisBand применяются только к осям полосовых шкал "band".

Конфигурация поддерживает все свойства оси, кроме position, orient, format, values и zindex. Также поддерживается disable:

Свойство Тип Описание
disable boolean Отключает создание осей по умолчанию.

Примечания:

  • Если к одной оси применимы несколько блоков конфигурации, настройки по типу имеют приоритет над настройками по ориентации, а те — над общими настройками.
  • Если у конфигурации оси задан style, он имеет более низкий приоритет, чем любые свойства этой конфигурации.
  • Полный порядок приоритета каждого свойства, от высокого к низкому:
    • свойства оси (axis.*);
    • стиль оси (config.style[axis.style].*);
    • конфигурация по ориентации и типу, например config.axisXBand.*;
    • конфигурация по типу, например config.axisBand.*;
    • конфигурация по ориентации (config.axisX/Y.*);
    • общая конфигурация (config.axis.*);
    • стиль конфигурации по ориентации и типу, например config.style[config.axisXBand.style].*;
    • стиль конфигурации по типу, например config.style[config.axisBand.style].*;
    • стиль конфигурации по ориентации, например config.style[config.axisX.style].*;
    • стиль общей конфигурации (config.style[config.axis.style].*).

См. также: свойства подписей оси и стиль guide-label, общий для подписей осей, легенд и заголовков панелей.