Difference between revisions of "PieChart"

From Sega Retro

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: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}}
 
);
 
);
 
}}
 
}}
Line 14: Line 14:
 
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)
 
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)
  
{{PieChart}}
+
{{PieChart|
 
+
{{PieChartSegment
 +
| angle=10
 +
| colour=0000FF
 +
}}
 +
{{PieChartSegment
 +
| angle=20
 +
| colour=FF00FF
 +
}}
 +
{{PieChartSegment
 +
| angle=40
 +
| colour=FFFFFF
 +
}}
 +
{{PieChartSegment
 +
| angle=50
 +
| colour=FF0000
 +
}}
 +
}}
  
  
 
[[Category:Templates]]</noinclude>
 
[[Category:Templates]]</noinclude>

Revision as of 05:34, 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)