Diagram kwadrantowy
Wykres kwadrantowy to wizualizacja dzieląca dane na cztery kwadranty. Służy do rysowania punktów danych na dwuwymiarowej siatce, gdzie jedna zmienna jest reprezentowana na osi x, a druga na osi y. Podział na kwadranty jest określany przez podzielenie diagramu na cztery równe części zgodnie z zestawem kryteriów specyficznych dla analizowanych danych. Wykresy kwadrantowe są często używane do identyfikowania wzorców i trendów w danych oraz ustalania priorytetów działań na podstawie pozycji punktów danych na diagramie. Są często stosowane w scenariuszach takich jak biznes, marketing i zarządzanie ryzykiem.
Przykład
Kopiuj
Osadź
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]
Składnia
Jeśli na diagramie nie ma dostępnych punktów danych, tekst osi i nazwy kwadrantów będą renderowane na środku odpowiednich kwadrantów. Jeśli istnieją punkty danych, etykiety osi x będą renderowane od lewej strony odpowiedniego kwadrantu, a tekst kwadrantu jest wyświetlany na dole diagramu. Etykiety osi y będą renderowane na dole odpowiedniego kwadrantu, a tekst kwadrantu będzie renderowany na górze odpowiedniego kwadrantu.
Dla wartości współrzędnych punktów danych wartość minimalna to 0, a maksymalna to 1.
Tytuł
Tytuł to krótki opis diagramu, który zawsze będzie renderowany na górze diagramu.
Przykład
Kopiuj
Osadź
quadrantChart
title This is a sample example
x-axis
Oś x określa tekst wyświetlany na osi x. Oś x dzieli się na dwie części: 'lewą' i 'prawą'; możesz podać obie lub tylko 'lewą'. Instrukcja powinna zaczynać się od x-axis, następnie left axis text, potem separator -->, a na końcu right axis text.
Przykład
1. x-axis --> renderowany będzie zarówno tekst lewej, jak i prawej osi.
2. x-axis renderuje tylko tekst lewej osi.
y-axis
Oś y określa tekst wyświetlany na osi y. Oś y dzieli się na dwie części: 'górną' i 'dolną'; możesz podać obie lub tylko 'dolną'. Instrukcja powinna zaczynać się od y-axis, następnie bottom axis text, potem separator -->, a na końcu top axis text.
Przykład
1. y-axis --> renderowany będzie zarówno tekst dolnej, jak i górnej osi.
2. y-axis renderuje tylko tekst dolnej osi.
Tekst kwadrantu
quadrant-[1,2,3,4] określa zawartość tekstową wyświetlaną w każdym kwadrancie.
Przykład
1. quadrant-1 określa tekst wyświetlany w prawym górnym kwadrancie
2. quadrant-2 określa tekst wyświetlany w lewym górnym kwadrancie.
3. quadrant-3 określa tekst wyświetlany w lewym dolnym kwadrancie.
4. quadrant-4 określa tekst wyświetlany w prawym dolnym kwadrancie.
Kropka
Służy do narysowania okręgu wewnątrz wykresu kwadrantowego. Składnia to : [x, y], gdzie x i y przyjmują wartości od 0 do 1.
Przykład
1. Point 1: [0.75, 0.80] , punkt 1 zostanie narysowany w prawym górnym kwadrancie.
2. Point 2: [0.35, 0.24] , punkt 2 zostanie narysowany w lewym dolnym kwadrancie.
Konfiguracja diagramu
| Parametr | Opis | Wartość domyślna |
|---|---|---|
| chartWidth | Szerokość diagramu | 500 |
| chartHeight | Wysokość diagramu | 500 |
| titlePadding | Górny i dolny margines wewnętrzny tytułu | 10 |
| titleFontSize | Rozmiar czcionki tytułu | 20 |
| quadrantPadding | Wypełnienie poza wszystkimi kwadrantami | 5 |
| quadrantTextTopPadding | Górny margines tekstu kwadrantu, gdy tekst jest rysowany na górze (nie na punkcie danych) | 5 |
| quadrantLabelFontSize | Rozmiar czcionki tekstu kwadrantu | 16 |
| quadrantInternalBorderStrokeWidth | Szerokość wewnętrznej ramki kwadrantu | 1 |
| quadrantExternalBorderStrokeWidth | Szerokość obrysu zewnętrznej ramki kwadrantu | 2 |
| xAxisLabelPadding | Górny i dolny margines wewnętrzny tekstu osi x | 5 |
| xAxisLabelFontSize | Rozmiar czcionki tekstu osi x | 16 |
| xAxisPosition | Pozycja osi x (górna, dolna). Jeśli istnieją punkty danych, oś x będzie zawsze renderowana na dole | top |
| yAxisLabelPadding | Lewy i prawy margines wewnętrzny tekstu osi y | 5 |
| yAxisLabelFontSize | Rozmiar czcionki tekstu osi y | 16 |
| yAxisPosition | Pozycja osi y (lewa, prawa) | left |
| pointTextPadding | Odstęp między punktem danych a tekstem poniżej | 5 |
| pointLabelFontSize | Rozmiar czcionki tekstu punktu danych | 12 |
| pointRadius | Promień punktu danych | 5 |
Zmienne motywu diagramu
| Parametr | Opis |
|---|---|
| quadrant1Fill | Kolor wypełnienia prawego górnego kwadrantu |
| quadrant2Fill | Kolor wypełnienia lewego górnego kwadrantu |
| quadrant3Fill | Kolor wypełnienia lewego dolnego kwadrantu |
| quadrant4Fill | Kolor wypełnienia prawego dolnego kwadrantu |
| quadrant1TextFill | Kolor tekstu prawego górnego kwadrantu |
| quadrant2TextFill | Kolor tekstu lewego górnego kwadrantu |
| quadrant3TextFill | Kolor tekstu lewego dolnego kwadrantu |
| quadrant4TextFill | Kolor tekstu prawego dolnego kwadrantu |
| quadrantPointFill | Kolor wypełnienia punktu danych |
| quadrantPointTextFill | Kolor tekstu punktu danych |
| quadrantXAxisTextFill | Kolor tekstu osi x |
| quadrantYAxisTextFill | Kolor tekstu osi y |
| quadrantInternalBorderStrokeFill | Kolor wewnętrznej ramki kwadrantu |
| quadrantExternalBorderStrokeFill | Kolor zewnętrznej ramki kwadrantu |
| quadrantTitleFill | Kolor tytułu |
Przykład konfiguracji i motywu
Kopiuj
Osadź
---
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
Styl punktów danych
Punktom danych można nadać styl bezpośrednio lub użyć zdefiniowanej klasy współdzielonej
Styl bezpośredni
Kopiuj
Osadź
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
Styl klasy
Kopiuj
Osadź
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
Dostępne style:
| Parametr | Opis |
|---|---|
| color | Kolor wypełnienia punktu danych |
| radius | Promień punktu danych |
| stroke-width | Szerokość ramki punktu danych |
| stroke-color | Kolor ramki punktu danych (nieaktywny, gdy nie określono stroke-width) |
Kolejność priorytetów: 1. Styl bezpośredni 2. Styl klasy 3. Styl motywu
Przykład stylu
Kopiuj
Osadź
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
