Co to jest wykres ćwiartkowy?
Wykres ćwiartkowyto narzędzie strategicznej wizualizacji używane do kategoryzowania elementów w czterech różnych strefach na podstawie dwóch ciągłych zmiennych (np. Wysiłek vs. Skuteczność, lub Ważność vs. Pilność). Umieszczając punkty danych na płaszczyźnie współrzędnych 2D podzielonej osiami X i Y, możesz jasno rozróżnić wysokie priorytety „szybkie zwycięstwa” od niskich priorytetów „rozpraszających” lub długoterminowych „strategicznych zakładów.”to narzędzie strategicznej wizualizacji używane do kategoryzowania elementów w czterech różnych strefach na podstawie dwóch ciągłych zmiennych (np. Wysiłek vs. Skuteczność, lub Ważność vs. Pilność). Umieszczając punkty danych na płaszczyźnie współrzędnych 2D podzielonej osiami X i Y, możesz jasno rozróżnić wysokie priorytety „szybkie zwycięstwa” od niskich priorytetów „rozpraszających” lub długoterminowych „strategicznych zakładów.”
Za pomocą Mermaid.js, możesz zdefiniować swoje ćwiartki, tytuły osi i położenie punktów danych za pomocą prostego bloku deklaratywnego, umożliwiając Ci natychmiastowe tworzenie profesjonalnych macierzy decyzyjnych.
Podstawowy przewodnik składniowy: elementy i konstrukcje
Aby stworzyć poprawny, pełni działający wykres ćwiartkowy w Mermaid, musisz opanować układ współrzędnych, etykietowanie osi oraz umieszczanie punktów danych.
1. Inicjowanie płótna ćwiartkowego
Inicjujesz płótno wykresu ćwiartkowego w pierwszym wierszu za pomocą słowa kluczowego quadrantChartSłowo kluczowe. Następnie definiujesz etykiety dla czterech ćwiartek oraz tytuły osi X i Y.
quadrantChart
tytuł Macierz priorytetyzacji projektów
oś-x "Mały wysiłek" --> "Duży wysiłek"
oś-y "Mały wpływ" --> "Duży wpływ"
ćwiartka-1 "Strategiczne zakłady"
ćwiartka-2 "Szybkie zwycięstwa"
ćwiartka-3 "Rozpraszanie"
ćwiartka-4 "Duże projekty"
2. Umieszczanie punktów danych
Dodajesz elementy do wykresu, podając ich nazwę wyświetlania, a następnie współrzędne X i Y (normalizowane między 0 a 1).
0.0to początek osi.1.0to koniec osi.
quadrantChart
tytuł Wpływ vs. Wysiłek
oś-x "Mały wysiłek" --> "Duży wysiłek"
oś-y "Mały wpływ" --> "Duży wpływ"
ćwiartka-1 "Strategiczne zakłady"
ćwiartka-2 "Szybkie zwycięstwa"
ćwiartka-3 "Rozpraszanie"
ćwiartka-4 "Duże projekty"
"Zadanie A": [0.2, 0.8]
"Zadanie B": [0.7, 0.2]
Najlepsze praktyki mapowania macierzy
- Normalizuj swoje dane: Ponieważ współrzędne Mermaid są skalowane od 0,0 do 1,0, przekształć swoje wartości danych wejściowych na ten zakres procentowy przed wstawieniem ich do skryptu.
- Jasne etykiety osi: Zawsze dodawaj opisowe etykiety osi, które jasno określają, co oznaczają osie X i Y (np. „Koszt” w porównaniu do „ROI”). Macierz bez zdefiniowanych osi to po prostu losowy wykres rozrzutu.
- Ogranicz gęstość punktów: Jeśli na jednym wykresie kwadrantowym znajduje się więcej niż 15–20 punktów, stanie się on zbyt zatłoczony i nieczytelny. Jeśli masz większy zbiór danych, rozważ podział na wiele tematycznych wykresów.
Przykłady rzeczywistych wykresów kwadrantowych Mermaid.js
Przykład: Macierz priorytetyzacji funkcji produktu
Ten funkcjonalny szablon pomaga zespołom produktu kategoryzować funkcje na podstawie wysiłku potrzebnego do ich realizacji oraz potencjalnego wpływu na biznes.
quadrantChart
tytuł Priorytetyzacja funkcji produktu
oś-x "Mały wysiłek" --> "Duży wysiłek"
oś-y "Mały wpływ" --> "Duży wpływ"
kwadrant-1 "Długoterminowe zakłady"
kwadrant-2 "Szybkie zwycięstwa"
kwadrant-3 "Niski priorytet"
kwadrant-4 "Główne inicjatywy"
"Login API": [0,1, 0,9]
"Narzędzie do personalizacji motywu": [0,8, 0,3]
"Brama płatności": [0,6, 0,8]
"Tryb ciemny": [0,2, 0,2]
Analiza składni: Przypisując `[0,1, 0,9]` do „Login API”, umieszczamy ją w lewym górnym kwadrancie (duży wpływ, mały wysiłek), oznaczając ją jako „Szybkie zwycięstwo”. Pozwala to stakeholderom natychmiast wizualnie zrozumieć priorytety drogi rozwojowej.