AngularGauge 属性解析详解

前端之家收集整理的这篇文章主要介绍了AngularGauge 属性解析详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

<div class="jb51code">
<pre class="brush:js;">

-------------------------仪表盘重要属性解析-----------------------

根节点属性: 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' --指针尖端的宽度

仪表盘外围控件: