源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

AngularGauge 属性解析详解

  • 时间:2020-12-31 02:09 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:AngularGauge 属性解析详解
<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 属性资料的整理,后续继续补充相关资料,谢谢大家对本站的支持!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部