Difference between revisions of "PieChart"
From Sega Retro
| Line 7: | Line 7: | ||
}} | }} | ||
| − | border: 2px solid #000000; border-radius:{{#var:diameter}}px; overflow: hidden;"></div></includeonly><noinclude> | + | border: 2px solid #000000; border-radius:{{#var:diameter}}px; overflow: hidden;"></div> |
| − | + | {{#var:legend}}{{clearvar|contents|legend}}</includeonly><noinclude> | |
| − | + | Template for pie charts. This uses the CSS conic-gradient function, which has been a feature of all major browsers since 2020 - older browsers might just draw an empty circle (or maybe even a square). | |
| − | |||
| − | |||
| − | |||
| + | <pre> | ||
| + | {{PieChart| | ||
| + | {{PieChartSegment | ||
| + | | angle=10 | ||
| + | | caption=aaa | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| + | | angle=20 | ||
| + | | caption=bbb | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| + | | angle=30 | ||
| + | | caption=ccc | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| + | | angle=40 | ||
| + | | caption=ddd | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| + | | angle=50 | ||
| + | | caption=eee | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| + | | angle=60 | ||
| + | | caption=fff | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| + | | angle=45 | ||
| + | | caption=ggg | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| + | | angle=45 | ||
| + | | caption=hhh | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| + | | angle=10 | ||
| + | | caption=iii | ||
| + | | colour=555555 | ||
| + | }} | ||
| + | }} | ||
| + | </pre> | ||
{{PieChart| | {{PieChart| | ||
{{PieChartSegment | {{PieChartSegment | ||
| Line 54: | Line 92: | ||
}} | }} | ||
| − | {{ | + | ==Exmaples== |
| + | {{PieChart | ||
| + | | diameter=200 | ||
| + | |{{PieChartSegment | ||
| + | | angle=45 | ||
| + | | caption=hhh | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| + | | angle=10 | ||
| + | | caption=iii | ||
| + | | colour=555555 | ||
| + | }} | ||
| + | }} | ||
| + | |||
[[Category:Templates]]</noinclude> | [[Category:Templates]]</noinclude> | ||
Revision as of 06:31, 10 March 2022
Template for pie charts. This uses the CSS conic-gradient function, which has been a feature of all major browsers since 2020 - older browsers might just draw an empty circle (or maybe even a square).
{{PieChart|
{{PieChartSegment
| angle=10
| caption=aaa
}}
{{PieChartSegment
| angle=20
| caption=bbb
}}
{{PieChartSegment
| angle=30
| caption=ccc
}}
{{PieChartSegment
| angle=40
| caption=ddd
}}
{{PieChartSegment
| angle=50
| caption=eee
}}
{{PieChartSegment
| angle=60
| caption=fff
}}
{{PieChartSegment
| angle=45
| caption=ggg
}}
{{PieChartSegment
| angle=45
| caption=hhh
}}
{{PieChartSegment
| angle=10
| caption=iii
| colour=555555
}}
}}
aaa (2.78%)
bbb (5.56%)
ccc (8.33%)
ddd (11.11%)
eee (13.89%)
fff (16.67%)
ggg (12.5%)
hhh (12.5%)
iii (2.78%)
Exmaples
hhh (12.5%)
iii (2.78%)