Настройка размеров

Эта страница объясняет, как задавать ширину и высоту визуализаций Vega-Lite.

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

• Одиночные и многослойные диаграммы
• Размеры по умолчанию
• Фиксированные размеры
• Адаптивные размеры
• Размер одного шага
• Автоматический расчёт
• Ограничения режима fit
• Составные представления

Ширина и высота одиночных и многослойных диаграмм

В спецификациях одиночного представления и слоёв свойства width и height позволяют настроить размер представления. По умолчанию они задают размеры прямоугольной области данных — области построения. Чтобы задать общий размер визуализации, используйте autosize.

Размеры по умолчанию

Если свойства верхнего уровня width и height отсутствуют, размеры одиночного представления определяются конфигурацией view. Для непрерывного поля x ширина задаётся config.view.continuousWidth (по умолчанию 300 пикселей). Для дискретного поля x или при отсутствии поля ширина определяется config.view.discreteWidth: по умолчанию ширина шага зависит от config.view.step, исходно 20 пикселей.

Высота определяется аналогично: continuousHeight применяется при непрерывном поле по оси Y, а discreteHeight — при дискретном поле или его отсутствии.

В примере ниже высота области построения составляет 300 пикселей, а ширина зависит от числа значений поля x: по 20 пикселей на дискретный шаг.

Примечание к версии. В оригинальном тексте этой страницы сохранилось значение 200 пикселей. Здесь оно исправлено на 300 в соответствии со схемой и фактической отрисовкой используемой версии Vega-Lite 6.4.3.

Фиксированные размеры

Числовые значения width и height задают фиксированную ширину и высоту области построения. Если ось дискретная, Vega-Lite подбирает размер шага так, чтобы категории уместились в указанный размер.

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

Адаптивные размеры

Значение "container" у свойства верхнего уровня width или height означает, что ширина или высота диаграммы должна соответствовать размеру окружающего контейнера. Эти свойства можно настраивать независимо: например, задать width: "container" и числовое значение height, чтобы получить адаптивную ширину и фиксированную высоту.

Размер самого контейнера должен быть определён вне диаграммы, например CSS-правилом width: 100%; height: 300px у элемента <div>. Если контейнер недоступен или его размер неизвестен при серверной отрисовке, Vega-Lite использует config.view.continuousWidth и config.view.continuousHeight.

Ограничения адаптивного режима:

• Он доступен только для одиночных и многослойных представлений.
• Vega слушает событие window.resize, чтобы обновлять размер диаграммы по размеру контейнера. Это покрывает многие сценарии. Если размер контейнера меняется программно, например пользовательским разделителем панелей, событие нужно отправить вручную. В современном браузере: window.dispatchEvent(new Event('resize'));.

Размер одного шага дискретной шкалы

Для дискретного поля можно задать width или height объектом, указав размер шага: {"step": 20}. Тогда размер всей области зависит от числа уникальных значений.

По умолчанию Vega-Lite подбирает отступы полосовых и точечных шкал так, чтобы выполнялось соотношение: ширина или высота = число уникальных значений × размер шага. Подробнее о связи размеров, шага и остальных свойств шкалы читайте в документации шкал.

Шаг для канала смещения

Если для дискретного поля используется вложенный канал смещения, step по умолчанию относится к шагу смещения:

Чтобы задать шаг шкалы положения X или Y, добавьте в объект размера "for": "position":

Автоматический расчёт размеров

Описанные выше размеры задают размеры прямоугольной области данных. Свойство autosize в спецификации верхнего уровня позволяет изменить это поведение. Учитывайте ограничения ниже.

Ради производительности Vega-Lite по умолчанию не пересчитывает размещение после каждого изменения представления. Если после обновления часть графика обрезается, задайте resize: true или вручную вызовите view.resize() через API представления Vega.

autosize можно задать строкой или объектом:

Итоговый размер зависит не только от width, height и padding, но и от осей, легенд и заголовков. Режимы autosize решают эту задачу по-разному:

• none — автоматический расчёт выключен. Если contains равно "content", общая ширина равна width + padding.left + padding.right; всё за её пределами обрезается. При "padding" общая ширина равна самому width.
• pad — область визуализации увеличивается, чтобы показать всё содержимое, в том числе оси и легенды. Это режим по умолчанию; итоговый размер часто больше суммы заданных размеров и отступов.
• fit — Vega-Lite старается уместить визуализацию в заданные ширину, высоту и отступы, уменьшая область данных ради осей, заголовка и легенд. При этом значения сигналов width и height могут изменяться для перестройки размещения. Режим полезен для многих диаграмм, но не гарантирует, что всё содержимое останется видимым: если одни оси и легенды требуют больше места, чем задано, часть содержимого обрежется. Как и при none, общая ширина по умолчанию равна width + padding.left + padding.right, где width — исходное, неизменённое значение. При autosize.contains: "padding" общая ширина равна исходному width.
• fit-x — под заданный размер подстраивается только ширина с левым и правым отступами.
• fit-y — под заданный размер подстраивается только высота с верхним и нижним отступами.

Ограничения режима fit

Для подгонки диаграммы должны выполняться два условия:

1. Представление должно быть одиночным или многослойным. fit не применяется к композициям facet, hconcat, vconcat и repeat.
2. Размер соответствующей оси не должен зависеть от явно заданного step дискретной шкалы. step имеет приоритет: например, явный шаг для ширины исключает X из fit, превращая режим в fit-y.

Пример

Диаграмма ниже точно помещается в ширину 300 пикселей и высоту по умолчанию 300 пикселей:

Ширина и высота составных представлений

Размеры размещённых рядом, разделённых на панели и повторяющихся представлений зависят от размеров входящих в них одиночных и многослойных представлений. Чтобы изменить размер всей композиции, задайте width и height во внутренних представлениях.

Например, здесь изменён размер одиночной диаграммы внутри набора панелей:

Если для построения панелей используются каналы row или column, свойства width и height также применяются к внутренней одиночной диаграмме. Поэтому следующая спецификация эквивалентна предыдущей: