AngularGauge 属性解析详解

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

(0)

相关推荐

  • 详解AngularJS中module模块的导入导出

    AngularJS是一款来自Google的前端JS框架,它的核心特性有:MVC.双向数据绑定.指令和语义化标签.模块化工具.依赖注入.HTML模板,以及对常用工具的封装,例如$http.$cookies.$location等. 关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码. 在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的module中,然后把各个module汇总到该领域的一个文件中,再由主mo

  • AngularJs Modules详解及示例代码

    一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启动应用的main方法.angular应用不需要main方法,作为替代,module提供有指定目的的声明式,描述应用如何启动.这样做有几项优点: 这过程是声明描述的,更加容易读懂. 在单元测试中,不需要加载所有module,这对写单元测试很有帮助. 额外的module可以被加载到情景测试中,可以覆盖一些设置,帮助进行应用的端对端测试(end-to-end test). 第三方代码可以作为可复用的module打

  • AngularJS Module方法详解

    AngularJS是什么? AngularJs(后面就简称ng了)是一个用于设计动态web应用的结构框架.首先,它是一个框架,不是类库,是像EXT一样提供一整套方案用于设计web应用.它不仅仅是一个javascript框架,因为它的核心其实是对HTML标签的增强. 何为HTML标签增强?其实就是使你能够用标签完成一部分页面逻辑,具体方式就是通过自定义标签.自定义属性等,这些HTML原生没有的标签/属性在ng中有一个名字:指令(directive).后面会详细介绍.那么,什么又是动态web应用呢?

  • AngularJS $on、$emit和$broadcast的使用

    AngularJS中的作用域有一个非常有层次和嵌套分明的结构.其中它们都有一个主要的$rootScope(也就说对应的Angular应用或者ng-app),然后其他所有的作用域部分都是继承自这个$rootScope的,或者说都是嵌套在主作用域下面的.很多时候,你会发现这些作用域不会共享变量或者说都不会从另一个原型继承什么. 那么在这种情况下,如何在作用域之间通信呢?其中一个选择就是在应用程序作用域之中创建一个单例服务,然后通过这个服务处理所有子作用域的通信. 在AngularJS中还有另外一个选

  • Angular 理解module和injector,即依赖注入

    依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是javascript/jquery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务的注册是通过xml配置文件的<bean>标签或是注解@Repository.

  • AngularJS 面试题集锦

    ng-if 跟 ng-show/hide 的区别有哪些? 第一点区别是, ng-if 在后面表达式为 true 的时候才创建这个 dom 节点, ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不显示. 第二点区别是, ng-if 会(隐式地)产生新作用域, ng-switch . ng-include 等会动态创建一块界面的也是如此. 这样会导致,在 ng-if 中用基本变量绑定 ng-model ,并在外层 div 中把此 mode

  • AngularJS实现标签页的两种方式

    一.通过普通指令实现标签页 <link rel="stylesheet" href="views/show/tab.css"/> <div> <ul class="nav nav-tabs" ng-init="vm.activeTab=1"> <li ng-class="{active: vm.activeTab == 1}"><a href="

  • AngularJS实现数据列表的增加、删除和上移下移等功能实例

    效果图 实例代码 <!DOCTYPE html> <html lang="en" ng-app="myapp" ng-controller="myCtrl"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin:0;padding:0; list-style:

  • 简述angular自定义过滤器在页面和控制器中的使用

    AngularJS另一个特点就是提供了过滤器,可以通过操作UNIX下管道的方式,操作数据结果. 通过使用管道,可以便于双向的数据绑定中视图的展现. 过滤器在处理过程中,将数据变成新的格式,而且可以使用管道这种链式风格,还能接受附加的参数. 首先设置自定义过滤器. 定义模块名:angular .module('myApp') .filter('filterName',function(){ return function(要过滤的对象,参数1,参数2,...){ return Obj; //这里返

  • 深入浅析AngularJS中的module(模块)

    什么是AngularJS的模块 我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等-都是属于一个模块! 大多数的应用程序都是有一个自己的函数入口方法Main ,用它来进行初始化,以及加载装配各个模块,然后这些模块的组合,构成了你的应用程序,对吧? 但是,but, AngularJS应用程序却不是这样的哦,它没有main 方法,没有函数入口.

随机推荐