码迷,mamicode.com
首页 > 其他好文 > 详细

Flex中的折线图

时间:2014-10-21 01:01:40      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:flex   折线图   

1、问题背景

     在Flex中,制作一个折线图,并且给折线图的横轴和纵轴进行样式设置,具体实现步骤如下:


2、实现实例

(1)设置横轴样式和数据绑定

<mx:horizontalAxis>
	<mx:CategoryAxis categoryField="quarter" displayName="季度"/>
</mx:horizontalAxis>
			
<mx:horizontalAxisRenderers>
	<mx:AxisRenderer placement="bottom" tickLength="1" tickStroke="{new Stroke(0xFF0000,1)}"
								 axisStroke="{new Stroke(0xFF0000,1)}">
		<mx:axis>
		    <mx:LinearAxis id="bottomAxis"/>
		</mx:axis>
	</mx:AxisRenderer>
</mx:horizontalAxisRenderers>

(2)设置纵轴样式和数据绑定

<mx:verticalAxisRenderers>
	<mx:AxisRenderer placement="left" tickLength="1" tickStroke="{new Stroke(0xFF0000,1)}"
								 axisStroke="{new Stroke(0xFF0000,1)}">
	      <mx:axis>
		   <mx:LinearAxis id="leftAxis"/>
	      </mx:axis>
	</mx:AxisRenderer>
</mx:verticalAxisRenderers>

(3)在图上绑定横轴和纵轴

<mx:series>
	<mx:LineSeries verticalAxis="{leftAxis}" displayName="兔子" xField="quarter" yField="rabbit"/>
</mx:series>

3、实现结果

bubuko.com,布布扣


4、附录

<?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"
			   width="100%" height="100%" fontSize="12"
			   fontFamily="微软雅黑">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.graphics.Stroke;
		]]>
	</fx:Script>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;

			[Bindable]
			//折线图数据绑定
			private var chartArray:ArrayCollection = new ArrayCollection([
				{quarter:"第一季度",rabbit:"342",birthRate:"0.78677"},
				{quarter:"第二季度",rabbit:"457",birthRate:"0.322343232"},
				{quarter:"第三季度",rabbit:"786",birthRate:"0.457645"},
				{quarter:"第四季度",rabbit:"654",birthRate:"0.454848"}
			]);

		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	
	<mx:VBox width="100%" height="100%" paddingBottom="100" paddingLeft="100" paddingRight="150"
			 paddingTop="100" horizontalAlign="center">
		<mx:LineChart id="line" width="100%" height="90%" dataProvider="{chartArray}"
					  showAllDataTips="true">
			<mx:horizontalAxis>
				<mx:CategoryAxis categoryField="quarter" displayName="季度"/>
			</mx:horizontalAxis>
			
			<mx:horizontalAxisRenderers>
				<mx:AxisRenderer placement="bottom" tickLength="1" tickStroke="{new Stroke(0xFF0000,1)}"
								 axisStroke="{new Stroke(0xFF0000,1)}">
					<mx:axis>
						<mx:LinearAxis id="bottomAxis"/>
					</mx:axis>
				</mx:AxisRenderer>
			</mx:horizontalAxisRenderers>
			
			<mx:verticalAxisRenderers>
				<mx:AxisRenderer placement="left" tickLength="1" tickStroke="{new Stroke(0xFF0000,1)}"
								 axisStroke="{new Stroke(0xFF0000,1)}">
					<mx:axis>
						<mx:LinearAxis id="leftAxis"/>
					</mx:axis>
				</mx:AxisRenderer>
			</mx:verticalAxisRenderers>
			
			<mx:series>
				<mx:LineSeries verticalAxis="{leftAxis}" displayName="兔子" xField="quarter" yField="rabbit"/>
			</mx:series>
			
		</mx:LineChart>
		<mx:Legend dataProvider="{line}"/>
		
	</mx:VBox>
</s:Application>



Flex中的折线图

标签:flex   折线图   

原文地址:http://blog.csdn.net/you23hai45/article/details/40327889

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!