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 相关文章推荐
js 实现日期灵活格式化的小例子
Jul 14 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
JavaScript设置名字输入不合法的实现方法
May 23 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
May 26 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
JS实现点星星消除小游戏
Mar 24 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
PHP 表单提交给自己
2008/07/24 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Javascript 对象的解释
2008/11/24 Javascript
js常用排序实现代码
2010/12/28 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
js中生成map对象的方法
2014/01/09 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
Node.js中看JavaScript的引用
2017/04/22 Javascript
vue获取DOM元素并设置属性的两种实现方法
2017/09/30 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
2019/04/23 jQuery
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
JS如何寻找数组中心索引过程解析
2020/06/01 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
python实现决策树ID3算法的示例代码
2018/05/30 Python
Python装饰器语法糖
2019/01/02 Python
Django框架模板的使用方法示例
2019/05/25 Python
python3.6生成器yield用法实例分析
2019/08/23 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
data:image data url 文件转为Blob上传后端的方法
2019/07/16 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
销售人员个人求职信
2013/09/26 职场文书
实习期自我鉴定
2013/10/11 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
工伤调解协议书
2016/03/21 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
openEuler 搭建java开发环境的详细过程
2022/06/10 Servers