Wykresy kołowe to okrągłe grafiki statystyczne używane do przedstawiania proporcji liczbowych poprzez podział danych na kawałki. W Mermaid.js możesz automatycznie tworzyć czyste, reagujące na zmiany podziały danych bez zajmowania się skomplikowanymi bibliotekami wykresów ani narzędziami do projektowania wektorowego. Silnik renderujący dynamicznie obsługuje wszystkie przypisania kolorów i obliczenia procentowe.
Podstawowa struktura składni
Każdy wykres kołowy zaczyna się od pie deklaracji. Możesz opcjonalnie dodać tytuł, po którym następują wpisy danych, gdzie etykiety kategorii są otoczone cudzysłowami i sparowane z dodatnimi wartościami liczbowymi.
pie
tytuł Przykładowy wykres kołowy
"Kategoria A" : 45
"Kategoria B" : 30
"Kategoria C" : 25
Odwołanie do składni
Poniższa tabela rozkłada podstawowe opcje strukturalne używane do tworzenia mapy wykresu kołowego w Mermaid.js.
| Składnik | Opis | Przykład składni |
|---|---|---|
| Deklaracja | Inicjuje silnik renderowania wykresu kołowego. | pie |
| Flaga wyświetlania danych | Opcjonalny modyfikator dodawany od razu po pieaby wyświetlić rzeczywiste liczby obok obliczonych procentów. |
pie showData |
| Tytuł | Opcjonalny nagłówek wyświetlany wyraźnie powyżej środka układu wykresu. | tytuł Źródła przychodów Q3 |
| Etykieta wpisu danych | Nazwa kategorii, która zawsze musi być otoczona podwójnymi cudzysłowami. | "Wyszukiwanie organiczne" |
| Separator danych | Znak dwukropka oddzielający ciąg znaków etykiety od jej wartości matematycznej. | : |
| Wartość danych | Liczba dodatnia. Obsługuje bezwzględne liczby lub bezpośrednie wagi dziesiętne do dwóch miejsc po przecinku. | 54.25 |
Szczegół z rzeczywistego świata: źródła ruchu na stronie internetowej
Ten szablon przedstawia klasyczny podział pulpitu marketingowego i analitycznego. Używa parametru showData aby jasno wyświetlić surowe metryki ruchu bezpośrednio w legendzie, podczas gdy wykres przedstawia proporcje układu.
pie showData title Podstawowe kanały ruchu
"Wyszukiwarki organiczne" : 3540
"Ruch bezpośredni" : 2410
"Media społecznościowe" : 1850
"Strony odwołujące" : 920
"Kampanie e-mailowe" : 680
Porada składniowa: Domyślnie Mermaid wyświetla tylko względne obliczone procenty (np. 35%) nad każdym obszarem wykresu. Dodanie słowa kluczowego showData natychmiast po pie zmienia etykiety tak, aby wyświetlały zarówno procent na wykresie, jak i dokładne wartości surowe w dołączonym liście legendy.
Zaawansowane pojęcie: Dyrektywy i formatowanie
Dla stron dokumentacji o wysokiej gęstości możesz zastosować dyrektywę konfiguracji w linii w górnej części fragmentu kodu, aby dostosować zachowanie stylizacji, zmienić przesunięcia umiejscowienia tekstu lub zmodyfikować style linii strukturalnych.
---
config:
pie:
textPosition: 0.6
themeVariables:
pieOuterStrokeWidth: "3px"
---
pie title Przydział budżetu operacyjnego
"Rozwój produktu" : 40.5
"Marketing i wzrost" : 25.25
"Operacje z klientami" : 20.0
"Nakłady administracyjne" : 14.25
Typowe błędy składniowe
Choć wykresy kołowe mają jedną z najprostszych składni w Mermaid, kilka błędów formatowania może spowodować niepowodzenie analizy układu. Unikaj tych typowych błędów:
- Liczby ujemne: Silnik renderujący akceptuje tylko dodatnie wartości liczbowe. Przekazanie wartości ujemnej lub zera spowoduje naruszenie granic przetwarzania matematycznego.
- Wymagania dotyczące cudzysłowów: Etykiety kategorii danych muszą zawsze używać podwójnych cudzysłowów. Jednokrotne cudzysłowy lub brak cudzysłowów spowoduje niepowodzenie kompilacji.
- Ograniczenia dokładności dziesiętnej: Choć Mermaid płynnie obsługuje dokładne liczby dziesiętne zmiennoprzecinkowe, domyślnie śledzi parametry z dokładnością do dwóch miejsc po przecinku. Zaokrąglanie wartości z góry zapewnia ścisłą spójność.
- Gęstość kawałków: Aby zapewnić czytelne komunikowanie wizualne, najlepszym rozwiązaniem jest ograniczenie wykresów do 6–8 kawałków. Jeśli zestawy danych zawierają więcej elementów, połącz mniejsze węzły razem w kategorii „Pozostałe”, aby zapewnić czytelność projektu.