Квадрантная диаграмма
Диаграмма квадрантов — это визуализация, разделяющая данные на четыре квадранта. Она используется для нанесения точек данных на двумерную сетку, где одна переменная откладывается по оси x, а другая — по оси y. Разделение на квадранты определяется путём деления диаграммы на четыре равные части по набору критериев, специфичных для анализируемых данных. Диаграммы квадрантов обычно используются для выявления закономерностей и тенденций в данных, а также для определения приоритета действий в зависимости от положения точек данных на диаграмме. Они обычно используются в таких областях, как бизнес, маркетинг и управление рисками.
Пример
Копировать
Встраивание
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.3, 0.6]
Campaign B: [0.45, 0.23]
Campaign C: [0.57, 0.69]
Campaign D: [0.78, 0.34]
Campaign E: [0.40, 0.34]
Campaign F: [0.35, 0.78]
Синтаксис
Если на диаграмме нет доступных точек данных, текст осей и названия квадрантов отображаются в центре соответствующих квадрантов. Если точки данных есть, метки оси x отображаются слева от соответствующего квадранта, а текст квадранта отображается внизу диаграммы. Метки оси y отображаются внизу соответствующего квадранта, а текст квадранта отображается вверху соответствующего квадранта.
Для координатных значений точек данных минимум равен 0, максимум равен 1.
Заголовок
Заголовок — это краткое описание диаграммы; он всегда отображается в верхней части диаграммы.
Пример
Копировать
Встраивание
quadrantChart
title This is a sample example
x-axis
Ось x определяет текст, отображаемый по оси x. Ось x делится на две части: 'левую' и 'правую'; вы можете указать обе или только 'левую'. Оператор должен начинаться с x-axis, затем следует left axis text, затем разделитель --> и, наконец, right axis text.
Пример
1. x-axis --> будут отображаться как текст левой оси, так и текст правой оси.
2. x-axis отображается только текст левой оси.
y-axis
Ось y определяет текст, отображаемый по оси y. Ось y делится на две части: 'верхнюю' и 'нижнюю'; вы можете указать обе или только 'нижнюю'. Этот оператор должен начинаться с y-axis, затем следует bottom axis text, затем разделитель --> и, наконец, top axis text.
Пример
1. y-axis --> будут отображаться как текст нижней оси, так и текст верхней оси.
2. y-axis отображается только текст нижней оси.
Текст квадранта
quadrant-[1,2,3,4] определяет текстовое содержимое, отображаемое в каждом квадранте.
Пример
1. quadrant-1 определяет текст, отображаемый в правом верхнем квадранте
2. quadrant-2 определяет текст, отображаемый в левом верхнем квадранте.
3. quadrant-3 определяет текст, отображаемый в левом нижнем квадранте.
4. quadrant-4 определяет текст, отображаемый в правом нижнем квадранте.
Точка
Используется для отрисовки круга внутри диаграммы квадрантов. Синтаксис — : [x, y], где значения x и y находятся в диапазоне от 0 до 1.
Пример
1. Point 1: [0.75, 0.80] , точка 1 будет нарисована в правом верхнем квадранте.
2. Point 2: [0.35, 0.24] , точка 2 будет нарисована в левом нижнем квадранте.
Конфигурация диаграммы
| Параметр | Описание | Значение по умолчанию |
|---|---|---|
| chartWidth | Ширина диаграммы | 500 |
| chartHeight | Высота диаграммы | 500 |
| titlePadding | Верхний и нижний внутренние отступы заголовка | 10 |
| titleFontSize | Размер шрифта заголовка | 20 |
| quadrantPadding | Отступ вне всех квадрантов | 5 |
| quadrantTextTopPadding | Верхний отступ текста квадранта, когда текст рисуется вверху (не на точке данных) | 5 |
| quadrantLabelFontSize | Размер шрифта текста квадранта | 16 |
| quadrantInternalBorderStrokeWidth | Ширина внутренней границы квадранта | 1 |
| quadrantExternalBorderStrokeWidth | Ширина обводки внешней границы квадранта | 2 |
| xAxisLabelPadding | Верхний и нижний внутренние отступы текста оси x | 5 |
| xAxisLabelFontSize | Размер шрифта текста оси x | 16 |
| xAxisPosition | Положение оси x (вверху, внизу). При наличии точек данных ось x всегда отображается внизу | top |
| yAxisLabelPadding | Левый и правый внутренние отступы текста оси y | 5 |
| yAxisLabelFontSize | Размер шрифта текста оси y | 16 |
| yAxisPosition | Положение оси y (слева, справа) | left |
| pointTextPadding | Расстояние между точкой данных и текстом под ней | 5 |
| pointLabelFontSize | Размер шрифта текста точки данных | 12 |
| pointRadius | Радиус точки данных | 5 |
Переменные темы диаграммы
| Параметр | Описание |
|---|---|
| quadrant1Fill | Цвет заливки правого верхнего квадранта |
| quadrant2Fill | Цвет заливки левого верхнего квадранта |
| quadrant3Fill | Цвет заливки левого нижнего квадранта |
| quadrant4Fill | Цвет заливки правого нижнего квадранта |
| quadrant1TextFill | Цвет текста правого верхнего квадранта |
| quadrant2TextFill | Цвет текста левого верхнего квадранта |
| quadrant3TextFill | Цвет текста левого нижнего квадранта |
| quadrant4TextFill | Цвет текста правого нижнего квадранта |
| quadrantPointFill | Цвет заливки точки данных |
| quadrantPointTextFill | Цвет текста точки данных |
| quadrantXAxisTextFill | Цвет текста оси x |
| quadrantYAxisTextFill | Цвет текста оси y |
| quadrantInternalBorderStrokeFill | Цвет внутренней границы квадранта |
| quadrantExternalBorderStrokeFill | Цвет внешней границы квадранта |
| quadrantTitleFill | Цвет заголовка |
Пример конфигурации и темы
Копировать
Встраивание
---
config:
quadrantChart:
chartWidth: 400
chartHeight: 400
themeVariables:
quadrant1TextFill: "ff0000"
---
quadrantChart
x-axis Urgent --> Not Urgent
y-axis Not Important --> "Important ❤"
quadrant-1 Plan
quadrant-2 Do
quadrant-3 Delegate
quadrant-4 Delete
Стиль точек данных
Точки данных можно стилизовать напрямую или использовать определённый общий класс
Прямой стиль
Копировать
Встраивание
Point A: [0.9, 0.0] radius: 12
Point B: [0.8, 0.1] color: #ff3300, radius: 10
Point C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Point D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Стиль класса
Копировать
Встраивание
Point A:::class1: [0.9, 0.0]
Point B:::class2: [0.8, 0.1]
Point C:::class3: [0.7, 0.2]
Point D:::class3: [0.7, 0.2]
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
Доступные стили:
| Параметр | Описание |
|---|---|
| color | Цвет заливки точки данных |
| radius | Радиус точки данных |
| stroke-width | Ширина границы точки данных |
| stroke-color | Цвет границы точки данных (не действует, если не указан stroke-width) |
Приоритет: 1. прямой стиль 2. стиль класса 3. стиль темы
Пример стиля
Копировать
Встраивание
quadrantChart
title Reach and engagement of campaigns
x-axis Low Reach --> High Reach
y-axis Low Engagement --> High Engagement
quadrant-1 We should expand
quadrant-2 Need to promote
quadrant-3 Re-evaluate
quadrant-4 May be improved
Campaign A: [0.9, 0.0] radius: 12
Campaign B:::class1: [0.8, 0.1] color: #ff3300, radius: 10
Campaign C: [0.7, 0.2] radius: 25, color: #00ff33, stroke-color: #10f0f0
Campaign D: [0.6, 0.3] radius: 15, stroke-color: #00ff0f, stroke-width: 5px ,color: #ff33f0
Campaign E:::class2: [0.5, 0.4]
Campaign F:::class3: [0.4, 0.5] color: #0000ff
classDef class1 color: #109060
classDef class2 color: #908342, radius : 10, stroke-color: #310085, stroke-width: 10px
classDef class3 color: #f00fff, radius : 10
