Градиент

Объект градиента задаёт плавный переход между цветами. Vega-Lite поддерживает линейные и радиальные градиенты. Например:

{
  "gradient": "linear",
  "stops": [
    {"offset": 0.0, "color": "red"},
    {"offset": 0.5, "color": "white"},
    {"offset": 1.0, "color": "blue"}
  ]
}

Линейный градиент

Линейный градиент меняет цвет вдоль прямой от начальной до конечной точки. По умолчанию направление горизонтальное — слева направо. Для настройки направления используйте x1, y1, x2 и y2. Координаты задаются в нормализованном диапазоне от 0 до 1 относительно границ окрашиваемого элемента.

Свойство Тип Описание
gradient "linear" Обязательное. Тип градиента; для линейного используйте "linear".
x1 number Начальная координата x в нормализованном диапазоне [0, 1]. По умолчанию: 0.
x2 number Конечная координата x в нормализованном диапазоне [0, 1]. По умолчанию: 1.
y1 number Начальная координата y в нормализованном диапазоне [0, 1]. По умолчанию: 0.
y2 number Конечная координата y в нормализованном диапазоне [0, 1]. По умолчанию: 0.
stops GradientStop[] Обязательное. Массив цветовых остановок, задающий последовательность цветов градиента.

Пример: область с градиентом

В следующей диаграмме для цвета области задан линейный градиент:

Радиальный градиент

Радиальный градиент меняет цвет между двумя окружностями: внутренней и внешней. По умолчанию обе окружности имеют общий центр, радиус внутренней равен 0, а внешней — 0.5.

Свойства x1, y1, x2 и y2 задают центры окружностей, r1 и r2 — их радиусы. Координаты также нормализованы относительно окрашиваемого элемента. Значение 1 соответствует максимальному размеру его рамки — ширине либо высоте, смотря что больше.

Свойство Тип Описание
gradient "radial" Обязательное. Тип градиента; для радиального используйте "radial".
x1 number Координата x центра внутренней окружности в нормализованном диапазоне [0, 1]. По умолчанию: 0.5.
x2 number Координата x центра внешней окружности в нормализованном диапазоне [0, 1]. По умолчанию: 0.5.
y1 number Координата y центра внутренней окружности в нормализованном диапазоне [0, 1]. По умолчанию: 0.5.
y2 number Координата y центра внешней окружности в нормализованном диапазоне [0, 1]. По умолчанию: 0.5.
r1 number Радиус внутренней окружности в нормализованном диапазоне [0, 1]. По умолчанию: 0.
r2 number Радиус внешней окружности в нормализованном диапазоне [0, 1]. По умолчанию: 0.5.
stops GradientStop[] Обязательное. Массив цветовых остановок, задающий последовательность цветов градиента.

Цветовая остановка

Цветовая остановка содержит значение Color и долю пути offset:

Свойство Тип Описание
color Color Обязательное. Цвет в данной точке градиента.
offset number Обязательное. Доля пути, определяющая положение цветовой остановки в градиенте.