Flex中的折线图

时间：2023-03-09 03:56:28
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、实现结果

Flex中的折线图

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>

相关文章