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 相关文章推荐
很可爱的输入框
Aug 03 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
原创javascript小游戏实现代码
Aug 19 Javascript
详细介绍8款超实用JavaScript框架
Oct 25 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
Dec 13 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
vue路由跳转时判断用户是否登录功能的实现
Oct 26 Javascript
javascript实现Emrips反质数枚举的示例代码
Dec 06 Javascript
详解用async/await来处理异步
Aug 28 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
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
PHP常见的6个错误提示及解决方法
2016/07/07 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
php获取网站根目录物理路径的几种方法(推荐)
2017/03/04 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
在PHP中输出JS语句以及乱码问题的解决方案
2019/02/13 PHP
csdn 博客中实现运行代码功能实现
2009/08/29 Javascript
Javascript学习笔记8 用JSON做原型
2010/01/11 Javascript
jquery struts 验证唯一标识(公用方法)
2013/03/27 Javascript
js实现广告漂浮效果的小例子
2013/07/02 Javascript
JS判断不能为空实例代码
2013/11/26 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
thinkphp实现无限分类(使用递归)
2015/12/19 Javascript
jQuery实现的分页功能示例
2017/01/22 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
vue实现表格数据的增删改查
2017/07/10 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
python登录pop3邮件服务器接收邮件的方法
2015/04/30 Python
python判断完全平方数的方法
2018/11/13 Python
Python实现画图软件功能方法详解
2020/07/28 Python
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
优秀学生干部个人的自我评价
2013/10/04 职场文书
函授自我鉴定
2013/11/06 职场文书
硕士研究生个人求职信
2013/12/04 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
广告业务员岗位职责
2014/02/06 职场文书
工作求职自荐信
2014/06/13 职场文书
2015年初中元旦晚会活动总结
2014/11/28 职场文书
幼儿园托班开学寄语(2016秋季)
2015/12/03 职场文书
基于flask实现五子棋小游戏
2021/05/25 Python
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
Lombok的详细使用及优缺点总结
2021/07/15 Java/Android
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python