Elwiki

Widget:Radar: Difference between revisions

Widget Discussion

Widget:Radar (view source)

Revision as of 09:57, 29 May 2020

3,902 bytes added ,  29 May 2020
m
Undo revision 634746 by Boxsnake (talk)
VisualWikitext
mNo edit summary
m (Undo revision 634746 by Boxsnake (talk))
Tag: Undo
 
(77 intermediate revisions by the same user not shown)
Line 1: Line 1:
<div style="width: 100%; height: 100%;">
<noinclude>
     <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
'''Widget:Radar''' is a component for radar chart.
         <!--{$PI=3.141592653589793}-->
 
         <!--{nocache}-->
Arguments are listed as following:
         <!--{$step=2*$PI/$dim}-->
 
         <polygon x="250" y="250" fill="transparent" stroke="#000" points="
'''*''' 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)
|-
| '''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>&nbsp;&nbsp;&nbsp;&nbsp;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="
             <!--{for $i=1 to $dim}-->
             <!--{for $i=1 to $dim}-->
             <!--{$deg=$PI/2+($i-1)*$step}-->
             <!--{($xs[$i]*200)|cat:','|cat:($ys[$i]*200)|cat:' '}-->
             <!--{math equation="200*cos(deg)" deg=$deg assign="x"}-->
            <!--{/for}-->
             <!--{math equation="-200*sin(deg)" deg=$deg assign="y"}-->
        "></polygon>
             <!--{$x|cat:','|cat:$y}-->
        <polygon stroke="#ccc" fill="#fff" points="
            <!--{for $i=1 to $dim}-->
            <!--{($xs[$i]*160)|cat:','|cat:($ys[$i]*160)|cat:' '}-->
            <!--{/for}-->
        "></polygon>
        <polygon stroke="#ccc" fill="#eee" points="
            <!--{for $i=1 to $dim}-->
            <!--{($xs[$i]*120)|cat:','|cat:($ys[$i]*120)|cat:' '}-->
             <!--{/for}-->
        "></polygon>
        <polygon stroke="#ccc" fill="#fff" points="
            <!--{for $i=1 to $dim}-->
            <!--{($xs[$i]*80)|cat:','|cat:($ys[$i]*80)|cat:' '}-->
            <!--{/for}-->
        "></polygon>
        <polygon stroke="#ccc" fill="#eee" points="
            <!--{for $i=1 to $dim}-->
            <!--{($xs[$i]*40)|cat:','|cat:($ys[$i]*40)|cat:' '}-->
             <!--{/for}-->
        "></polygon>
 
        <!--{for $i=1 to $dim}-->
        <line x1="0" y1="0" x2="<!--{$xs[$i]*200}-->" y2="<!--{$ys[$i]*200}-->" stroke="#ccc"></line>
        <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}-->
        <polygon stroke-width="0" fill="<!--{$color}-->7f" points="
            <!--{for $i=1 to $dim}-->
             <!--{$denom=$max[$i-1]|default:$max[0]|default:$max}-->
            <!--{$numer=$value[$i-1]|default:0}-->
            <!--{$ratio=$numer/$denom}-->
            <!--{(200*$ratio*$xs[$i])|cat:','|cat:(200*$ratio*$ys[$i])|cat:' '}-->
             <!--{/for}-->
             <!--{/for}-->
         "></polygon>
         "></polygon>
        <!--{/nocache}-->
     </svg>
     </svg>
</div>
    <!--{/nocache}-->
    <!--{/strip}-->
</div></includeonly>
Retrieved from "https://elwiki.net:443/w/Special:MobileDiff/634632...634747"