学步园

<?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%"> 
  
        <!-- background elements --> 
        <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> 
  
        <!-- vertical axis --> 
        <mx:verticalAxis> 
            <mx:LinearAxis baseAtZero="false" 
                    title="Price" 
                    labelFunction="linearAxis_labelFunc" /> 
        </mx:verticalAxis> 
  
        <!-- horizontal axis --> 
        <mx:horizontalAxis> 
            <mx:CategoryAxis id="ca" 
                    categoryField="@date" 
                    title="August 2007" 
                    labelFunction="categoryAxis_labelFunc" /> 
        </mx:horizontalAxis> 
  
        <!-- horizontal axis renderer --> 
        <mx:horizontalAxisRenderers> 
            <mx:AxisRenderer axis="{ca}" canDropLabels="true" /> 
        </mx:horizontalAxisRenderers> 
  
        <!-- series --> 
        <mx:series> 
            <mx:LineSeries yField="@open" displayName="Open" /> 
            <mx:LineSeries yField="@close" displayName="Close" /> 
        </mx:series> 
  
        <!-- series filters --> 
        <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图表背景颜色