Moduł:Piechart/opis

Użycie

Smooth piechart – wykresy kołowe z gładkimi liniami. Obsługuje w zasadzie dowolną liczbę wartości.

Opis parametrów

1

JSON z danymi wykresu (patrz przykłady).

meta

Dodatkowe metadane (opcje). Również w formacie JSON (patrz przykłady).

Przykład

Minimalistyczne

Zwróć uwagę, że drugiej wartości nie trzeba podawać, bo jest wyliczana (zakładamy że sumują się do 100).

<templatestyles src="Piechart/style.css"/>
{{#invoke:Piechart|pie| [ {"value":33.3},  {} ] }}

ALBO

{{Piechart| [ {"value":33.3},  {} ] }}

Wersja z etykietami

Dodane etykiety (label) oraz legenda (w meta).

{{Piechart| [
 {"label": "kobiet: $v", "value": 33.3}, 
 {"label": "mężczyzn: $v"}
]
| meta = {"legend":true}
}}

1. kobiet: 33,3%
2. mężczyzn: 66,7%

Automatyczne skalowanie

W wypadku gdzie nie masz obliczonych procentów możesz użyć automatycznego skalowania. Musisz jedynie podać obie wartości w tym wypadku.

{{Piechart| [
 {"label": "kobiet: $v", "value": 750}, 
 {"label": "mężczyzn: $v", "value": 250}
]
| meta = {"legend":true}
}}

1. kobiet: 750 (75,0%)
2. mężczyzn: 250 (25,0%)

Wiele wartości

Moduł umożliwia wyświetlenie wielu wartości, nie tylko 2.

{{Piechart| [
 {"label": "ciastka: $v", "value": 2, "color":"goldenrod"},
 {"label": "napoje: $v", "value": 1, "color":"#ccf"},
 {"label": "słodycze: $v", "value": 5, "color":"darkred"},
 {"label": "kanapki: $v", "value": 3, "color":"wheat"}
]
|meta={"autoscale":true, "legend":true}
}}

1. ciastka: 2 (18,2%)
2. napoje: 1 (9,1%)
3. słodycze: 5 (45,5%)
4. kanapki: 3 (27,3%)

Zwróć uwagę, że w tym wypadku konieczne było podanie dodatkowej opcji "autoscale":true. Jest to konieczne gdy suma liczba jest mniejsza niż 100.

Legenda i jej położenie

Legendę dodajemy za pomocą meta-właściwości legend jak widać. Można jednak również zmienić kolejność za pomocą direction (z ang. „kierunek”). Możliwe wartości to:

• row (domyślne) – kolejność to lista, wykres;
• row-reverse – kolejność odwrotna, czyli: wykres, lista;
• column – ułożenie kolumnowe (w pionie).
• column-reverse – ułożenie kolumnowe, odwrócone (wykres na górze).

{{Piechart| [
 {"label": "ciastka: $v", "value": 2, "color":"goldenrod"},
 {"label": "napoje: $v", "value": 1, "color":"#ccf"},
 {"label": "słodycze: $v", "value": 5, "color":"darkred"},
 {"label": "kanapki: $v", "value": 3, "color":"wheat"}
]
|meta={"autoscale":true, "legend":true, "direction":"row-reverse"}
}}

row (domyślny direction)

1. ciastka: 2 (18,2%)
2. napoje: 1 (9,1%)
3. słodycze: 5 (45,5%)
4. kanapki: 3 (27,3%)

row-reverse

1. ciastka: 2 (18,2%)
2. napoje: 1 (9,1%)
3. słodycze: 5 (45,5%)
4. kanapki: 3 (27,3%)

column

1. ciastka: 2 (18,2%)
2. napoje: 1 (9,1%)
3. słodycze: 5 (45,5%)
4. kanapki: 3 (27,3%)

column-reverse

1. ciastka: 2 (18,2%)
2. napoje: 1 (9,1%)
3. słodycze: 5 (45,5%)
4. kanapki: 3 (27,3%)

Zielonkawe ramki dodane dla czytelności przykładów. Normalnie nie są dodawane.

Błędy

Błędy należy zgłaszać na stronie Wikipedia:Kawiarenka/Kwestie techniczne.

Zobacz też

• Szablon:Piechart – szablon pomocniczy dla Moduł:Piechart.
• Szablon:Wykres Smooth Pie 2 – szablon dwukolorowy.
• Szablon:Demografia powiatu – wykorzystanie Piechart do statystyk powiatów.
• {{Wykres słupkowy}} – inna forma prezentowania procentów (dla dużej liczby danych wykres słupkowy jest bardziej czytelny niż kołowy).

Testowe:

• Moduł:Piechart/test.
• Szablon:Wykres Smooth Pie 2/test.

Inne implementacje:

• Szablon:Wykres:Kołowy – graph (Vega).