小小菜鸟的web菜园子

web开发学习。好记性不如烂笔头。每天进步一点点!

导航

改变ColumnChart组件,每一栏的宽度.

columnWidthRatio 样式.

示例:


代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/24/changing-the-default-column-width-ratio-of-a-columnchart-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout
="vertical"
        verticalAlign
="middle"
        backgroundColor
="white">

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

            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return numberFormatter.format(item);
            }
        
]]>
    
</mx:Script>

    
<mx:NumberFormatter id="numberFormatter" precision="3" />

    
<mx:ArrayCollection id="arrColl">
        
<mx:source>
            
<mx:Array>
                
<mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
                
<mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
                
<mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
                
<mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
                
<mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
            
</mx:Array>
        
</mx:source>
    
</mx:ArrayCollection>

    
<mx:ApplicationControlBar dock="true">
        
<mx:Label text="columnWidthRatio:" />
        
<mx:HSlider id="slider"
                minimum
="0.1"
                maximum
="0.9"
                value
="0.1"
                liveDragging
="true"
                snapInterval
="0.1"
                tickInterval
="0.1" />
    
</mx:ApplicationControlBar>

    
<mx:ColumnChart id="columnChart"
            showDataTips
="true"
            dataProvider
="{arrColl}"
            columnWidthRatio
="{slider.value}"
            width
="100%"
            height
="100%">

        
<mx:horizontalAxis>
            
<mx:CategoryAxis id="ca"
                    categoryField
="name" />
        
</mx:horizontalAxis>

        
<mx:verticalAxis>
            
<mx:LinearAxis baseAtZero="false"
                    minimum
="0.200"
                    maximum
="0.310"
                    labelFunction
="linearAxis_labelFunc" />
        
</mx:verticalAxis>

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

        
<mx:series>
            
<mx:ColumnSeries id="columnSeries"
                    xField
="name"
                    yField
="avg"
                    displayName
="avg" />
        
</mx:series>

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

    
</mx:ColumnChart>

</mx:Application>

posted on 2008-04-26 17:00  『小小菜鸟』  阅读(2174)  评论(0编辑  收藏  举报