首页 > 代码库 > Flex中的折线图

Flex中的折线图

2024-07-28 07:43:38   226人阅读

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、实现结果



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中的折线图


联系
我们