AngularGauge 属性解析详解


Posted in Javascript onSeptember 06, 2016
<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 属性资料的整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
JavaScript 继承详解(二)
Jul 13 Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
javascript实现获取字符串hash值
May 10 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
May 21 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
Mar 22 Javascript
vue 配置多页面应用的示例代码
Oct 22 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
Apr 30 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
AngularJS 面试题集锦
Sep 06 #Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 #Javascript
JS原型链 详解及示例代码
Sep 06 #Javascript
JavaScript中push(),join() 函数 实例详解
Sep 06 #Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 #Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 #Javascript
AngularJS  $on、$emit和$broadcast的使用
Sep 05 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php实现递归的三种基本方式
2020/07/04 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
js匿名函数的调用示例(形式多种多样)
2014/08/20 Javascript
Javascript常用小技巧汇总
2015/06/24 Javascript
纯javascript实现图片延时加载方法
2015/08/21 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
属于你的jQuery提示框(Tip)插件
2016/01/20 Javascript
下雪了 javascript实现雪花飞舞
2020/08/02 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
nodejs基础应用
2017/02/03 NodeJs
详解AngularJS2 Http服务
2017/06/26 Javascript
Javascript中的作用域及块级作用域
2017/12/08 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
JS中的算法与数据结构之集合(Set)实例详解
2019/08/20 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
[01:33:25]DOTA2-DPC中国联赛 正赛 Elephant vs IG BO3 第一场 1月24日
2021/03/11 DOTA
Python中除法使用的注意事项
2014/08/21 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
pyqt5实现登录界面的模板
2020/05/30 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
Python多线程正确用法实例解析
2020/05/30 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
俄罗斯购买自行车网站:Vamvelosiped
2021/01/29 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
幼师自我鉴定
2014/02/01 职场文书
教师四风问题整改措施
2014/09/25 职场文书
建筑工地文明标语
2014/10/09 职场文书
评先进个人材料
2014/12/29 职场文书
商场收银员岗位职责
2015/04/07 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
未发现nvidia显卡怎么办?Win11系统中未检测到nvidia显卡解决教程
2022/04/08 数码科技
Nginx报404错误的详细解决方法
2022/07/23 Servers