Flex图表- minField属性给面积图添加区域底部边界
作者:hangge | 2014-12-18 16:22
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)