欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

AngularGauge 属性解析详解

程序员文章站 2022-04-04 17:01:27 
<chart bgcolor='ffffff' upperlimit='120' lowerlimit='0' basefontcolor='666666' majortmnumber='10' majortmcolor='666666' majortmheight='8' minortmnumber='5' minortmcolor='666666' minortmheight='3' pivotradius='10' showgaugeborder='0' gaugeouterradius='100' gaugeinnerradius='90' gaugeoriginx='170' gaugeoriginy='170' gaugescaleangle='220' displayvaluedistance='20' placevaluesinside='1' gaugefillmix='' pivotfillmix='{f0efea}, {bebcb0}' pivotbordercolor='bebcb0' pivotfillratio='80,50' showshadow='0'>
  <colorrange>
    <color minvalue='0' maxvalue='84' code='00ff00' alpha='0'/>
    <color minvalue='80' maxvalue='100' name='danger' code='ff0000' alpha='50'/>
  </colorrange>
  <dials>
  <dial value='50' bordercolor='#ff3333' bgcolor='bebcb0, f0efea, bebcb0' borderalpha='0' basewidth='10' topwidth='3'/>
  </dials>  
  <annotations>
    <annotationgroup xpos='170' ypos='170' fillratio='10,125,254' fillpattern='radial' >
    <!-- draw the upper white rounded border -->
      <annotation type='circle' xpos='0' ypos='0' radius='150' bordercolor= 'bebcb0' fillasgradient='1' fillcolor='f0efea, bebcb0' fillratio='85,15'/>
      <annotation type='circle' xpos='0' ypos='0' radius='140' fillcolor='bebcb0, f0efea' fillratio='85,15' />
      <annotation type='circle' xpos='0' color='ffffff' ypos='0' radius='140' bordercolor= 'f0efea' />
    </annotationgroup>
  </annotations>
</chart>

-------------------------仪表盘重要属性解析-----------------------

根节点<chart 属性：
upperlimit='120' --刻度值上限
lowerlimit='0'   --刻度值下限
limits='0/1'     --是否显示极限值
basefontcolor='#ff3333' --刻度值字体颜色
majortmnumber='12'  --需要将仪表盘分成的等份值
majortmcolor='#ff3333'  --刻度线的颜色
majortmheight='8'   --刻度线的长度
minortmnumber='5'  --仪表盘刻度线间小刻度线的数量
minortmcolor='#ff3333' --仪表盘刻度线间小刻度线颜色
minortmheight='5' --仪表盘刻度线间小刻度线长度
pivotradius='20' --针心圆半径
showgaugeborder='1' --是否显示刻度盘边框
gaugeouterradius='130' --刻度盘外围半径
gaugeinnerradius='110' --刻度盘内围半径
gaugeoriginx='170'  --刻度盘圆心x坐标
gaugeoriginy='170'  --刻度盘圆心y坐标
gaugescaleangle='200' --刻度盘比例（度数）
displayvaluedistance='20' --显示值与刻度线的距离
placevaluesinside='1' --显示值是否位于刻度盘的内部
gaugefillmix='' --刻度盘颜色是否混合
pivotfillmix='{f0efea}, {bebcb0}' --仪表盘轴心是否混合
pivotbordercolor='bebcb0' --轴心边框颜色
pivotfillratio='80,50' --轴心比率
showshadow='0' --是否显示阴影

颜色范围：

<colorrange>
  <color minvalue='0' maxvalue='84' code='00ff00' alpha='0'/>
  <color minvalue='80' maxvalue='100' name='danger' code='ff0000' alpha='50'/>
 </colorrange>

此节点的原理及应用：

通过两种不同的颜色拼接成刻度盘底色，可用于提醒指示到一定区域了；

转盘：

<dials>
    <dial value='50' bordercolor='#ff3333' bgcolor='bebcb0, f0efea, bebcb0' borderalpha='0' basewidth='10' topwidth='3'/>
</dials>

value='50'  --指针指示值
borderalpha='10' --指针边线的颜色深度
basewidth='10'   --只针的宽度
topwidth='3'  --指针尖端的宽度

仪表盘外围控件：

<annotations>
 <annotationgroup xpos='170' ypos='170' fillratio='225,225,254' fillpattern='radial' alpha='11' >
 <annotation type='circle' xpos='0' ypos='0' radius='150' bordercolor= 'bebcb0' fillasgradient='1' fillcolor='f0efea, bebcb0' fillratio='85,15'/>
 <annotation type='circle' xpos='0' ypos='0' radius='140' fillcolor='bebcb0, f0efea' fillratio='85,15' />
 <annotation type='circle' xpos='0' ypos='0' radius='140' bordercolor= 'f0efea' color='ffffff'/>


<chart bgalpha='0' bgcolor='ffffff' lowerlimit='0' upperlimit='100' numbersuffix='%25' showborder='0' basefontcolor='ffffdd' charttopmargin='25' chartbottommargin='25' chartleftmargin='25' chartrightmargin='25' tooltipbgcolor='80a905' gaugefillmix='{dark-10},ffffff,{dark-10}' gaugefillratio='3'>
  <colorrange>
   <color minvalue='0' maxvalue='45' code='ff654f'/>
   <color minvalue='45' maxvalue='80' code='f6bd0f'/>
   <color minvalue='80' maxvalue='100' code='8bba00'/>
  </colorrange>

  <dials>
   <dial value='92' rearextension='10'/>
  </dials>

  <trendpoints>
   <point value='50' displayvalue='average' fontcolor='ff4400' usemarker='1' dashed='1' dashlen='2' dashgap='2' valueinside='1' />
  </trendpoints>

  <!--rectangles behind the gauge -->
  <annotations>
   <annotationgroup id='grp1' showbelow='1' >
     <annotation type='rectangle' x='5' y='5' tox='345' toy='195' radius='10' color='009999,333333' showborder='0' />
   </annotationgroup>
  </annotations>

  <styles>
   <definition>
     <style name='rectshadow' type='shadow' strength='3'/>
   </definition>
   <application>
     <apply toobject='grp1' styles='rectshadow' />
   </application>
  </styles>
</chart>

-------------------------仪表盘重要属性解析-----------------------

<chart
numbersuffix='%25'  --数值后缀%
charttopmargin='25' --到容器顶端的距离
chartbottommargin='25' --到容器底端的距离
chartleftmargin='25' --到容器左端的距离
chartrightmargin='25'  --到容器右端的距离
gaugefillratio='11' --刻度盘背景颜色比例
<annotationgroup showbelow='1'  --显示在xx下面    

以上就是对angulargauge 属性资料的整理，后续继续补充相关资料，谢谢大家对本站的支持！

上一篇： 远程桌面连接工具

下一篇： 三星中端全面屏再曝光 国产手机的噩梦

推荐阅读