改变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 >

你可能感兴趣的:(column)