Difference between revisions of "PieChart"

From Sega Retro

(Created page with "<includeonly>{{#vardefine:opp|200}} {{#vardefine:hyp|{{#expr:{{#var:opp}}/sin({{Deg2Rad|70}})}}}} {{#vardefine:adj|{{#expr:sqrt(({{#var:hyp}}^2) - ({{#var:opp}}^2))}}}} {{#va...")
 
 
(10 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}}
+
{{#if:{{{1|}}}|
−
<div style="width:{{#var:diameter}}px; height:{{#var:diameter}}px; background-color:#FF0000;">
+
background: conic-gradient(
−
<div style="width:{{#var:diameter}}px; height:{{#var:diameter}}px; background-color:#FFFF00; border: 2px solid #000000; border-radius:{{#var:diameter}}px; overflow: hidden;">
+
{{#sub:{{#var:contents}}|0|-1}}
−
<div style="width:200px; height:200px; background-color:#FF00FF; border:0px; transform: skew(20deg); position:relative; top: 200px; left:{{#expr:200+({{#var:adj}}/2)}}px;"> </div>
+
);
−
</div>
+
}}
−
</div>
 
  
 +
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).
  
−
</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].
+
<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
 +
}}
 +
}}
  
−
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)
+
==Examples==
−
 
+
{{PieChart
−
{{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"