Введение в радиальную диаграмму
Радиальная диаграмма — это простой способ отображения низкоразмерных данных в круговом формате.
Радиальную диаграмму также называют диаграммой-пауком, звёздной диаграммой, сетевой диаграммой, полярной диаграммой.
Применение
Радиальные диаграммы особенно полезны для разработчиков, специалистов по данным и инженеров, которым нужно ясно и лаконично представлять данные в круговом формате.
Она обычно используется для графического обобщения и сравнения показателей нескольких сущностей по нескольким измерениям.
Синтаксис
Копировать
Встраивание
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
... More Fields ...
Пример
Копировать
Встраивание
---
title: "Grades"
---
radar-beta
axis m["Math"], s["Chinese"], e["English"]
axis h["History"], g["Geography"], a["Art"]
curve a["Alice"]{85, 90, 80, 70, 75, 90}
curve b["Bob"]{70, 75, 85, 80, 90, 85}
max 100
min 0
Детали синтаксиса
Заголовок
title: рендерится в верхней части радиальной диаграммы.
Копировать
Встраивание
radar-beta
title Title of the Radar Diagram
...
Ось
axis: синтаксис axis используется для определения осей радиальной диаграммы.
Каждая ось представлена ID и необязательной меткой.
В одной строке можно определить несколько осей.
Копировать
Встраивание
radar-beta
axis id1["Label1"]
axis id2["Label2"], id3["Label3"]
...
Кривая
curve: синтаксис curve используется для определения точек данных кривых на радиальной диаграмме.
Каждая кривая представлена ID, необязательной меткой и списком значений.
Значения можно задавать с помощью списка чисел или списка пар ключ-значение. Если используются пары ключ-значение, то ключ обозначает ID оси, а значение — точку данных.
В одной строке можно определить несколько кривых.
Копировать
Встраивание
radar-beta
axis axis1, axis2, axis3
curve id1["Label1"]{1, 2, 3}
curve id2["Label2"]{4, 5, 6}, id3{7, 8, 9}
curve id4{ axis3: 30, axis1: 20, axis2: 10 }
...
Параметры
- showLegend: синтаксис showLegend используется для отображения или скрытия легенды на радиальной диаграмме; по умолчанию отображается.
- max: максимальное значение радиальной диаграммы, используется для масштабирования радиальной диаграммы. Если не указано, максимальное значение вычисляется по точкам данных.
- min: минимальное значение радиальной диаграммы, используется для масштабирования радиальной диаграммы. Если не указано, минимальное значение равно 0.
- graticule: синтаксис graticule используется для определения типа координатной сетки для отрисовки на радиальной диаграмме. Координатная сетка может быть circle или polygon. Если не указано, по умолчанию используется circle.
- ticks: синтаксис ticks используется для определения количества делений на координатной сетке. Это количество отрисовываемых концентрических кругов или многоугольников, указывающее масштаб радиальной диаграммы. Если не указано, количество делений по умолчанию равно 5.
Копировать
Встраивание
radar-beta
...
showLegend true
max 100
min 0
graticule circle
ticks 5
...
Конфигурация
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| width | Ширина радиальной диаграммы | 600 |
| height | Высота радиальной диаграммы | 600 |
| marginTop | Верхнее поле радиальной диаграммы | 50 |
| marginBottom | Нижнее поле радиальной диаграммы | 50 |
| marginLeft | Левое поле радиальной диаграммы | 50 |
| marginRight | Правое поле радиальной диаграммы | 50 |
| axisScaleFactor | Коэффициент масштабирования оси | 1 |
| axisLabelFactor | Коэффициент настройки положения метки оси | 1.05 |
| curveTension | Натяжение скруглённой кривой | 0.17 |
Переменные темы
Глобальные переменные темы
Значения по умолчанию этих переменных зависят от используемой темы. Чтобы переопределить значения по умолчанию, задайте нужные значения в разделе themeVariables конфигурации: config: themeVariables: cScale0: "#FF0000" cScale1: "#00FF00"
Радиальная диаграмма поддерживает цветовую шкалу cScale${i}, где i — число от 0 до максимального числа цветов цветовой шкалы темы. Обычно максимальное число цветов равно 12.
| Свойство | Описание |
|---|---|
| fontSize | Размер шрифта заголовка |
| titleColor | Цвет заголовка |
| cScale$ | Цветовая шкала i-й кривой |
Параметры стиля радиальной диаграммы
Специфические переменные радиальной диаграммы находятся внутри ключа radar. Чтобы задать параметры стиля радиальной диаграммы, используйте следующий синтаксис. config: themeVariables: radar: axisColor: "#FF0000"
| Свойство | Описание | Значение по умолчанию |
|---|---|---|
| axisColor | Цвет линии оси | black |
| axisStrokeWidth | Ширина линии оси | 1 |
| axisLabelFontSize | Размер шрифта метки оси | 12px |
| curveOpacity | Прозрачность кривой | 0.7 |
| curveStrokeWidth | Ширина кривой | 2 |
| graticuleColor | Цвет координатной сетки | black |
| graticuleOpacity | Прозрачность координатной сетки | 0.5 |
| graticuleStrokeWidth | Ширина координатной сетки | 1 |
| legendBoxSize | Размер блока легенды | 10 |
| legendFontSize | Размер шрифта легенды | 14px |
Пример конфигурации и темы
Копировать
Встраивание
---
config:
radar:
axisScaleFactor: 0.25
curveTension: 0.1
theme: base
themeVariables:
cScale0: "#FF0000"
cScale1: "#00FF00"
cScale2: "#0000FF"
radar:
curveOpacity: 0
---
radar-beta
axis A, B, C, D, E
curve c1{1,2,3,4,5}
curve c2{5,4,3,2,1}
curve c3{3,3,3,3,3}
