Объект axis в Vega и Vega-Lite определяет поведение и визуальное представление координатных осей в графиках. Он управляет геометрией шкалы, подписями, делениями, линиями сетки и стилевыми параметрами, формируя один из ключевых слоёв визуализации данных. Структура axis является декларативной: вместо императивного описания логики отрисовки задаётся набор свойств, интерпретируемых движком рендеринга.
Базовая структура объекта axis включает набор свойств, определяющих положение, внешний вид и форматирование элементов оси.
orient Определяет расположение оси относительно графика. Возможные значения:
"top""bottom""left""right"В Vega-Lite ориентация часто выводится автоматически на основе типа шкалы, однако при необходимости может быть переопределена вручную.
scale Связывает ось с конкретной шкалой (scale). Значение представляет собой имя шкалы, определённой в разделе scales. Через эту привязку ось получает домен и диапазон значений.
zindex Управляет порядком наложения элементов. Значение определяет, будет ли ось отрисована поверх графика или под ним. Это важно при пересечении с геометрическими примитивами.
domain Логическое значение, определяющее отображение
линии домена (основной линии оси). При true линия
отображается, при false скрывается.
domainColor Задаёт цвет линии домена. Поддерживаются любые CSS-совместимые цветовые значения, включая hex, rgb и именованные цвета.
domainWidth Толщина линии домена в пикселях. Используется для визуального выделения оси относительно других элементов.
offset Смещение оси относительно стандартного положения. Позволяет управлять пространственным расположением без изменения компоновки всей сцены.
ticks Управляет отображением делений на оси. Значение может быть:
При объектной форме доступны расширенные параметры:
size — длина деленийcolor — цвет линий деленийopacity — прозрачностьtickSize Устаревший или упрощённый способ задания длины делений. В современных спецификациях заменяется объектной конфигурацией ticks.
tickCount Рекомендуемое количество делений. Реальное значение может корректироваться движком в зависимости от масштаба и доступного пространства.
tickMinStep Минимальный шаг между делениями. Используется для предотвращения перегруженности оси при плотных данных.
labels Управляет отображением текстовых подписей делений. Может быть логическим значением или объектом конфигурации.
Основные параметры объекта labels:
angle — угол поворота текстаalign — горизонтальное выравниваниеbaseline — вертикальное выравниваниеcolor — цвет текстаfont — семейство шрифтаfontSize — размер шрифтаlimit — ограничение длины текста с обрезкойformat Строка форматирования значений оси. Поддерживает форматирование чисел и дат в зависимости от типа шкалы.
Примеры поведения:
.2f)%Y-%m-%d)formatType Определяет механизм форматирования:
"number""time""string"Используется для явного указания интерпретации значений.
encode Расширенный механизм кастомизации, позволяющий переопределять визуальные свойства через сигналы Vega. Через encode можно управлять отдельными состояниями элементов оси: ticks, labels, domain.
grid Включает отображение линий сетки, соответствующих делениям оси. Используется для улучшения читаемости значений на графике.
gridColor Цвет линий сетки. Обычно используется с низкой насыщенностью для ненавязчивого отображения.
gridOpacity Прозрачность сетки, позволяющая регулировать визуальную доминанту.
gridWidth Толщина линий сетки.
gridDash Пунктирный стиль линий сетки, задаётся
массивом чисел (например [4,2]).
title Текст заголовка оси. Может быть строкой или объектом конфигурации.
При объектной форме доступны свойства:
text — содержимое заголовкаfont — шрифтfontSize — размерcolor — цветanchor — выравнивание относительно осиtitleAngle Угол поворота заголовка.
titleOffset Расстояние между заголовком и основной осью.
titlePadding Внутренний отступ заголовка относительно элементов оси.
labelLimit Ограничивает максимальную ширину подписи в пикселях. При превышении текста применяется обрезка с многоточием.
labelOverlap Стратегия обработки перекрытия подписей. Возможные значения:
"true" — автоматическое скрытие части подписей"false" — отображение всех подписей"parity" — отображение через одну"greedy" — агрессивное сокращениеminExtent / maxExtent Ограничивают минимальное и максимальное пространство, занимаемое осью. Используются в системах компоновки для балансировки графика.
position Определяет логическое положение оси внутри визуального контейнера. Используется в сложных композициях с несколькими панелями.
translate Дополнительное смещение оси по координатам. Применяется в низкоуровневом Vega API.
values Явное задание значений делений оси. Полностью отключает автоматическое вычисление tick-значений.
Используется для:
nice Логическое значение, влияющее на округление границ шкалы. При включении диапазон значений корректируется до «красивых» чисел.
labelColor Цвет подписей оси.
labelFont Шрифт подписей.
labelFontSize Размер текста подписей.
labelFontWeight Толщина шрифта.
tickColor Цвет делений.
tickWidth Толщина делений.
tickOpacity Прозрачность делений.
Ось тесно связана с системой scale, поэтому её поведение изменяется в зависимости от типа шкалы:
В Vega-Lite многие параметры axis автоматически адаптируются под тип шкалы, включая форматирование подписей и генерацию делений.
В Vega-Lite axis является частью декларативной спецификации более высокого уровня. Многие свойства задаются через упрощённые конфигурации:
axis: true/false — включение/выключениеconfig.axisВ Vega (низкоуровневый API) axis описывается более детально через
компоненты axes, encode, scale и
сигналы. Это даёт полный контроль над каждым визуальным элементом,
включая состояние взаимодействия.
Axis поддерживает многоуровневую систему наследования:
При конфликте приоритет отдаётся наиболее специфичному уровню.
Хотя axis сам по себе не является интерактивным элементом, он участвует в:
В таких сценариях axis динамически пересчитывает деления и подписи в зависимости от текущего состояния шкалы.