Difference between revisions of "PieChart"

From Sega Retro
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
<includeonly>{{#vardefine:opp|200}}
+
<includeonly>{{#vardefine:diameter|{{{diameter|400}}}}}{{#vardefine:segmentCount|0}}{{#vardefine:totalAngles|0}}{{#vardefine:contents|{{{1|}}}}}<div style="width:{{#var:diameter}}px; height:{{#var:diameter}}px;
−
{{#vardefine:hyp|{{#expr:{{#var:opp}}/sin({{Deg2Rad|70}})}}}}
 
−
{{#vardefine:adj|{{#expr:sqrt(({{#var:hyp}}^2) - ({{#var:opp}}^2))}}}}
 
−
{{#vardefine:diameter|400}}{{#vardefine:radius|{{#expr:{{#var:diameter}}/2}}}}
 
−
<div style="width:{{#var:diameter}}px; height:{{#var:diameter}}px; background-color:#FFFF00; border: 2px solid #000000; border-radius:{{#var:diameter}}px; overflow: hidden;">
 
−
{{{1|}}}
 
−
</div>
 
  
−
</includeonly><noinclude>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].
+
{{#if:{{{1|}}}|
 +
background: conic-gradient(
 +
{{#sub:{{#var:contents}}|0|-1}}
 +
);
 +
}}
  
−
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)
+
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).
  
−
{{PieChart}}
+
<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
 +
}}
 +
}}
 +
 
 +
==Examples==
 +
{{PieChart
 +
| diameter=200
 +
|{{PieChartSegment
 +
| 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"