Difference between revisions of "PieChart"

Revision as of 05:13, 10 March 2022

I was wondering if you could make a pie chart from CSS alone. Turns out you can.

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. -Black Squirrel (talk) 10:45, 9 March 2022 (EST)

@@ Line 1: / Line 1: @@
-<includeonly>{{#vardefine:opp|200}}
+<includeonly><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: conic-gradient(
-     red 6deg, orange 6deg 18deg, yellow 18deg 45deg,
+{{{1|}}}
-     green 45deg 110deg, blue 110deg 200deg, purple 200deg
 );
-border: 2px solid #000000; border-radius:{{#var:diameter}}px; overflow: hidden;">
+border: 2px solid #000000; border-radius:{{#var:diameter}}px; overflow: hidden;"></div></includeonly><noinclude>
-{{{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].
+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].
 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)

Template

Difference between revisions of "PieChart"

From Sega Retro

Revision as of 05:13, 10 March 2022