ElEditors, Interface administrators, Administrators
85,546
edits
Widget:Radar: Difference between revisions
From Elwiki
m
Undo revision 634746 by Boxsnake (talk)
mNo edit summary |
Tag: Undo |
||
| (37 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
< | <noinclude> | ||
'''Widget:Radar''' is a component for radar chart. | |||
Arguments are listed as following: | |||
'''*''' Array argument(s) can be called multiple times. | |||
{| class="wikitable" | |||
! Key !! Type !! Description !! Default | |||
|- | |||
| '''size''' || ''String'' || Size of the chart, use [https://developer.mozilla.org/zh-CN/docs/Web/CSS/width CSS notation] || (Depends on parent container) | |||
<!--{/for}--> | |- | ||
| '''dim''' || ''Integer'' || Number of axes || | |||
|- | |||
| '''fontfamily''' || ''String'' || Name of font(s) || Microsoft YaHei | |||
|- | |||
| '''fontsize''' || ''Number'' || Font size || 24 | |||
|- | |||
| '''color''' || ''HexColor'' (#RRGGBB format only) || The color for the radar area || | |||
|- | |||
| '''label''' || ''Array<String>'' || Label(s) for each axis in sequence || (Empty String) | |||
|- | |||
| '''max''' || ''Array<Number>''<br> or<br>''Integer'' || Max value for each axis. | |||
* When using an integer, all axes will have the same max value. | |||
* When using an array, each axis will use the corresponding max value. | |||
* When using an array but the corresponding max value is missing, the first value in the array will be used. | |||
|| '''max[0]''' (Array Type) | |||
|- | |||
| '''value''' || ''Array<Number>'' || Value for each axis. || 0 | |||
|} | |||
</noinclude><includeonly><div style="width: <!--{$size|default:'100%'}-->"> | |||
<!--{strip}--> | |||
<!--{$PI=3.14159265358979323846}--> | |||
<!--{nocache}--> | |||
<!--{$step=2*$PI/$dim}--> | |||
<!--{$xmin=0}--> | |||
<!--{$xmax=0}--> | |||
<!--{$ymin=0}--> | |||
<!--{$ymax=0}--> | |||
<!--{for $i=1 to $dim}--> | |||
<!--{$deg=$PI/2+($i-1)*$step}--> | |||
<!--{math equation="cos(deg)" deg=$deg assign="x"}--> | |||
<!--{math equation="-sin(deg)" deg=$deg assign="y"}--> | |||
<!--{append var="xs" value=$x index=$i}--> | |||
<!--{append var="ys" value=$y index=$i}--> | |||
<!--{if $x gt $xmax}--> | |||
<!--{$xmax=$x}--> | |||
<!--{/if}--> | |||
<!--{if $x lt $xmin}--> | |||
<!--{$xmin=$x}--> | |||
<!--{/if}--> | |||
<!--{if $y gt $ymax}--> | |||
<!--{$ymax=$y}--> | |||
<!--{/if}--> | |||
<!--{if $y lt $ymin}--> | |||
<!--{$ymin=$y}--> | |||
<!--{/if}--> | |||
<!--{/for}--> | |||
<!--{$x1=$xmin*280}--> | |||
<!--{$x2=$xmax*280}--> | |||
<!--{$y1=$ymin*250}--> | |||
<!--{$y2=$ymax*250}--> | |||
<!--{$dx=$x2-$x1}--> | |||
<!--{$dy=$y2-$y1}--> | |||
<!--{$fontcorrection=$fontsize|default:24}--> | |||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="<!--{$x1}--> <!--{$y1}--> <!--{$dx}--> <!--{$dy}-->" style="width: 100%;"> | |||
<polygon stroke="#ccc" fill="#eee" points=" | <polygon stroke="#ccc" fill="#eee" points=" | ||
<!--{for $i=1 to $dim}--> | <!--{for $i=1 to $dim}--> | ||
<!--{($xs[$i]*200)|cat:','|cat:($ys[$i]*200)}--> | <!--{($xs[$i]*200)|cat:','|cat:($ys[$i]*200)|cat:' '}--> | ||
<!--{/for}--> | <!--{/for}--> | ||
"></polygon> | "></polygon> | ||
<polygon stroke="#ccc" fill="#fff" points=" | <polygon stroke="#ccc" fill="#fff" points=" | ||
<!--{for $i=1 to $dim}--> | <!--{for $i=1 to $dim}--> | ||
<!--{($xs[$i]*160)|cat:','|cat:($ys[$i]*160)}--> | <!--{($xs[$i]*160)|cat:','|cat:($ys[$i]*160)|cat:' '}--> | ||
<!--{/for}--> | <!--{/for}--> | ||
"></polygon> | "></polygon> | ||
<polygon stroke="#ccc" fill="#eee" points=" | <polygon stroke="#ccc" fill="#eee" points=" | ||
<!--{for $i=1 to $dim}--> | <!--{for $i=1 to $dim}--> | ||
<!--{($xs[$i]*120)|cat:','|cat:($ys[$i]*120)}--> | <!--{($xs[$i]*120)|cat:','|cat:($ys[$i]*120)|cat:' '}--> | ||
<!--{/for}--> | <!--{/for}--> | ||
"></polygon> | "></polygon> | ||
<polygon stroke="#ccc" fill="#fff" points=" | <polygon stroke="#ccc" fill="#fff" points=" | ||
<!--{for $i=1 to $dim}--> | <!--{for $i=1 to $dim}--> | ||
<!--{($xs[$i]*80)|cat:','|cat:($ys[$i]*80)}--> | <!--{($xs[$i]*80)|cat:','|cat:($ys[$i]*80)|cat:' '}--> | ||
<!--{/for}--> | <!--{/for}--> | ||
"></polygon> | "></polygon> | ||
<polygon stroke="#ccc" fill="#eee" points=" | <polygon stroke="#ccc" fill="#eee" points=" | ||
<!--{for $i=1 to $dim}--> | <!--{for $i=1 to $dim}--> | ||
<!--{($xs[$i]*40)|cat:','|cat:($ys[$i]*40)}--> | <!--{($xs[$i]*40)|cat:','|cat:($ys[$i]*40)|cat:' '}--> | ||
<!--{/for}--> | <!--{/for}--> | ||
"></polygon> | "></polygon> | ||
<!--{for $i=1 to $dim}--> | <!--{for $i=1 to $dim}--> | ||
<line x1="0" y1="0" x2="<!--{$xs[$i]*200}-->" y2="<!--{$ys[$i]*200}-->" stroke="#ccc"></line> | <line x1="0" y1="0" x2="<!--{$xs[$i]*200}-->" y2="<!--{$ys[$i]*200}-->" stroke="#ccc"></line> | ||
<text | |||
<text transform="translate(<!--{($xs[$i]*230)|cat:','|cat:($ys[$i]*230)}-->)" fill="#000" text-anchor="middle"><!--{$label[$i-1]|default:''|escape:'html'}--></text> | transform=" | ||
translate(0,<!--{$fontcorrection/2}-->) | |||
translate(<!--{($xs[$i]*230)|cat:','|cat:($ys[$i]*230)}-->) | |||
" | |||
fill="#000" | |||
text-anchor="middle" | |||
font-size="<!--{$fontcorrection}-->" | |||
font-family="<!--{$fontfamily|default:'Microsoft YaHei'}-->"> | |||
<!--{$label[$i-1]|default:''|escape:'html'}--> | |||
</text> | |||
<!--{/for}--> | <!--{/for}--> | ||
<polygon stroke-width="0" fill="<!--{$color}-->7f" points=" | <polygon stroke-width="0" fill="<!--{$color}-->7f" points=" | ||
<!--{for $i=1 to $dim}--> | <!--{for $i=1 to $dim}--> | ||
<!--{$denom=$max[$i-1]|default:$max}--> | <!--{$denom=$max[$i-1]|default:$max[0]|default:$max}--> | ||
<!--{$numer=$value[$i-1]|default:0}--> | <!--{$numer=$value[$i-1]|default:0}--> | ||
<!--{$ratio=$numer/$denom}--> | <!--{$ratio=$numer/$denom}--> | ||
<!--{(200*$ratio*$xs[$i])|cat:','|cat:(200*$ratio*$ys[$i])}--> | <!--{(200*$ratio*$xs[$i])|cat:','|cat:(200*$ratio*$ys[$i])|cat:' '}--> | ||
<!--{/for}--> | <!--{/for}--> | ||
"></polygon> | "></polygon> | ||
</svg> | </svg> | ||
</div> | <!--{/nocache}--> | ||
<!--{/strip}--> | |||
</div></includeonly> | |||
