当前位置: > > > Flex4 - 一个简单的线图,面积图样式

Flex4 - 一个简单的线图,面积图样式

1,下面是一个线图(LineChart)的样式 
(1)图形区域添加背景色,边框。 
(2)横,纵网格绘制在背景上。 
(3)折线去除阴影,添加空心圆点。

<?xml version="1.0"?>
<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"
			   creationComplete="init(event)">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			
			[Bindable]
			private var myData:ArrayCollection = new ArrayCollection( [
				{ month: "18:00", value: 20},
				{ month: "19:00", value: 60},
				{ month: "20:00", value: 215},
				{ month: "21:00", value: 202},
				{ month: "22:00", value: 190},
				{ month: "23:00", value: 95}]);
			
			protected function init(event:FlexEvent):void
			{
				line1.setStyle("fill", 0xffffff); //原点内部填充色为白色
				line1.setStyle("radius", 5); //整个圆点的半径为6
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 轴线样式 (暂时不需要,改成背景上绘制)-->
		<mx:SolidColorStroke id = "axisS1" color="0xE3E3E3" weight="1" alpha="0"/>
		<!-- 线条样式 -->
		<mx:SolidColorStroke id = "lineS1" color="0x008EFF" weight="2"/>
		<!-- 线条点样式 (外圈颜色同线条颜色,外圈线条粗细为1) -->
		<mx:SolidColorStroke id = "pointS1" color="0x008EFF" weight="1"/>
	</fx:Declarations>
	
	<mx:LineChart id="linechart" height="60%" width="60%" seriesFilters="[]"
				  verticalCenter="0" horizontalCenter="0" fontSize="12" color="0x707070"
				  showDataTips="true" dataProvider="{myData}">
		<mx:backgroundElements>
			<s:Group width="100%" height="100%">
				<s:Rect left="0" right="1" top="0" bottom="0">
					<s:fill>
						<s:SolidColor alpha="1" color="#F5F5F5"/>
					</s:fill>		
					<s:stroke>
						<s:SolidColorStroke color="0xE3E3E3" weight="1"/>
					</s:stroke>
				</s:Rect>
				
			</s:Group>
			<mx:GridLines gridDirection="both" >
				<mx:horizontalStroke>
					<mx:SolidColorStroke  color="0xE3E3E3" weight="1"/>
				</mx:horizontalStroke>
				<mx:verticalStroke>
					<mx:SolidColorStroke  color="0xEAEAEA" weight="1"/>
				</mx:verticalStroke>
			</mx:GridLines>
			
		</mx:backgroundElements>
		<mx:horizontalAxis>
			<mx:CategoryAxis id="hAxis" categoryField="month"/>
		</mx:horizontalAxis>
		<mx:horizontalAxisRenderers>
			<mx:AxisRenderer axis="{hAxis}" tickPlacement="none" minorTickPlacement="none"
							 axisStroke="{axisS1}"/>
		</mx:horizontalAxisRenderers>
		<mx:verticalAxis>
			<mx:LinearAxis id="vAxis"/>
		</mx:verticalAxis>
		<mx:verticalAxisRenderers>
			<mx:AxisRenderer axis="{vAxis}" tickPlacement="none" minorTickPlacement="none"
							 axisStroke="{axisS1}"/>
		</mx:verticalAxisRenderers>
		<mx:series>
			<mx:LineSeries  id="line1" yField="value" form="segment" displayName="数量"
						   itemRenderer="mx.charts.renderers.CircleItemRenderer"
						   stroke="{pointS1}" lineStroke="{lineS1}"/>
		</mx:series>
	</mx:LineChart>
</s:Application>

2,给线图下面添加填充区域 
添加填充区域可以不用把线图改成AreaChart,只需把LineSeries改成AreaSeries并设置填充颜色即可。

<?xml version="1.0"?>
<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"
			   creationComplete="init(event)">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			
			[Bindable]
			private var myData:ArrayCollection = new ArrayCollection( [
				{ month: "18:00", value: 20},
				{ month: "19:00", value: 60},
				{ month: "20:00", value: 215},
				{ month: "21:00", value: 202},
				{ month: "22:00", value: 190},
				{ month: "23:00", value: 95}]);
			
			protected function init(event:FlexEvent):void
			{
				line1.setStyle("fill", 0xffffff); //原点内部填充色为白色
				line1.setStyle("radius", 5); //整个圆点的半径为6
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 轴线样式 (暂时不需要,改成背景上绘制)-->
		<mx:SolidColorStroke id = "axisS1" color="0xE3E3E3" weight="1" alpha="0"/>
		<!-- 线条样式 -->
		<mx:SolidColorStroke id = "lineS1" color="0x008EFF" weight="2"/>
		<!-- 线条点样式 (外圈颜色同线条颜色,外圈线条粗细为1) -->
		<mx:SolidColorStroke id = "pointS1" color="0x008EFF" weight="1"/>
		<!-- 面积区域填充样式  -->
		<mx:SolidColor id = "areaS1" alpha="0.1" color="0x008EFF"/>
	</fx:Declarations>
	
	<mx:LineChart id="linechart" height="60%" width="60%" seriesFilters="[]"
				  verticalCenter="0" horizontalCenter="0" fontSize="12" color="0x707070"
				  showDataTips="true" dataProvider="{myData}">
		<mx:backgroundElements>
			<s:Group width="100%" height="100%">
				<s:Rect left="0" right="1" top="0" bottom="0">
					<s:fill>
						<s:SolidColor alpha="1" color="#F5F5F5"/>
					</s:fill>		
					<s:stroke>
						<s:SolidColorStroke color="0xE3E3E3" weight="1"/>
					</s:stroke>
				</s:Rect>
				
			</s:Group>
			<mx:GridLines gridDirection="both" >
				<mx:horizontalStroke>
					<mx:SolidColorStroke  color="0xE3E3E3" weight="1"/>
				</mx:horizontalStroke>
				<mx:verticalStroke>
					<mx:SolidColorStroke  color="0xEAEAEA" weight="1"/>
				</mx:verticalStroke>
			</mx:GridLines>
			
		</mx:backgroundElements>
		<mx:horizontalAxis>
			<mx:CategoryAxis id="hAxis" categoryField="month"/>
		</mx:horizontalAxis>
		<mx:horizontalAxisRenderers>
			<mx:AxisRenderer axis="{hAxis}" tickPlacement="none" minorTickPlacement="none"
							 axisStroke="{axisS1}"/>
		</mx:horizontalAxisRenderers>
		<mx:verticalAxis>
			<mx:LinearAxis id="vAxis"/>
		</mx:verticalAxis>
		<mx:verticalAxisRenderers>
			<mx:AxisRenderer axis="{vAxis}" tickPlacement="none" minorTickPlacement="none"
							 axisStroke="{axisS1}"/>
		</mx:verticalAxisRenderers>
		<mx:series>
			<mx:AreaSeries  id="line1" yField="value" form="segment" displayName="数量"
						   itemRenderer="mx.charts.renderers.CircleItemRenderer"
						   stroke="{pointS1}" areaStroke="{lineS1}" areaFill="{areaS1}"/>
		</mx:series>
	</mx:LineChart>
</s:Application>
评论0