您的位置:首页 > 其它

flex柱状图,线形图,饼图简单示例

2010-11-08 09:34 148 查看
留给自己备用的示例。:)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:VBox>
		 <mx:Panel width="408" height="480" layout="absolute" horizontalCenter="0" verticalCenter="11" title="柱状图">
			 <mx:ColumnChart id="myChart" dataProvider="{finance}" horizontalCenter="-1" verticalCenter="48" showDataTips="true"  width="346" height="330" >
			  	  <mx:horizontalAxis><!-- 定义横坐标,绑定到“finance”数据库中的Month上 -->
					 <mx:CategoryAxis
					     dataProvider="{finance}"
					     categoryField="Month"
					     title="(月份)"
					     />
			   	   </mx:horizontalAxis>
				   <mx:series><!-- 数据以柱状的形式显示  -->
					   <mx:ColumnSeries xField="Month" yField="In" displayName="收入"  /><!-- x为月份,y为收入 -->
					   <mx:ColumnSeries xField="Month" yField="Out" displayName="支出" /><!--x为月份,y为支出 -->
					   <mx:ColumnSeries xField="Month" yField="b" displayName="支b" /><!--x为月份,y为支出 -->
				  </mx:series>
			  </mx:ColumnChart>
			 <!-- Legend组件绑定柱状图中的数据名 -->
			  <mx:Legend dataProvider="{myChart}"    y="40" x="30"/>
		 </mx:Panel>
		 
		 <mx:Panel>
		 	<mx:PieChart id="chart"  showDataTips="true" width="100%" height="100%"  
		                 dataProvider="{finance}" innerRadius=".3" horizontalCenter="0" verticalCenter="0">  
		        <mx:series>  
		            <mx:Array>  
		                <mx:PieSeries nameField="Month" field="In" >  
		                   
		                </mx:PieSeries>  
		            </mx:Array>  
		        </mx:series>  
		      </mx:PieChart>   
		      <mx:Legend dataProvider="{chart}" right="0" bottom="0"/> 
		 </mx:Panel>
		 
		  <mx:Panel title=" 用Model和source获取xml">
		      <mx:LineChart id="myChart2" dataProvider="{finance}" showDataTips="true">
		        <mx:horizontalAxis>
		           <mx:CategoryAxis categoryField="month"/>
		        </mx:horizontalAxis>
		        <mx:series>
		           <mx:LineSeries yField="In" displayName="Banana"/>
		           <mx:LineSeries yField="Out" displayName="Apple"/>
		           <mx:LineSeries yField="b" displayName="Orange"/>
		        </mx:series>
		     </mx:LineChart>
		     <mx:Legend dataProvider="{myChart2}"/>     
		  </mx:Panel>
		  <mx:Script>
		 <!--[CDATA[
		  import mx.collections.ArrayCollection;
		  [Bindable]
		  //定义数据集,数据集的内容为每月的收支情况
		  public var finance:ArrayCollection = new ArrayCollection(
		  [
		  {Month:"一月",In:2000,Out:1000,b:3000},
		  {Month:"二月",In:1000,Out:500,b:1300},
		  {Month:"三月",In:2500,Out:1100,b:3000},
		  {Month:"四月",In:3000,Out:1500,b:3000},
		  {Month:"五月",In:2000,Out:1300,b:300},
		  {Month:"六月",In:2300,Out:700,b:3000},
		  {Month:"七月",In:3100,Out:1700,b:3000},
		  {Month:"八月",In:2300,Out:900,b:3000},
		  {Month:"九月",In:3200,Out:1600,b:3000},
		  {Month:"十月",In:2200,Out:600,b:3000},
		  {Month:"十一月",In:1500,Out:760,b:3000},
		  {Month:"十二月",In:3500,Out:1000,b:3000},
		  ]);
		 ]]-->
		</mx:Script>
	</mx:VBox>
</mx:Application>




监听chart的itemClick事件
返回ChartItemEvent,其中
event.hitSet[0].item.Month
可以取到当前的柱子横坐标的值
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: