Flex ：给LineChart设置坐标轴最大最小范围

最新推荐文章于 2016-02-17 20:03:00 发布

萝卜耳朵

最新推荐文章于 2016-02-17 20:03:00 发布

阅读量3k

点赞数

分类专栏： Flex4 控件使用文章标签： linechart

Flex4 控件使用专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用Adobe Flex创建的图表应用程序实例。该程序利用LineChart组件展示了一段时间内的股票价格变动情况，并通过调整滑块来改变图表显示的价格区间。此外，还实现了货币格式化的y轴标签显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

复制代码<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
        layout="vertical" 
        verticalAlign="middle" 
        backgroundColor="white" 
        preinitialize="init();"> 
  
    <mx:Script> 
        <![CDATA[ 
            import mx.charts.chartClasses.IAxis; 
            import mx.formatters.CurrencyFormatter; 
  
            private var currFormatter:CurrencyFormatter; 
  
            private function init():void { 
                currFormatter = new CurrencyFormatter(); 
                currFormatter.precision = 2; 
            } 
  
            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String { 
                return currFormatter.format(item); 
            } 
  
            private function lineChart_creationComplete():void { 
                var linearAxisMinimum:int = Math.floor(linearAxis.computedMinimum); 
                var linearAxisMaximum:int = Math.ceil(linearAxis.computedMaximum); 
                linearAxis.minimum = linearAxisMinimum; 
                linearAxis.maximum = linearAxisMaximum; 
            } 
        ]]> 
    </mx:Script> 
  
    <mx:XMLListCollection id="dp"> 
        <mx:source> 
            <mx:XMLList> 
                <quote date="8/27/2007" open="40.38" close="40.81" /> 
                <quote date="8/24/2007" open="40.5" close="40.41" /> 
                <quote date="8/23/2007" open="40.82" close="40.6" /> 
                <quote date="8/22/2007" open="40.4" close="40.77" /> 
                <quote date="8/21/2007" open="40.41" close="40.13" /> 
                <quote date="8/20/2007" open="40.55" close="40.74" /> 
                <quote date="8/17/2007" open="40.18" close="40.32" /> 
                <quote date="8/16/2007" open="39.83" close="39.96" /> 
                <quote date="8/15/2007" open="40.22" close="40.18" /> 
                <quote date="8/14/2007" open="41.01" close="40.41" /> 
                <quote date="8/13/2007" open="41" close="40.83" /> 
                <quote date="8/10/2007" open="41.3" close="41.06" /> 
                <quote date="8/9/2007" open="39.9" close="40.75" /> 
                <quote date="8/8/2007" open="39.61" close="40.23" /> 
                <quote date="8/7/2007" open="39.08" close="39.42" /> 
                <quote date="8/6/2007" open="38.71" close="39.38" /> 
                <quote date="8/3/2007" open="39.47" close="38.75" /> 
                <quote date="8/2/2007" open="39.4" close="39.52" /> 
                <quote date="8/1/2007" open="40.29" close="39.58" /> 
            </mx:XMLList> 
        </mx:source> 
    </mx:XMLListCollection> 
  
    <mx:ApplicationControlBar dock="true"> 
        <mx:Form styleName="plain"> 
            <mx:FormItem label="minimum:"> 
                <mx:HSlider id="minSlider" 
                        minimum="28" 
                        maximum="38" 
                        value="38" 
                        liveDragging="true" 
                        snapInterval="1" 
                        change="linearAxis.minimum = event.value;" /> 
            </mx:FormItem> 
            <mx:FormItem label="maximum:"> 
                <mx:HSlider id="maxSlider" 
                        minimum="42" 
                        maximum="52" 
                        value="42" 
                        liveDragging="true" 
                        snapInterval="1" 
                        change="linearAxis.maximum = event.value;" /> 
            </mx:FormItem> 
        </mx:Form> 
  
        <mx:Spacer width="100%" /> 
  
        <mx:Legend dataProvider="{lineChart}" 
                direction="horizontal" /> 
    </mx:ApplicationControlBar> 
  
    <mx:LineChart id="lineChart" 
            showDataTips="true" 
            dataProvider="{dp}" 
            width="100%" 
            height="100%" 
            creationComplete="lineChart_creationComplete();"> 
  
        <mx:backgroundElements> 
            <mx:GridLines id="gridLines" 
                    direction="both" 
                    verticalTickAligned="false"> 
                <mx:verticalStroke> 
                    <mx:Stroke color="haloSilver" 
                            weight="0" 
                            alpha="1.0" /> 
                </mx:verticalStroke> 
                <mx:horizontalStroke> 
                    <!-- Set alpha to 0 so stroke isn't visible. --> 
                    <mx:Stroke color="white" 
                            weight="0" 
                            alpha="0.0" /> 
                </mx:horizontalStroke> 
                <mx:horizontalFill> 
                    <mx:SolidColor color="haloSilver" 
                            alpha="0.1" /> 
                </mx:horizontalFill> 
            </mx:GridLines> 
        </mx:backgroundElements> 
  
        <!-- vertical axis ** minorInterval:y轴线条的间隔  interval:y轴数值的间隔,maximum：y轴最大值 , minimum：y轴最小值 --> 
        <mx:verticalAxis> 
            <mx:LinearAxis id="linearAxis" 
                    baseAtZero="false" 
                    title="Price (USD)" 
                    minorInterval="0.10" 
                    interval="0.5" 
                     maximum="78" minimum="0"
                    labelFunction="linearAxis_labelFunc" /> 
        </mx:verticalAxis> 
  
        <!-- horizontal axis --> 
        <mx:horizontalAxis> 
            <mx:CategoryAxis id="ca" 
                    categoryField="@date" 
                    title="Date" /> 
        </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:series> 
    </mx:LineChart> 
  
</mx:Application>
复制代码