当前位置: > > > Flex图表- minField属性给面积图添加区域底部边界

Flex图表- minField属性给面积图添加区域底部边界

minField可以确定一个图表系列的下边界,比如我们需要一个能表示每天温度的面积图。要求能同时展示出最高温度和最低温度,则可以使用yField设置为最高温度,minField设置为最低温度。

效果图如下(可以看到每天上下宽度大的话则表示温差大)


代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx" 
			   fontSize="12" fontFamily="微软雅黑"
			   >
	<fx:Declarations>
		<s:XMLListCollection id="weatherData">
			<fx:XMLList>
						<data year="2000" month="3" day="1" max="69" min="36"/>
						<data year="2000" month="3" day="2" max="55" min="39"/>
						<data year="2000" month="3" day="3" max="66" min="32"/>
						<data year="2000" month="3" day="4" max="56" min="40"/>
						<data year="2000" month="3" day="5" max="63" min="33"/>
						<data year="2000" month="3" day="6" max="72" min="36"/>
						<data year="2000" month="3" day="7" max="77" min="39"/>
						<data year="2000" month="3" day="8" max="80" min="42"/>
						<data year="2000" month="3" day="9" max="72" min="47"/>
						<data year="2000" month="3" day="10" max="73" min="51"/>
			</fx:XMLList>
		</s:XMLListCollection>
	</fx:Declarations>
	<s:Panel title="每日最高最低温度" width="400" height="220"
			 horizontalCenter="0" verticalCenter="0">
		<mx:AreaChart id="weatherChart" 
					  dataProvider="{weatherData}" 
					  height="100%" width="100%">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="@day"/>
			</mx:horizontalAxis>
			<mx:series>
				<mx:AreaSeries yField="@max"
							   minField="@min" 
							   displayName="温度"
							   alpha="0.5"/>
			</mx:series>
		</mx:AreaChart>		
	</s:Panel>
</s:Application>
评论0