Flex: 通过horizontalTickAligned和verticalTickAligned样式指定线图LineChart横竖方向轴心标记

<? xml version="1.0" ?>
< mx:Application xmlns:mx ="http://www.adobe.com/2006/mxml"
        layout ="vertical"
        verticalAlign ="middle"
        backgroundColor ="white" >

     < mx:Script >
         <![CDATA[
            import mx.charts.CategoryAxis;
            import mx.charts.chartClasses.IAxis;

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currFormatter.format(item);
            }

            private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
                var datNum:Number = Date.parse(item);
                var tempDate:Date = new Date(datNum);
                return tempDate.date.toString();
            }
         ]]>
     </ mx:Script >

     < mx:CurrencyFormatter id ="currFormatter" precision ="2" />

     < mx:XMLListCollection id ="dp" >
         < mx:source >
             < mx:XMLList >
                 < quote date ="8/1/2007" open ="40.29" close ="39.58" />
                 < quote date ="8/2/2007" open ="39.4" close ="39.52" />
                 < quote date ="8/3/2007" open ="39.47" close ="38.75" />
                 < quote date ="8/6/2007" open ="38.71" close ="39.38" />
                 < quote date ="8/7/2007" open ="39.08" close ="39.42" />
                 < quote date ="8/8/2007" open ="39.61" close ="40.23" />
                 < quote date ="8/9/2007" open ="39.9" close ="40.75" />
                 < quote date ="8/10/2007" open ="41.3" close ="41.06" />
                 < quote date ="8/13/2007" open ="41" close ="40.83" />
                 < quote date ="8/14/2007" open ="41.01" close ="40.41" />
                 < quote date ="8/15/2007" open ="40.22" close ="40.18" />
                 < quote date ="8/16/2007" open ="39.83" close ="39.96" />
                 < quote date ="8/17/2007" open ="40.18" close ="40.32" />
                 < quote date ="8/20/2007" open ="40.55" close ="40.74" />
                 < quote date ="8/21/2007" open ="40.41" close ="40.13" />
                 < quote date ="8/22/2007" open ="40.4" close ="40.77" />
                 < quote date ="8/23/2007" open ="40.82" close ="40.6" />
                 < quote date ="8/24/2007" open ="40.5" close ="40.41" />
                 < quote date ="8/27/2007" open ="40.38" close ="40.81" />
             </ mx:XMLList >
         </ mx:source >
     </ mx:XMLListCollection >

     < mx:ApplicationControlBar dock ="true" >
         < mx:Form styleName ="plain" >
             < mx:FormItem label ="direction:" >
                 < mx:ComboBox id ="comboBox" >
                     < mx:dataProvider >
                         < mx:Array >
                             < mx:Object label ="both" />
                             < mx:Object label ="horizontal" />
                             < mx:Object label ="vertical" />
                         </ mx:Array >
                     </ mx:dataProvider >
                 </ mx:ComboBox >
             </ mx:FormItem >
             < mx:FormItem label ="horizontalTickAligned:" >
                 < mx:CheckBox id ="hCheckBox" selected ="true" />
             </ mx:FormItem >
             < mx:FormItem label ="verticalTickAligned:" >
                 < mx:CheckBox id ="vCheckBox" selected ="true" />
             </ mx:FormItem >
         </ mx:Form >
     </ mx:ApplicationControlBar >

     < mx:LineChart id ="lineChart"
            showDataTips ="true"
            dataProvider ="{dp}"
            width ="100%"
            height ="100%" >

         
         < mx:backgroundElements >
             < mx:GridLines direction ="{comboBox.selectedItem.label}"
                    horizontalTickAligned ="{hCheckBox.selected}"
                    verticalTickAligned ="{vCheckBox.selected}" >
                 < mx:horizontalFill >
                     < mx:SolidColor color ="haloBlue" alpha ="0.2" />
                 </ mx:horizontalFill >
                 < mx:horizontalAlternateFill >
                     < mx:SolidColor color ="haloSilver" alpha ="0.2" />
                 </ mx:horizontalAlternateFill >
                 < mx:verticalFill >
                     < mx:SolidColor color ="haloBlue" alpha ="0.2" />
                 </ mx:verticalFill >
                 < mx:verticalAlternateFill >
                     < mx:SolidColor color ="haloSilver" alpha ="0.2" />
                 </ mx:verticalAlternateFill >
             </ mx:GridLines >
         </ mx:backgroundElements >

         
         < mx:verticalAxis >
             < mx:LinearAxis baseAtZero ="false"
                    title ="Price"
                    labelFunction ="linearAxis_labelFunc" />
         </ mx:verticalAxis >

         
         < mx:horizontalAxis >
             < mx:CategoryAxis id ="ca"
                    categoryField ="@date"
                    title ="August 2007"
                    labelFunction ="categoryAxis_labelFunc" />
         </ mx:horizontalAxis >

         
         < mx:horizontalAxisRenderers >
             < mx:AxisRenderer axis ="{ca}" canDropLabels ="true" />
         </ mx:horizontalAxisRenderers >

         
         < mx:series >
             < mx:LineSeries yField ="@open" displayName ="Open" />
             < mx:LineSeries yField ="@close" displayName ="Close" />
         </ mx:series >

         
         < mx:seriesFilters >
             < mx:Array />
         </ mx:seriesFilters >
     </ mx:LineChart >

</ mx:Application >

通过horizontalTickAligned和verticalTickAligned样式指定线图LineChart横竖方向轴心标记：

<mx:GridLines direction="both" horizontalTickAligned="true" verticalTickAligned="true" horizontalChangeCount="2">

horizontalChangeCount：图表水平网格线间隔

GridLines的direction样式设置LineChart图表水平/竖直方向网格线: both , horizontal ， vertical

horizontalAlternateFill样式交错显示LineSeries图表背景颜色

秒客网

Flex: 通过horizontalTickAligned和verticalTickAligned样式指定线图LineChart横竖方向轴心标记

相关文章