flex4.6画图——柱状图

雨点打透心脏的1/2处 2024-02-17 14:31 19阅读 0赞

**Flex4柱状图：**

代码如下：两种数据源，第一种xml数据源已经注释，本例使用ArrayCollection显示。

<?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    			   xmlns:s="library://ns.adobe.com/flex/spark" 
    			   xmlns:mx="library://ns.adobe.com/flex/mx" 
    			   width="1073" height="654" minWidth="955" minHeight="600">
    	<fx:Declarations>
    		
    	</fx:Declarations>
    	<fx:Script>
    		<![CDATA[
    			import mx.charts.LegendItem;
    			import mx.collections.ArrayCollection;
    			[Bindable]
    			public var funs:ArrayCollection=new ArrayCollection([//创建数据集合
    				{name:"海贼王",hot:90,theatre:10,blues:482,rating:90,trends:100},
    				{name:"死神",hot:60,theatre:10,blues:230,rating:60,trends:70},
    				{name:"火影忍者",hot:80,theatre:12,blues:520,rating:80,trends:40},
    				{name:"柯南",hot:50,theatre:30,blues:600,rating:70,trends:30}
    				]);				
    			
    		]]>
    	</fx:Script>
    	
    	   
    		<s:Panel width="710" title="柱状图">
    			
    			<mx:ColumnChart id="barchart2" width="543" dataProvider="{funs}" fontFamily="幼圆"
    							fontSize="16"
    							showDataTips="true"
    							>
    				
    				<mx:horizontalAxis>  
    					<mx:CategoryAxis categoryField="name" />  
    				</mx:horizontalAxis> 
    				
    				<mx:series>			  
    					<mx:ColumnSeries xField="name" yField="hot"  displayName="人气指数" />
    					<mx:ColumnSeries xField="name" yField="theatre" displayName="剧场版数"/>
    					<mx:ColumnSeries xField="name" yField="blues" displayName="已出集数"/>
    					<mx:ColumnSeries xField="name" yField="rating" displayName="好评度"/>
    					<mx:ColumnSeries xField="name" yField="trends" displayName="发展趋势"/>
    				</mx:series>
    			</mx:ColumnChart>
    			
    			<mx:Legend x="547" y="11" height="183" dataProvider="{barchart2}" toolTip="图例">				
    			</mx:Legend>
    		</s:Panel>
    	
    </s:Application>

效果如下：

![20140414173212281][]

[20140414173212281]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/f2530961378a41f4ae8d5c5c43e5e76e.png