Widget:Radar: Difference between revisions

From Elwiki
VisualWikitext
mNo edit summary
m (Undo revision 634746 by Boxsnake (talk))
Tag: Undo
 
(74 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="600" height="600" viewBox="-300 -300 600 600">
'''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.
             --><!--{for $i=1 to $dim}--><!--
 
             --><!--{$deg=$PI/2+($i-1)*$step}--><!--
{| class="wikitable"
             --><!--{math equation="200*cos(deg)" deg=$deg assign="x"}--><!--
! Key !! Type !! Description !! Default
             --><!--{math equation="-200*sin(deg)" deg=$deg assign="y"}--><!--
|-
             --><!--{$x|cat:','|cat:$y}--><!--
| '''size''' || ''String'' || Size of the chart, use [https://developer.mozilla.org/zh-CN/docs/Web/CSS/width CSS notation] || (Depends on parent container)
             --><!--{/for}--><!--
|-
        -->"></polygon>
| '''dim''' || ''Integer'' || Number of axes ||
        <!--{/nocache}-->
|-
| '''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}-->
             <!--{($xs[$i]*200)|cat:','|cat:($ys[$i]*200)|cat:' '}-->
            <!--{/for}-->
        "></polygon>
        <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}-->
        "></polygon>
     </svg>
     </svg>
</div>
    <!--{/nocache}-->
    <!--{/strip}-->
</div></includeonly>

Latest revision as of 08:57, 29 May 2020

Widget:Radar is a component for radar chart.

Arguments are listed as following:

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

Key Type Description Default
size String Size of the chart, use 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>
    or
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
Retrieved from "https://elwiki.net:443/wiki/index.php?title=Widget:Radar&oldid=634747"