fusionchart for flex 仪表盘组件的缩放

最新推荐文章于 2019-05-02 10:11:08 发布

小流_跬步

最新推荐文章于 2019-05-02 10:11:08 发布

阅读量1.2k

点赞数

分类专栏： flex 文章标签： flex fusionchart 缩放

本文链接：https://blog.csdn.net/zhongyuan_1990/article/details/25637517

版权

flex 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

fusionchart 仪表盘组件的使用，采用的是读取xml的方式生成仪表盘，如下

<components:FusionWidgets width="100%" height="100%" FCChartType="AngularGauge" FCDataURL="resource/gauge/dataOfSingleMeterGauge.xml"/>

dataOfSingleMeterGauge.xml

<?xml version="1.0" encoding="gbk"?>
<Chart  manageResize="1" origW="300" origH="300" bgColor="FFFFFF" upperLimit="200" lowerLimit="0" baseFontColor="FFFFFF" majorTMNumber="11" majorTMColor="FFFFFF"
 majorTMHeight="8" minorTMNumber="5" minorTMColor="FFFFFF" minorTMHeight="3" toolTipBorderColor="FFFFFF" toolTipBgColor="333333" 
 gaugeOuterRadius="100" gaugeOriginX="150" gaugeOriginY="150"  gaugeStartAngle="225" gaugeEndAngle="-45" placeValuesInside="1" gaugeInnerRadius="95" 
 annRenderDelay="0" gaugeFillMix="" pivotRadius="10" showPivotBorder="0" pivotFillMix="{CCCCCC},{333333}" pivotFillRatio="50,50" showShadow="0" 
 dataStreamURL='http://localhost:8080/test/servlet/TestGauge' refreshInterval='5'>
<colorRange>
<color minValue="0" maxValue="50" code="00ffff" alpha="40"/>
<!-- <color minValue="50" maxValue="85" code="0000ff" alpha="40"/> -->
<!-- <color minValue="85" maxValue="120" code="F70118" alpha="40"/> -->
</colorRange>
<dials>
	<dial id="CPU1" value="65" borderColor="FFFFFF" bgColor="000000,CCCCCC,000000" borderAlpha="0" baseWidth="10"/>
</dials>
<annotations scaleText='1'>
	<annotationGroup xPos="150" yPos="150" showBelow="1">
		<annotation type="circle" xPos="0" yPos="0" radius="125" startAngle="0" endAngle="360" scaleText='1' fillColor="CCCCCC,111111" fillPattern="linear" fillAlpha="100,100" fillRatio="50,50" fillAngle="-45"/>
		<annotation type="circle" xPos="0" yPos="0" radius="120" startAngle="0" endAngle="360" scaleText='1' fillColor="111111,cccccc" fillPattern="linear" fillAlpha="100,100" fillRatio="50,50" fillAngle="-45"/>
		<annotation type="circle" xPos="0" yPos="0" radius="115" startAngle="0" endAngle="360" scaleText='1' color="666666"/>
	</annotationGroup>
	<annotationGroup xPos='150' yPos='180' showBelowChart='1'>	
		<annotation type='text' label='KNM' fontColor='FFFFFF' fontSize='12' isBold='0' scaleText='1'/>
	</annotationGroup>
</annotations>
</Chart>

其中，需要自定义放缩时，如上XML。用到的几个关键属性：

manageResize="1" :chart组件支持缩放

scaleText='1' ：字体支持缩放

scaleImage='1' ：图片支持缩放

注意的是，测试得出，要缩放刻度值文本大小，需要annotations 和文本组件同时设置scaleText='1'

附，fusionchart for flex 官方文档：

点击打开链接