Flex - 隐藏Chart图表背景中的0刻度水平参考线

2016-11-20 发布：hangge 阅读：635

我们使用 Flex 图表的时候，如果纵坐标中有零刻度时，在背景网格中对应这个零刻度位置会有一条灰色的横向水平线。

如果不需要显示这根线的话，可以将 GridLines 的 horizontalShowOrigin 设为 false，即可将其去掉。这样所有背景线条样式都是一样的了。

下面分别演示 Flex3 与 Flex4 下的完整代码。

1，Flex3样例代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
				xmlns:hangge="com.hangge.*" creationComplete="init(event)">
	<mx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			
			private var xml:XML = <data>
									<item value='34.6' time='00:00' />
									<item value='15.0' time='00:05' />
									<item value='-24.4' time='00:10' />
									<item value='-34.6' time='00:15' />
									<item value='10.8' time='00:20' />                   
								</data>
			 
			protected function init(event:FlexEvent):void
			{
				chart1.dataProvider = xml.item;
			}
		]]>
	</mx:Script>
	
	<mx:Canvas width="60%" height="60%" horizontalCenter="0" verticalCenter="0"
			   backgroundColor="0xD0E0E4">
		<mx:LineChart id="chart1"  width="100%" height="100%" showDataTips="true"> 
			<mx:backgroundElements>
				<mx:GridLines direction="horizontal" horizontalShowOrigin="false">
					<mx:horizontalStroke>
						<mx:Stroke color="0xFFFFFF" alpha="0.25"/>
					</mx:horizontalStroke>
				</mx:GridLines>
			</mx:backgroundElements>
			<mx:fill>
				<mx:SolidColor color="0x000000" alpha="0"/>
			</mx:fill>
			<mx:horizontalAxis> 
				<mx:CategoryAxis id="hAxis" categoryField="@time" displayName="时间"/> 
			</mx:horizontalAxis> 
			<mx:horizontalAxisRenderers>
				<mx:AxisRenderer axis="{hAxis}" tickPlacement="none" minorTickPlacement="none" 
								  color="0x000000" fontSize="14" canDropLabels="true">
					<mx:axisStroke>
						<mx:Stroke weight="2" color="0xFFFFFF"/>
					</mx:axisStroke>
				</mx:AxisRenderer>
			</mx:horizontalAxisRenderers>
			
			<mx:verticalAxis> 
				<mx:LinearAxis id="vAxis" baseAtZero="false" maximum="50" minimum="-50"/> 
			</mx:verticalAxis>
			
			<mx:verticalAxisRenderers>
				<mx:AxisRenderer axis="{vAxis}" tickPlacement="none" minorTickPlacement="none"
								 fontSize="14" color="0x000000" fontFamily="微软雅黑">
					<mx:axisStroke>
						<mx:Stroke color="0xFFFFFF" weight="2"/>
					</mx:axisStroke>
				</mx:AxisRenderer>
			</mx:verticalAxisRenderers>
			
			<mx:series> 
				<mx:LineSeries id="ls" form="curve" xField="@time" yField="@value">
					<mx:lineStroke>
						<mx:Stroke color="0x00fff5"/>
					</mx:lineStroke>
				</mx:LineSeries>       
			</mx:series> 
		</mx:LineChart>
	</mx:Canvas> 
</mx:Application>

2，Flex4样例代码

<?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">
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[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}]);
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 轴线样式 (暂时不需要，改成背景上绘制)-->
		<mx:SolidColorStroke id = "axisS1" color="0xE3E3E3" weight="1" alpha="0"/>
	</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" horizontalShowOrigin="false" >
				<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="数量"/>
		</mx:series>
	</mx:LineChart>
</s:Application>