Widget:Radar: Difference between revisions

m
Undo revision 634746 by Boxsnake (talk)
mNo edit summary
m (Undo revision 634746 by Boxsnake (talk))
Tag: Undo
 
(18 intermediate revisions by the same user not shown)
Line 4: Line 4:
Arguments are listed as following:
Arguments are listed as following:


{{*}} Array argument(s) can be called multiple times.
'''*''' Array argument(s) can be called multiple times.


{| class="wikitable"
{| class="wikitable"
! Key !! Type !! Description !! Default
! Key !! Type !! Description !! Default
|-
|-
| '''size''' || ''Number'' || Size of the chart || (Depends on parent container)
| '''size''' || ''String'' || Size of the chart, use [https://developer.mozilla.org/zh-CN/docs/Web/CSS/width CSS notation] || (Depends on parent container)
|-
|-
| '''dim''' || ''Integer'' || Number of axes ||
| '''dim''' || ''Integer'' || Number of axes ||
Line 15: Line 15:
| '''fontfamily''' || ''String'' || Name of font(s) || Microsoft YaHei
| '''fontfamily''' || ''String'' || Name of font(s) || Microsoft YaHei
|-
|-
| '''fontsize''' || ''Number'' || Font size || 28
| '''fontsize''' || ''Number'' || Font size || 24
|-
|-
| '''color''' || ''HexColor'' (#RRGGBB format only) || The color for the radar area ||
| '''color''' || ''HexColor'' (#RRGGBB format only) || The color for the radar area ||
Line 29: Line 29:
| '''value''' || ''Array<Number>'' || Value for each axis. || 0
| '''value''' || ''Array<Number>'' || Value for each axis. || 0
|}
|}
</noinclude><includeonly><div style="width: 100%;">
</noinclude><includeonly><div style="width: <!--{$size|default:'100%'}-->">
    <!--{strip}-->
     <!--{$PI=3.14159265358979323846}-->
     <!--{$PI=3.14159265358979323846}-->
     <!--{nocache}-->
     <!--{nocache}-->
Line 62: Line 63:
     <!--{$dx=$x2-$x1}-->
     <!--{$dx=$x2-$x1}-->
     <!--{$dy=$y2-$y1}-->
     <!--{$dy=$y2-$y1}-->
     <!--{$fontcorrection=$fontsize|default:28}-->
     <!--{$fontcorrection=$fontsize|default:24}-->
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="<!--{$x1}--> <!--{$y1}--> <!--{$dx}--> <!--{$dy}-->" style="width: <!--{$size|default:'100%'}-->">
     <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="
             transform="
                 translate(0,<!--{$fontcorrection/2}-->)
                 translate(0,<!--{$fontcorrection/2}-->)
Line 101: Line 102:
             font-size="<!--{$fontcorrection}-->"
             font-size="<!--{$fontcorrection}-->"
             font-family="<!--{$fontfamily|default:'Microsoft YaHei'}-->">
             font-family="<!--{$fontfamily|default:'Microsoft YaHei'}-->">
             <!--{$text=$label[$i-1]|explode:'\n'}-->
             <!--{$label[$i-1]|default:''|escape:'html'}-->
            <!--{foreach $text as $i => $val}-->
            <tspan dy="<!--{$i*$fontcorrection}"><!--{$val|default:''|escape:'html'}--></tspan>
         </text>
         </text>
         <!--{/for}-->
         <!--{/for}-->
Line 111: Line 110:
             <!--{$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>
     <!--{/nocache}-->
     <!--{/nocache}-->
    <!--{/strip}-->
</div></includeonly>
</div></includeonly>