Wykres kołowy
Pokaż proporcje na pierwszy rzut oka
Czym jest Wykres kołowy?
Wykres kołowy pokazuje, jak całość dzieli się na części: alokacja budżetu, udziały w rynku, odpowiedzi z ankiet, rozkład czasu. W Mermaid to cztery linijki tekstu — idealne do dokumentacji i raportów.
Wykresy kołowe pojawiają się na slajdach budżetowych, w przeglądach kosztów i podsumowaniach ankiet — wszędzie tam, gdzie jedną całość trzeba rozbić na części dla nietechnicznego odbiorcy. Zapisany w Mermaidzie wykres to cztery linijki żyjące w dokumencie zamiast zrzutu ekranu z arkusza, którego nikt już nie odnajdzie. Ograniczenie jest ostre: jedna całość, jeden moment. Porównanie okresów albo pokazanie zbyt małej kategorii wymaga czegoś innego.
Żywy przykład
pie showData
title Cloud spend by service
"Compute" : 42
"Storage" : 23
"Network" : 18
"Databases" : 12
"Other" : 5Kiedy go używać
Częste błędy
Etykiety wycinków bez cudzysłowu
Zapis Compute : 42 zawiedzie: etykieta musi być łańcuchem w cudzysłowie, nawet gdy jest jednym słowem bez spacji. To zdecydowanie najczęstszy powód, dla którego wykres kołowy odmawia renderowania.
Wycinki są sortowane według wielkości
Mermaid rysuje wycinki od największego, niezależnie od kolejności zapisu, a legenda zachowuje Twoją kolejność. Nigdy nie opieraj znaczenia na położeniu wycinka — opisz go albo pogódź się z rozbieżnością.
Wartości już będące procentami
Mermaid sam wylicza udział każdej części w całości. Podanie mu procentów sumujących się po zaokrągleniach do 98 albo 103 po cichu przeskaluje wszystkie wycinki, więc wykres przestanie zgadzać się z tabelą obok.
Podstawowa składnia
pie title Budget
"Engineering" : 50
"Marketing" : 30
"Operations" : 20pie showData title Cloud spend by serviceshowData wypisuje w legendzie surową wartość obok każdej etykiety, przy procencie wyliczonym przez Mermaida. Tytuł jest opcjonalny i może też stać w linii pie.
"Compute" : 42Każdy wycinek to etykieta w cudzysłowie, dwukropek i liczba. Ułamki dziesiętne są dozwolone, a procenty wylicza Mermaid, więc wartości nie muszą sumować się do niczego konkretnego.
%%{init: {"themeVariables": {"pie1": "#4f46e5"}}}%%Kolory wycinków pochodzą z motywu. Dyrektywa init w pierwszej linii nadpisuje je pojedynczo, od pie1 do pie12, tak by pasowały do palety marki.
%% Q3 figures, source: finance exportDwa znaki procentu rozpoczynają komentarz. Zapisanie obok liczb tego, skąd pochodzą, jest jedyną rzeczą, dzięki której wykres pozostaje wiarygodny pół roku później.
Pytania o ten diagram
Czy mogę pokazać rzeczywiste wartości na wykresie?
Tak — dodaj showData po słowie kluczowym pie, a Mermaid wyświetli wartość obok każdej etykiety, razem z procentem.
Ile wycinków powinien mieć wykres kołowy?
Maksymalnie pięć do siedmiu dla czytelności. Grupuj małe kategorie w „Inne” — zawsze możesz podlinkować szczegółową tabelę.
Czy mogę wstawić wykres kołowy Mermaid do raportu w Markdown?
Tak. GitHub i GitLab renderują wykresy kołowe z bloku ogrodzonego z oznaczeniem mermaid, a liczby pozostają edytowalne w źródle. Do pliku PDF albo slajdu wyeksportuj SVG, żeby etykiety zostały ostre w każdym rozmiarze.
Czy jeden wykres kołowy porówna dwa okresy?
Nie. Mermaid obsługuje jedną serię — bez grupowanych wycinków, bez pierścienia, bez drugiego kręgu. Narysuj dwa wykresy obok siebie albo użyj tabeli, gdy czytelnik ma porównywać wartości, a nie widzieć proporcje.
Jak zmienić kolory wycinków?
Ustaw zmienne motywu od pie1 do pie12 w dyrektywie init w pierwszej linii albo zmień cały motyw. Wycinka nie da się pokolorować z jego własnej linii, dzięki czemu cała paleta pozostaje zdefiniowana w jednym miejscu.
Dlaczego mój wykres kołowy jest taki mały na stronie?
Wykres skaluje się do szerokości kontenera, więc wąska kolumna zmniejsza razem z nim etykiety. Daj mu więcej miejsca na stronie albo wyeksportuj PNG w 2×, gdy wykres ma być czytany z projektora.
Wykres kołowy czy inny typ diagramu?
Wykres kołowy czy wykres ćwiartkowy?
Koło jest uczciwe tylko wtedy, gdy części należą do jednej całości, a lista jest wyczerpująca: ten sam budżet, ta sama populacja. Jeśli elementy mierzono osobno albo zostawiono z nich tylko te ciekawe, procenty wypisane przez Mermaida nic nie znaczą — umieść je wtedy na wykresie ćwiartkowym.
Wykres kołowy czy wykres Gantta?
Oba bywają odpowiedzią na pytanie „gdzie idzie wysiłek”. Koło dzieli całość w jednym momencie — 40% kwartału na pracę platformową. Gantt rozkłada tę samą pracę na kalendarz. Wybierz koło, gdy decyzją jest podział, a Gantta wtedy, gdy decyzją jest kolejność.
Stwórz swój Wykres kołowy już teraz
Opisz go naturalnym językiem — AI napisze kod Mermaid za Ciebie.
Otwórz Mermaid Studio