Difference between revisions of "PieChart"

From Sega Retro
 
(4 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<includeonly>{{#vardefine:diameter|{{{diameter|400}}}}}<div style="width:{{#var:diameter}}px; height:{{#var:diameter}}px;
+
<includeonly>{{#vardefine:diameter|{{{diameter|400}}}}}{{#vardefine:segmentCount|0}}{{#vardefine:totalAngles|0}}{{#vardefine:contents|{{{1|}}}}}<div style="width:{{#var:diameter}}px; height:{{#var:diameter}}px;
  
 
{{#if:{{{1|}}}|
 
{{#if:{{{1|}}}|
 
background: conic-gradient(  
 
background: conic-gradient(  
−
{{{1}}}
+
{{#sub:{{#var:contents}}|0|-1}}
 
);
 
);
 
}}
 
}}
  
−
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|
 +
{{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
 +
}}
 +
}}
  
−
I was wondering if you could make a pie chart from CSS alone. Turns out [https://www.mediawiki.org/wiki/Template:Pie_chart you can].
+
==Examples==
−
 
+
{{PieChart
−
So let's have a go. Mine will be slightly different because I don't like the idea of using an image. Also it might not work. -[[User:Black Squirrel|Black Squirrel]] ([[User talk:Black Squirrel|talk]]) 10:45, 9 March 2022 (EST)
+
| diameter=200
−
 
+
|{{PieChartSegment
−
{{PieChart}}
+
| angle=45
−
 
+
| caption=hhh
 +
}}
 +
{{PieChartSegment
 +
| angle=10
 +
| caption=iii
 +
| colour=555555
 +
}}
 +
}}
  
  
 
[[Category:Templates]]</noinclude>
 
[[Category:Templates]]</noinclude>

Latest 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%)

Examples

hhh (12.5%)
iii (2.78%)
Retrieved from "https://segaretro.org/index.php?title=Template:PieChart&oldid=758727"