<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' --是否显示阴影
numberSuffix='%25' --数值后缀%
chartTopMargin='25' --到容器顶端的距离
chartBottomMargin='25' --到容器底端的距离
chartLeftMargin='25' --到容器左端的距离
chartRightMargin='25' --到容器右端的距离
gaugeFillRatio='11' --刻度盘背景颜色比例
<Chart><ColorRange> 刻度盘的颜色组成
此节点的原理及应用:
通过多种不同的颜色拼接成刻度盘底色,可用于提醒指示到一定区域了;
<Color 属性
code='C1E1C1' --颜色值 RGB值 不能添加#
alpha='40' --颜色透明度
minValue='0' --该颜色渲染的最小刻度
maxValue='50' --该颜色渲染的最大刻度
转盘指针:
<dials>
<dial value='50' bordercolor='#FF3333' bgColor='bebcb0, f0efea, bebcb0' borderAlpha='0' baseWidth='10' topWidth='3'/>
</dials>
<dial 属性
value='50' --指针指示值
borderAlpha='10' --指针边线的颜色深度
bgColor='bebcb0, f0efea, bebcb0' 指针背景色 可以多个色值逗号分隔 来达到渐变色效果
baseWidth='10' --指针的宽度
topWidth='3' --指针尖端的宽度
tooltext='' 鼠标放上提示,如果该值不存在,默认鼠标显示value
转盘刻度盘图标点,该图标可以显示在刻度盘。
<trendpoints>
<trendpoints><point属性
<point value='50' displayValue='Average' fontcolor='FF4400' useMarker='1' dashed='1' dashLen='2' dashGap='2' valueInside='1' />
value='50' --刻度盘图标显示位置
displayValue='Average' --图标显示值
valueInside='1' --图标显示值 显示位置 内圈还是外圈
fontcolor='FF4400' --字体颜色
useMarker='1'
dashed='1'
dashLen='2'
dashGap='2'
<annotations>
<annotationGroup id='Grp1' showBelow='1' >
<annotation type='rectangle' x='5' y='5' toX='345' toY='195' radius='10' color='009999,333333' showBorder='0' />
<annotation type='circle' x='0' y='0' radius='145' fillColor='CCCCCC,111111' fillPattern='linear' fillAlpha='100,100' fillRatio='50,50' fillAngle='-45'/>
</annotationGroup>
</annotations>
自定义图标
<styles>
<definition>
<style name='RectShadow' type='shadow' strength='3'/>
</definition>
<application>
<apply toObject='Grp1' styles='RectShadow' />
</application>
</styles>
示例1
Chart组建设置宽度300 高度300
<chart manageResize='1' origW='300' origH='300' lowerLimit='0' upperLimit='100' majorTMNumber='11' majorTMHeight='8' minorTMNumber='5'
minorTMHeight='3' gaugeOuterRadius='100' gaugeStartAngle='225' gaugeEndAngle='-45' placeValuesInside='1' gaugeInnerRadius='80%'
annRenderDelay='0' gaugeFillMix='' pivotRadius='10' showPivotBorder='0' pivotFillRatio='50,50' showShadow='0' gaugeOriginX='150' gaugeOriginY='150'
toolTipBorderColor='FFFFFF' toolTipBgColor='333333' bgColor='FFFFFF' baseFontColor='FFFFFF' majorTMColor='FFFFFF' minorTMColor='FFFFFF' pivotFillMix='{CCCCCC},{333333}'>
<colorRange>
<color minValue='0' maxValue='50' code='C1E1C1' alpha='40'/>
<color minValue='50' maxValue='85' code='F6F164' alpha='40'/>
<color minValue='85' maxValue='120' code='F70118' alpha='40'/>
</colorRange>
<dials>
<dial value='65' borderColor='FFFFFF' bgColor='000000,CCCCCC,000000' borderAlpha='0' baseWidth='10'/>
</dials>
<trendpoints>
<point value='65' displayValue='Average' fontcolor='FF4400' useMarker='1' dashed='1' dashLen='2' dashGap='2' valueInside='1' />
</trendpoints>
<annotations>
<annotationGroup x='150' y='150' showBelow='1'>
<annotation type='circle' x='0' y='0' radius='145' fillColor='CCCCCC,111111' fillPattern='linear' fillAlpha='100,100' fillRatio='50,50' fillAngle='-45'/>
<annotation type='circle' x='0' y='0' radius='120' fillColor='111111,cccccc' fillPattern='linear' fillAlpha='100,100' fillRatio='50,50' fillAngle='-45'/>
<annotation type='circle' x='0' y='0' radius='110' color='666666'/>
</annotationGroup>
</annotations>
</chart>
示例2:
Chart组建设置宽度350 高度200
<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' autoscale='1'>
<annotation type='rectangle' autoscale='1' 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 属性:
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' --是否显示阴影
numberSuffix='%25' --数值后缀%
chartTopMargin='25' --到容器顶端的距离
chartBottomMargin='25' --到容器底端的距离
chartLeftMargin='25' --到容器左端的距离
chartRightMargin='25' --到容器右端的距离
gaugeFillRatio='11' --刻度盘背景颜色比例
<Chart><ColorRange> 刻度盘的颜色组成
此节点的原理及应用:
通过多种不同的颜色拼接成刻度盘底色,可用于提醒指示到一定区域了;
<Color 属性
code='C1E1C1' --颜色值 RGB值 不能添加#
alpha='40' --颜色透明度
minValue='0' --该颜色渲染的最小刻度
maxValue='50' --该颜色渲染的最大刻度
转盘指针:
<dials>
<dial value='50' bordercolor='#FF3333' bgColor='bebcb0, f0efea, bebcb0' borderAlpha='0' baseWidth='10' topWidth='3'/>
</dials>
<dial 属性
value='50' --指针指示值
borderAlpha='10' --指针边线的颜色深度
bgColor='bebcb0, f0efea, bebcb0' 指针背景色 可以多个色值逗号分隔 来达到渐变色效果
baseWidth='10' --指针的宽度
topWidth='3' --指针尖端的宽度
tooltext='' 鼠标放上提示,如果该值不存在,默认鼠标显示value
转盘刻度盘图标点,该图标可以显示在刻度盘。
<trendpoints>
<trendpoints><point属性
<point value='50' displayValue='Average' fontcolor='FF4400' useMarker='1' dashed='1' dashLen='2' dashGap='2' valueInside='1' />
value='50' --刻度盘图标显示位置
displayValue='Average' --图标显示值
valueInside='1' --图标显示值 显示位置 内圈还是外圈
fontcolor='FF4400' --字体颜色
useMarker='1'
dashed='1'
dashLen='2'
dashGap='2'
<annotations>
<annotationGroup id='Grp1' showBelow='1' >
<annotation type='rectangle' x='5' y='5' toX='345' toY='195' radius='10' color='009999,333333' showBorder='0' />
<annotation type='circle' x='0' y='0' radius='145' fillColor='CCCCCC,111111' fillPattern='linear' fillAlpha='100,100' fillRatio='50,50' fillAngle='-45'/>
</annotationGroup>
</annotations>
自定义图标
<styles>
<definition>
<style name='RectShadow' type='shadow' strength='3'/>
</definition>
<application>
<apply toObject='Grp1' styles='RectShadow' />
</application>
</styles>
示例1
Chart组建设置宽度300 高度300
<chart manageResize='1' origW='300' origH='300' lowerLimit='0' upperLimit='100' majorTMNumber='11' majorTMHeight='8' minorTMNumber='5'
minorTMHeight='3' gaugeOuterRadius='100' gaugeStartAngle='225' gaugeEndAngle='-45' placeValuesInside='1' gaugeInnerRadius='80%'
annRenderDelay='0' gaugeFillMix='' pivotRadius='10' showPivotBorder='0' pivotFillRatio='50,50' showShadow='0' gaugeOriginX='150' gaugeOriginY='150'
toolTipBorderColor='FFFFFF' toolTipBgColor='333333' bgColor='FFFFFF' baseFontColor='FFFFFF' majorTMColor='FFFFFF' minorTMColor='FFFFFF' pivotFillMix='{CCCCCC},{333333}'>
<colorRange>
<color minValue='0' maxValue='50' code='C1E1C1' alpha='40'/>
<color minValue='50' maxValue='85' code='F6F164' alpha='40'/>
<color minValue='85' maxValue='120' code='F70118' alpha='40'/>
</colorRange>
<dials>
<dial value='65' borderColor='FFFFFF' bgColor='000000,CCCCCC,000000' borderAlpha='0' baseWidth='10'/>
</dials>
<trendpoints>
<point value='65' displayValue='Average' fontcolor='FF4400' useMarker='1' dashed='1' dashLen='2' dashGap='2' valueInside='1' />
</trendpoints>
<annotations>
<annotationGroup x='150' y='150' showBelow='1'>
<annotation type='circle' x='0' y='0' radius='145' fillColor='CCCCCC,111111' fillPattern='linear' fillAlpha='100,100' fillRatio='50,50' fillAngle='-45'/>
<annotation type='circle' x='0' y='0' radius='120' fillColor='111111,cccccc' fillPattern='linear' fillAlpha='100,100' fillRatio='50,50' fillAngle='-45'/>
<annotation type='circle' x='0' y='0' radius='110' color='666666'/>
</annotationGroup>
</annotations>
</chart>
示例2:
Chart组建设置宽度350 高度200
<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' autoscale='1'>
<annotation type='rectangle' autoscale='1' 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>