Flex - 隐藏Chart图表背景中的0刻度水平参考线
作者:hangge | 2016-11-20 10:10
我们使用 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>
全部评论(0)