flashbuilder使用竖条图表ColumnChart示例

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="14" layout="absolute" minWidth="955" minHeight="600" creationComplete="init();">
 <mx:HTTPService id="hscom" url="chartmms.jsp" showBusyCursor="true"
     resultFormat="text" result="hsComResult(event)" fault="serviceFault(event)">
 </mx:HTTPService>
 <mx:Style> 
  .lc{
   font-family:宋体;
   font-size:14;
  }   
  .bigfont{
   font-family:宋体;
   font-size:14;
  }  
 </mx:Style><mx:Script>
  <![CDATA[  
   import mx.collections.ArrayCollection;
   import mx.collections.XMLListCollection;
   import mx.rpc.events.*;

   [Bindable]
   public var chart_title:String="";
   [Bindable]
   public var ylinestr: String="";
   [Bindable]
   public var xlinestr: String="";
   [Bindable]
   private var medalsAC:ArrayCollection = new ArrayCollection( );
   //[ { Opt: "参加会议", count: 4 },{ Opt: "不参加", count: 2 }, { Opt: "回复错误", count: 2 } ]
   //[Bindable]  
   //private var dataXML:XMLList;
   private function init():void{
    //StyleManager.getStyleDeclaration("ToolTip").setStyle("fontSize",12);    
    try{
     chart_title=this.parameters["title"].toString();
     ylinestr=this.parameters["yline"].toString();
     xlinestr=this.parameters["xline"].toString();
    }catch(e:Error){
     trace("[init]no para:"+e.message);
     chart_title="回复统计";
     ylinestr="回复数量";
     xlinestr="选项";
    } 
    hscom.url="chartmms.jsp?x="+Math.random();
    hscom.send();
   }
   private function hsComResult(event:ResultEvent):void{ //phone表格有结果
    p.title="正在处理数据...";     
        
    var dataXML:XMLList = XMLList(event.result.valueOf());
    //trace(dataXML.length());    
    //trace(dataXML[1].@Opt);
    //medalsAC=new ArrayCollection( );    
    for each(var xmlnode:XML in dataXML){
     var obj:Object=new Object();
     obj.Opt=xmlnode.@Opt;
     obj.count=xmlnode.@count;     
     medalsAC.addItem(obj);
    }
    //medalsAC.addItem(dataXML);        
    p.title=chart_title;
   }  
   private function serviceFault(event:FaultEvent):void{ //phone表格结果失败         
    trace(event.message);
    p.title="没有得到用户数据";          
   } 
  ]]>    
 </mx:Script>
 <!--定义填充区域样式. -->
 <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
 <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
 <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>   
 <!-- 定义线条样式 -->  
 <mx:Stroke id="s1" color="yellow" weight="2"/>
 <mx:Stroke id="s2" color="0xCCCCCC" weight="2"/>
 <mx:Stroke id="s3" color="0xFFCC66" weight="2"/>  
 <mx:Panel title="回复统计" id="p"  height="333" width="415" layout="horizontal" fontSize="14">
  <mx:ColumnChart id="column" height="100%" width="100%" paddingLeft="5" styleName="lc" paddingRight="5" showDataTips="true" dataProvider="{medalsAC}" showLabelVertically="false" >
   <mx:horizontalAxis><!--表示横向坐标的序列字段-->
    <mx:CategoryAxis id="xline" categoryField="Opt" title="{xlinestr}" />
   </mx:horizontalAxis>
   <mx:horizontalAxisRenderers>
    <mx:AxisRenderer axis="{xline}" color="0x666666" >
     <mx:titleRenderer>
      <mx:Component>
       <mx:Label color="0x000000"/>
      </mx:Component>
     </mx:titleRenderer>
    </mx:AxisRenderer>
   </mx:horizontalAxisRenderers>
   <mx:verticalAxis>
    <mx:LinearAxis id="yline"  title="{ylinestr}"/>
   </mx:verticalAxis> 
   <mx:verticalAxisRenderers>
    <mx:AxisRenderer color="0x000000" axis="{yline}"/>
   </mx:verticalAxisRenderers>
   <mx:series><!--要展示的数据列字段--> 
    <mx:ColumnSeries xField="Opt" yField="count" labelPosition="outside" color="0x000000" displayName="{ylinestr}" fill="{sc3}" stroke="{s2}"  />     
   </mx:series>       
  </mx:ColumnChart>
  <mx:Legend dataProvider="{column}" legendItemClass="com.BigLegendItem" horizontalCenter="0" height="20"  color="0x000000"/>
 </mx:Panel>
</mx:Application>
-------------------------chartmms.jsp

<optcount Opt="参加会议" count="4"/> 
<optcount Opt="不参加" count="2"/>
<optcount Opt="回复错误" count="2"/> 

--------------------BigLegendItem.as

package com
{
 import mx.charts.LegendItem;
 
 public class BigLegendItem extends LegendItem
 {
  public function BigLegendItem()
  {
   super();
   this.styleName = "bigfont";
  }
 }
}