zoukankan      html  css  js  c++  java
  • Flex :给LineChart设置坐标轴最大最小范围,以及设置纵坐标的线条间隔,数值间隔的例子

    demo.mxml :

    <?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>
  • 相关阅读:
    npm ci命令解析
    performance分析
    mpvue 引入直播功能
    lodash按需加载
    React生命周期分析
    vue 项目打包优化(远不止dll)
    Git 底层数据结构和原理
    Docker 部署 Nuxt.js 项目
    TMS320DM642调试出现#10247-D creating output section ".capChaACrSpace" without a SECTIONS 解决办法
    TMS320DM642的emif(外部存储器接口)的结构设置
  • 原文地址:https://www.cnblogs.com/Fooo/p/1586783.html
Copyright © 2011-2022 走看看