zoukankan      html  css  js  c++  java
  • Flex : Line Chart BackgroundElement color (结合Grid做网格线的例子)

    <?xml version="1.0"?> 
    <!-- charts/BasicLine.mxml --> 
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" 
    height
    ="100%"> 
      
    <mx:Script><![CDATA[ 
         import mx.collections.ArrayCollection; 
         [Bindable] 
         public var expenses:ArrayCollection = new ArrayCollection([ 
            {Month:"Jan", Profit:2000, Expenses:1500, Amount:450}, 
            {Month:"Feb", Profit:1000, Expenses:200, Amount:600}, 
            {Month:"Mar", Profit:1500, Expenses:500, Amount:300} 
         ]); 
      
    ]]></mx:Script> 
      
    <mx:Panel title="Line Chart" width="100%" height="100%"> 
         
    <mx:LineChart id="myChart" dataProvider="{expenses}" 
    showDataTips
    ="true" width="100%" height="100%"> 


            
    <mx:backgroundElements> 
                            
    <mx:Grid height="100%" width="100%" verticalGap="0"> 
                                    
    <mx:GridRow height="20%" width="100%"> 
                                            
    <mx:GridItem height="100%" width="100%"> 
                                                    
    <mx:Canvas height="100%" width="100%" alpha="0.7" 
    backgroundColor
    ="#1dae00" /> 
                                            
    </mx:GridItem> 
                                    
    </mx:GridRow> 
                                    
    <mx:GridRow height="20%" width="100%"> 
                                            
    <mx:GridItem height="100%" width="100%"> 
                                                    
    <mx:Canvas height="100%" width="100%" alpha="0.7" 
    backgroundColor
    ="#ffa800" /> 
                                            
    </mx:GridItem> 
                                    
    </mx:GridRow> 
                                    
    <mx:GridRow height="20%" width="100%"> 
                                            
    <mx:GridItem height="100%" width="100%"> 
                                                    
    <mx:Canvas height="100%" width="100%" alpha="0.7" 
    backgroundColor
    ="#ff0000" /> 
                                            
    </mx:GridItem> 
                                    
    </mx:GridRow> 
                                    
    <mx:GridRow height="20%" width="100%"> 
                                            
    <mx:GridItem height="100%" width="100%"> 
                                                    
    <mx:Canvas height="100%" width="100%" alpha="0.7" 
    backgroundColor
    ="#d65f48" /> 
                                            
    </mx:GridItem> 
                                    
    </mx:GridRow> 
                                    
    <mx:GridRow height="20%" width="100%"> 
                                            
    <mx:GridItem height="100%" width="100%"> 
                                                    
    <mx:Canvas height="100%" width="100%" alpha="0.7" 
    backgroundColor
    ="#cfc505" /> 
                                            
    </mx:GridItem> 
                                    
    </mx:GridRow> 
                            
    </mx:Grid> 
                    
    </mx:backgroundElements> 


            
    <mx:horizontalAxis> 
               
    <mx:CategoryAxis dataProvider="{expenses}" 
    categoryField
    ="Month" /> 
            
    </mx:horizontalAxis> 
            
    <mx:series> 
               
    <mx:LineSeries yField="Profit" displayName="Profit" /> 
               
    <mx:LineSeries yField="Expenses" displayName="Expenses" /> 
            
    </mx:series> 
         
    </mx:LineChart> 
         
    <mx:Legend dataProvider="{myChart}"/> 
      
    </mx:Panel> 
    </mx:Application>
  • 相关阅读:
    vim 一些操作
    RedisTemplate 获取过期时间的问题
    SpringBoot 配置 Redis 多缓存名(不同缓存名缓存失效时间不同)
    Vue ElementUI Tree组件 回显问题(设置选择父级时会全选所有的子级,有此业务场景是不适合的)
    动态切换数据库源码解析
    @Primary 注解的作用
    @Value注解的使用
    Shiro&Jwt验证
    浏览器缓存和Service Worker
    Javascript的事件模型和Promise实现
  • 原文地址:https://www.cnblogs.com/Fooo/p/1587795.html
Copyright © 2011-2022 走看看