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>
-------------------------儀表盤重要屬性解析-----------------------
根節(jié)點<Chart 屬性:
upperLimit='120' --刻度值上限
lowerLimit='0' --刻度值下限
Limits='0/1' --是否顯示極限值
baseFontColor='#FF3333' --刻度值字體顏色
majorTMNumber='12' --需要將儀表盤分成的等份值
majorTMColor='#FF3333' --刻度線的顏色
majorTMHeight='8' --刻度線的長度
minorTMNumber='5' --儀表盤刻度線間小刻度線的數(shù)量
minorTMColor='#FF3333' --儀表盤刻度線間小刻度線顏色
minorTMHeight='5' --儀表盤刻度線間小刻度線長度
pivotRadius='20' --針心圓半徑
showGaugeBorder='1' --是否顯示刻度盤邊框
gaugeOuterRadius='130' --刻度盤外圍半徑
gaugeInnerRadius='110' --刻度盤內(nèi)圍半徑
gaugeOriginX='170' --刻度盤圓心X坐標(biāo)
gaugeOriginY='170' --刻度盤圓心Y坐標(biāo)
gaugeScaleAngle='200' --刻度盤比例(度數(shù))
displayValueDistance='20' --顯示值與刻度線的距離
placeValuesInside='1' --顯示值是否位于刻度盤的內(nèi)部
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>
此節(jié)點的原理及應(yīng)用:
通過兩種不同的顏色拼接成刻度盤底色,可用于提醒指示到一定區(qū)域了;
轉(zhuǎn)盤:
<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' --數(shù)值后綴%
chartTopMargin='25' --到容器頂端的距離
chartBottomMargin='25' --到容器底端的距離
chartLeftMargin='25' --到容器左端的距離
chartRightMargin='25' --到容器右端的距離
gaugeFillRatio='11' --刻度盤背景顏色比例
<annotationGroup showBelow='1' --顯示在XX下面
以上就是對AngularGauge 屬性資料的整理,后續(xù)繼續(xù)補充相關(guān)資料,謝謝大家對本站的支持!
相關(guān)文章
Angularjs 動態(tài)改變title標(biāo)題(兼容ios)
這篇文章主要介紹了 Angularjs 動態(tài)改變title標(biāo)題(兼容ios)的相關(guān)資料,需要的朋友可以參考下2016-12-12詳解創(chuàng)建自定義的Angular Schematics
本文對 Angular Schematics 進(jìn)行了介紹,并創(chuàng)建了一個用于創(chuàng)建自定義 Component 的 Schematics ,然后在 Angular 項目中以它為模板演練了通過 Schematics 添加自定義的 Component,感興趣的小伙伴們可以參考一下2018-06-06AngularJS基礎(chǔ) ng-src 指令簡單示例
本文主要介紹AngularJS ng-src 指令,這里對ng-src 指令的資料做了詳細(xì)整理,有需要的小伙伴可以參考下2016-08-08AngularJS深入探討scope,繼承結(jié)構(gòu),事件系統(tǒng)和生命周期
這篇文章主要介紹了AngularJS的scope,繼承結(jié)構(gòu),事件系統(tǒng)和生命周期,較為詳細(xì)的分析了scope的作用域、層次結(jié)構(gòu)、繼承及生命周期相關(guān)概念與使用技巧,需要的朋友可以參考下2016-11-11Angular 4依賴注入學(xué)習(xí)教程之FactoryProvider配置依賴對象(五)
這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之FactoryProvider配置依賴對象的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-06-06