Difference between revisions of "PieChartSegment"
From Sega Retro
(Created page with "<includeonly><div style="display:none;"> {{#vardefine:opp|{{{radius|}}}}} {{#vardefine:hyp|{{#expr:{{#var:opp}}/sin({{Deg2Rad|{{#expr:90-{{{angle|}}}}}}})}}}} {{#vardefine:adj...") |
|||
| Line 1: | Line 1: | ||
| − | <includeonly><div style="display:none;"> | + | <includeonly><div style="display:none;">{{incvar|zindex}}{{#vardefine:skewangle|{{#expr:90-{{{angle|}}}}}}} |
| − | {{#vardefine:opp|{{ | + | {{#vardefine:opp|{{#var:radius}}}} |
| − | {{#vardefine:hyp|{{#expr:{{#var:opp}}/sin({{Deg2Rad|{{#expr:90-{{ | + | {{#vardefine:hyp|{{#expr:{{#var:opp}}/sin({{Deg2Rad|{{#expr:90-{{#var:skewangle}}}}}})}}}} |
{{#vardefine:adj|{{#expr:sqrt(({{#var:hyp}}^2) - ({{#var:opp}}^2))}}}} | {{#vardefine:adj|{{#expr:sqrt(({{#var:hyp}}^2) - ({{#var:opp}}^2))}}}} | ||
| − | </div><div style="width:{{ | + | |
| + | {{#vardefine:translationX|{{#expr:{{#var:radius}}+({{#var:adj}}/2)}}}} | ||
| + | {{#vardefine:translationY|{{#var:radius}}}} | ||
| + | |||
| + | </div><div style="width:{{#var:radius}}px; height:{{#var:radius}}px; background-color:#{{{colour|}}}{{{color|}}}; border:0px; transform: translate({{#var:translationX}}px, {{#expr:(-{{#var:oldTranslationY}}) + {{#var:translationY}}}}px) skew({{#var:skewangle}}deg); position:relative;"></div>{{ | ||
| + | #vardefine:oldTranslationX|{{#var:translationX}}}}{{ | ||
| + | #vardefine:oldTranslationY|{{#var:translationY}}}} | ||
| + | </includeonly><noinclude> | ||
| + | {{#vardefine:zindex|0}}{{#vardefine:oldTranslationX|0}}{{#vardefine:oldTranslationY|0}} | ||
{{PieChart| | {{PieChart| | ||
{{PieChartSegment | {{PieChartSegment | ||
| − | | | + | | angle=40 |
| + | | colour=0000FF | ||
| + | }} | ||
| + | {{PieChartSegment | ||
| angle=20 | | angle=20 | ||
| + | | colour=FF00FF | ||
}} | }} | ||
}} | }} | ||
[[Category:Templates]]</noinclude> | [[Category:Templates]]</noinclude> | ||
Revision as of 13:38, 9 March 2022
<div style="width:400px; height:400px;
background: conic-gradient(
<div style="width:px; height:px; background-color:#0000FF; border:0px; transform: translate(Expression error: Unexpected < operator.px, Expression error: Missing operand for +.px) skew(50deg); position:relative;">
<div style="width:px; height:px; background-color:#FF00FF; border:0px; transform: translate(Expression error: Unexpected < operator.px, Expression error: Missing operand for -.px) skew(70deg); position:relative;">