Графические примитивы

Графические примитивы — видимые элементы диаграммы. Их положение, размер, цвет и другие свойства кодируют значения полей данных или задаются постоянными значениями. Свойство mark в спецификации отдельного представления принимает имя типа примитива или объект с его настройками.

// Спецификация одиночного представления
{
  "data": ... ,
  "mark": ... ,       // Примитив
  "encoding": ... ,
  ...
}

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

• Типы примитивов
• Объект определения примитива
  • Общие свойства
  • Положение и смещение
  • Цвет
  • Оформление обводки
  • Гиперссылка
• Настройки примитивов по умолчанию
• Именованные стили
  • Пример: подписи столбцов

Типы примитивов

Vega-Lite поддерживает базовые типы mark: "area" (область), "bar" (столбец), "circle" (круг), "line" (линия), "point" (точка), "rect" (прямоугольник), "rule" (линия правила), "square" (квадрат), "text" (текст), "tick" (штрих), "geoshape" (географическая фигура). Обычно каждой записи данных соответствует один примитив. Исключение — линии и области: они объединяют несколько записей в непрерывную форму.

Есть и составные примитивы — удобные шаблоны многослойных диаграмм: "boxplot" (ящик с усами), "errorband" (полоса неопределённости) и "errorbar" (отрезки погрешности).

Для простой столбчатой диаграммы достаточно указать строку "bar":

Объект определения примитива

// Спецификация одиночного представления
{
  ...,
  "mark": {
    "type": ...,       // Примитив
    ...
  },
  ...
}

Чтобы настроить свойства примитива, задайте mark объектом определения вместо строки с именем типа. Далее перечислены стандартные свойства базовых примитивов. У некоторых типов есть дополнительные свойства, описанные на их страницах. Например, точки поддерживают также shape и size.

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

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

Положение и смещение

Цвет

Оформление обводки

В примере ниже линии границ имеют штриховку strokeDash: [6, 4]:

Гиперссылка

Примитивы могут действовать как гиперссылки, если задано свойство href или соответствующий канал. При заданном href свойство cursor по умолчанию получает значение "pointer", показывающее возможность перехода.

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

// Спецификация представления верхнего уровня
{
  ...,
  "config": {
    "mark": ...,
    "area": ...,
    "bar": ...,
    "circle": ...,
    "line": ...,
    "point": ...,
    "rect": ...,
    "rule": ...,
    "geoshape": ...,
    "square": ...,
    "text": ...,
    "tick": ...
  }
}

Свойство mark объекта config задаёт значения по умолчанию для всех примитивов. Кроме того, config позволяет настраивать отдельные типы по их именам, например config.area.

Общая конфигурация config.mark поддерживает все стандартные свойства примитивов, кроме type, style, clip и orient. Параметры отдельных типов описаны на соответствующих страницах.

Примечания:

1. Свойства определения примитива и каналы свойств примитива переопределяют значения конфигурации.
2. Конфигурация примитивов не поддерживает свойства смещения.

Именованные стили

{
  // Спецификация верхнего уровня
  "config": {
    "style": {
      ...
    },
    ...
  }
}

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

Например, следующий стиль "triangle" задаёт стандартную форму и толщину обводки для точек:

{
  "style": {
    "triangle": {
      "shape": "triangle-up",
      "strokeWidth": 2
    }
  }
}

Чтобы применить стиль, укажите свойство style в объекте определения примитива.

Примечание: для оформления направляющих элементов (осей, заголовков панелей и легенд) Vega-Lite предоставляет следующие встроенные имена стилей:

• "guide-label" — подписи осей, легенд и заголовков панелей.
• "guide-title" — названия осей, легенд и заголовков панелей.
• "group-title" — названия диаграмм.

Пример: подписи столбцов

Примитивы text можно использовать как подписи других примитивов: задайте им style, а через конфигурацию стилей настройте смещение (dx или dy), align и baseline.

См. также: аналогичный пример с настройкой смещения, выравнивания и базовой линии в определении примитива.