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