Руководство по осям и легендам

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

1. Создайте шкалы

Рассмотрим группированную столбчатую диаграмму. Её шкала xscale переводит числовые значения в горизонтальные координаты, yscale размещает категории, а color назначает цвет группам. Имена шкал используются в остальных частях спецификации.

"scales": [
  {
    "name": "xscale",
    "type": "linear",
    "domain": {"data": "table", "field": "value"},
    "range": "width",
    "zero": true,
    "nice": true
  },
  {
    "name": "yscale",
    "type": "band",
    "domain": {"data": "table", "field": "category"},
    "range": "height",
    "padding": 0.2
  },
  {
    "name": "color",
    "type": "ordinal",
    "domain": {"data": "table", "field": "position"},
    "range": {"scheme": "category20"}
  }
]

Область определения domain содержит исходные значения, а диапазон range — координаты или цвета, которые им соответствуют. У шкалы band каждая категория занимает отдельную полосу. Параметр padding добавляет промежутки между полосами.

2. Добавьте оси

Ось ссылается на пространственную шкалу через scale. Свойство orient размещает её относительно области построения: bottom, top, left или right.

"axes": [
  {"orient": "bottom", "scale": "xscale", "title": "Значение", "grid": true},
  {"orient": "left", "scale": "yscale", "title": "Категория"}
]

Для числовой оси можно включить линии сетки с помощью grid. Если подписи перекрываются, настройте labelAngle, labelLimit или labelOverlap. Параметр format управляет отображением чисел и дат. Все доступные настройки приведены в справочнике по осям.

3. Добавьте легенду

Легенда ссылается на шкалу, отвечающую за визуальное свойство. Для цветов заливки используется fill; для цвета обводки — stroke; для размера условного знака — size.

"legends": [
  {"fill": "color", "title": "Группа", "orient": "right"}
]

Для категориальных цветов Vega обычно показывает отдельные условные знаки, а для непрерывной цветовой шкалы может показать градиент. Размещение меняется свойством orient, направление элементов — direction. Подробности есть в справочнике по легендам.

4. Проверьте результат

Откройте пример группированной столбчатой диаграммы и найдите в его JSON блоки scales и axes. Попробуйте изменить расположение осей и добавить сетку. Затем посмотрите блок legends в примере с интерактивной легендой и измените её заголовок. Если диаграмма перестала отображаться, проверьте, совпадают ли имена шкал во всех этих блоках.