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执行效率全面总结
Nov 04 Javascript
Js与下拉列表处理问题解决
Feb 13 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
Dec 08 Javascript
JavaScript实现拖拽网页内元素的方法
Apr 15 Javascript
JS建造者模式基本用法实例分析
Jun 30 Javascript
原生js配合cookie制作保存路径的拖拽
Dec 29 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Oct 12 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
JavaScript代码实现微博批量取消关注功能
Feb 05 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php多文件上传下载示例分享
2014/02/20 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP中使用file_get_contents post数据代码例子
2015/02/13 PHP
php中上传文件的的解决方案
2018/09/25 PHP
Laravel 5.5 实现禁用用户注册示例
2019/10/24 PHP
jquerydom对象的事件隐藏显示和对象数组示例
2013/12/10 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
2014/11/02 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
2016/12/08 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
angular动态表单制作
2018/02/23 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
python itchat实现微信自动回复的示例代码
2017/08/14 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
Python爬虫实例_利用百度地图API批量获取城市所有的POI点
2018/01/10 Python
python游戏开发的五个案例分享
2020/03/09 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
个性与发展自我评价
2014/02/11 职场文书
产品陈列协议书(标准版)
2014/09/17 职场文书
校园广播稿精选
2014/10/01 职场文书
实习指导教师评语
2014/12/30 职场文书
小学六年级毕业感言
2015/07/30 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
教你一步步实现一个简易promise
2021/11/02 Javascript
Golang 并发下的问题定位及解决方案
2022/03/16 Golang