Поле title и titleAlign

Назначение заголовка в визуализациях

В спецификациях Vega и Vega-Lite поле title относится к метаданным визуализации и используется для описания графика на уровне композиции. Оно не влияет на данные или геометрию, но управляет текстовым заголовком, который отображается над или внутри визуализации.

Заголовок выполняет несколько функций:

  • семантическое описание визуализации;
  • визуальное разделение графиков в dashboard-композициях;
  • улучшение читаемости при множественных слоях или faceting;
  • документирование графика без необходимости внешних аннотаций.

В Vega-Lite title задаётся декларативно на уровне корневого объекта спецификации или внутри facet/repeat. В Vega поле title может быть частью сигнала и более гибко настраиваться через layout-конструкции.

Поле title

Базовая структура

В Vega-Lite title может быть строкой или объектом:

{
  "title": "Продажи по регионам"
}

Расширенная форма:

{
  "title": {
    "text": "Продажи по регионам",
    "fontSize": 16,
    "font": "sans-serif",
    "color": "#333"
  }
}

В Vega аналогичный эффект достигается через layout и текстовые примитивы, но в Vega-Lite поле title является встроенной частью API уровня спецификации.

Многострочные заголовки

Поле title может принимать массив строк:

{
  "title": [
    "Продажи по регионам",
    "2024 финансовый год"
  ]
}

Каждый элемент массива отображается как отдельная строка. Это позволяет структурировать заголовок без ручного переноса строк.

Позиционирование заголовка

Заголовок может быть дополнительно настроен через свойства:

  • anchor
  • offset
  • orient
  • frame

Пример:

{
  "title": {
    "text": "Температура по месяцам",
    "anchor": "middle",
    "offset": 10,
    "frame": "group"
  }
}

Параметр frame определяет область привязки: относительно всей визуализации или только графической области.

Поле titleAlign

Назначение выравнивания

Поле titleAlign управляет горизонтальным выравниванием текста заголовка относительно области визуализации. Оно применяется в Vega-Lite и влияет только на визуальное расположение текста, не затрагивая layout данных.

Поддерживаемые значения:

  • "left"
  • "center"
  • "right"

Поведение выравнивания

left

{
  "title": "Распределение значений",
  "titleAlign": "left"
}

Заголовок выравнивается по левому краю области графика. Используется в отчетах, где важна текстовая иерархия слева направо.

center

{
  "title": "Распределение значений",
  "titleAlign": "center"
}

Центрирование применяется по умолчанию в большинстве конфигураций. Такой вариант характерен для одиночных графиков и презентационных визуализаций.

{
  "title": "Распределение значений",
  "titleAlign": "right"
}

Выравнивание по правому краю используется редко и чаще встречается в композициях, где визуальный акцент смещён вправо (например, при наличии фиксированных панелей слева).

Взаимодействие title и titleAlign

title определяет содержимое, тогда как titleAlign управляет его геометрией в пространстве.

Пример комбинированного использования:

{
  "title": {
    "text": "Объём продаж",
    "fontSize": 14
  },
  "titleAlign": "left"
}

Здесь текст остаётся неизменным, но его позиция смещается относительно контейнера.

Поведение в сложных композициях

Facet-визуализации

В фасетных графиках каждый подграфик может иметь собственный title. При этом titleAlign применяется локально:

{
  "facet": {
    "row": {
      "field": "region"
    }
  },
  "spec": {
    "title": "Региональная разбивка",
    "titleAlign": "center"
  }
}

В таких структурах важно различать:

  • глобальный title (вся визуализация);
  • локальные заголовки (каждая панель facet).

Repeat-композиции

В повторяющихся графиках titleAlign помогает унифицировать внешний вид:

{
  "repeat": {
    "column": ["A", "B", "C"]
  },
  "spec": {
    "title": {
      "text": "Сравнение метрик"
    },
    "titleAlign": "center"
  }
}

При изменении набора повторов заголовок остаётся визуально стабильным.

Особенности рендеринга

Влияние layout-движка

В Vega и Vega-Lite позиционирование заголовка зависит от:

  • размера view;
  • наличия padding;
  • ориентации осей;
  • наличия legend.

titleAlign действует после расчёта layout, то есть не влияет на структуру данных, а только на финальное размещение текста.

Конфликты с anchor

При одновременном использовании anchor и titleAlign приоритет обычно имеет anchor, так как он задаёт базовую точку привязки.

Пример:

{
  "title": {
    "text": "Анализ продаж",
    "anchor": "start"
  },
  "titleAlign": "right"
}

В таких случаях поведение зависит от конкретного рендерера Vega, но логически anchor задаёт позицию, а titleAlign уточняет выравнивание внутри неё.

Практические паттерны использования

Отчётные панели

Для dashboard-структур типично:

{
  "title": "Динамика ключевых показателей",
  "titleAlign": "left"
}

Левое выравнивание создаёт визуальную привязку к сетке интерфейса.

Презентационные графики

{
  "title": "Рост аудитории",
  "titleAlign": "center"
}

Центрирование усиливает симметрию композиции.

Сравнительные графики

{
  "title": "Сравнение сегментов рынка",
  "titleAlign": "center"
}

Единый центр облегчает восприятие нескольких серий данных.

Ограничения и нюансы

  • titleAlign не влияет на многострочность title.
  • Параметр не изменяет порядок отображения текста.
  • В сложных вложенных спецификациях поведение может наследоваться от родительского уровня.
  • В Vega-Lite значение по умолчанию часто равно "center", если не задано явно.

Структурная роль в декларативной модели

В архитектуре Vega-Lite title и titleAlign являются частью слоя описания представления, отделённого от данных (data), преобразований (transform) и визуальных кодировок (encoding).

В Vega эти параметры интегрируются в более низкоуровневую систему компоновки, где текстовые элементы являются частью сцены (scenegraph), а выравнивание становится свойством layout-узла.

Такое разделение позволяет сохранять независимость семантики данных и визуального представления, при этом обеспечивая управляемую типографику на уровне декларации.

Оглавление