AngularGauge 属性解析详解  更新时间:2016年09月06日 10:07:23   作者:yeyang   本文主要介绍AngularGauge 属性的知识,这里这里了详细的资料来介绍AngularGauge属性的内容知识,帮助大家学习参考,有需要的小伙伴可以参考下 ————————-仪表盘重要属性解析———————– 根节点<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' –是否显示阴影 颜色范围:       此节点的原理及应用: 通过两种不同的颜色拼接成刻度盘底色,可用于提醒指示到一定区域了; 转盘:     value=’50’  –指针指示值 borderAlpha=’10’ –指针边线的颜色深度 baseWidth=’10’   –只针的宽度 topWidth=’3′  –指针尖端的宽度 仪表盘外围控件: ————————-仪表盘重要属性解析———————– <chart numberSuffix=''  –数值后缀% chartTopMargin='25' –到容器顶端的距离 chartBottomMargin='25' –到容器底端的距离 chartLeftMargin='25' –到容器左端的距离 chartRightMargin='25'  –到容器右端的距离 gaugeFillRatio='11' –刻度盘背景颜色比例 <annotationGroup showBelow='1'  –显示在XX下面     以上就是对AngularGauge 属性资料的整理,后续继续补充相关资料,谢谢大家对本站的支持! 您可能感兴趣的文章: AngularJs Modules详解及示例代码 深入浅析AngularJS中的module(模块) 详解AngularJS中module模块的导入导出 AngularJS Module方法详解 AngularJS 面试题集锦 AngularJS $on、$emit和$broadcast的使用 AngularJS实现数据列表的增加、删除和上移下移等功能实例 简述angular自定义过滤器在页面和控制器中的使用 AngularJS实现标签页的两种方式 Angular 理解module和injector,即依赖注入 AngularGauge 属性 相关文章 Angular.js实现多个checkbox只能选择一个的方法示例 这篇文章主要给大家介绍了利用Angular.js实现多个checkbox只能选择一个的方法,文中给出了详细的示例代码,相信对大家具有一定的参考价值,下面来一起看看吧。 2017-02-02 教你用AngularJS框架一行JS代码实现控件验证效果 简单来说Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。到底能简化到什么程度呢,今天我们来看下,一行代码实现控件验证效果,有木有吓尿? 2014-06-06 AngularJS Toaster使用详解 AngularJS Toaster是一个 AngularJS 提示框.基于angular v1.2.6 及以上和angular-animate.这篇文章主要介绍了AngularJS Toaster使用详解,需要的朋友可以参考下 2017-02-02 在 Angular6 中使用 HTTP 请求服务端数据的步骤详解 本文分步骤给大家介绍了在 Angular6 中使用 HTTP 请求服务端数据的方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下 2018-08-08 AngularJS监听ng-repeat渲染完成的两种方法 这篇文章主要介绍了AngularJS监听ng-repeat渲染完成的两种方法,结合实例形式分析了AngularJS基于自定义指令及广播事件实现监听功能的相关操作技巧,需要的朋友可以参考下 2018-01-01 AngularJS中ng-class用法实例分析 这篇文章主要介绍了AngularJS中ng-class用法,结合实例形式分析了ng-class的功能、使用方法与相关注意事项,需要的朋友可以参考下 2017-07-07 基于Angularjs-router动态改变Title值的问题 今天小编就为大家分享一篇基于Angularjs-router动态改变Title值的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-08-08 Angular实现的日程表功能【可添加及隐藏显示内容】 这篇文章主要介绍了Angular实现的日程表功能,带有向日程表中添加内容及隐藏显示内容的功能,涉及AngularJS事件响应及页面元素动态操作相关实现技巧,需要的朋友可以参考下 2017-12-12 Angular Module声明和获取重载实例代码 这篇文章主要介绍了Angular Module声明和获取重载实例代码的相关资料,需要的朋友可以参考下 2016-09-09 详解AngularJS验证、过滤器、指令 这篇文章主要介绍了AngularJS验证、过滤器、指令的相关知识,angularJS中提供了许多的验证指令,可以轻松的实现验证,具体详情大家通过本文一起学习吧,需要的朋友可以参考下 2017-01-01 最新评论

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

您可能感兴趣的文章:

  • AngularJs Modules详解及示例代码
  • 深入浅析AngularJS中的module(模块)
  • 详解AngularJS中module模块的导入导出
  • AngularJS Module方法详解
  • AngularJS 面试题集锦
  • AngularJS $on、$emit和$broadcast的使用
  • AngularJS实现数据列表的增加、删除和上移下移等功能实例
  • 简述angular自定义过滤器在页面和控制器中的使用
  • AngularJS实现标签页的两种方式
  • Angular 理解module和injector,即依赖注入
张贴在3