Flex 图表

最新推荐文章于 2014-04-29 20:38:48 发布

Allen_Oscar

最新推荐文章于 2014-04-29 20:38:48 发布

阅读量2.7k

点赞数

分类专栏： flex 文章标签： flex图表

本文链接：https://blog.csdn.net/allen_oscar/article/details/9070695

版权

flex 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

下载Flex图表插件 http://download.csdn.net/detail/allen_gang/5557877

1.柱形图

<?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" xmlns:amcharts="http://www.amcharts.com/com_internal" backgroundColor="#FFFFFF" width="100%" height="100%" viewSourceURL="srcview/index.html">
	   <fx:Script>
			 <![CDATA[             import mx.collections.ArrayCollection;
				
				[Bindable]
				private var chartData:ArrayCollection = new ArrayCollection([
					{year:2005,income:23.5,expenses:18.1},
					{year:2006,income:26.2,expenses:22.8},
					{year:2007,income:30.1,expenses:23.9},
					{year:2008,income:29.5,expenses:25.1},
					{year:2009,income:24.6,expenses:25.0}
				]);    
				
				
			]]> 
		</fx:Script>
	    <s:VGroup width="100%" height="100%">
			  <amcharts:AmSerialChart width="100%" height="100%" id="chart" dataProvider="{chartData}" categoryField="year" startDuration="1" angle="30" depth3D="30">
				   <amcharts:categoryAxis>
						<amcharts:CategoryAxis gridPosition="start" /> 
					</amcharts:categoryAxis>
				   <amcharts:graphs>
						<amcharts:AmGraph title="Income" id="g0" valueField="income" type="column" lineAlpha="0" fillAlphas="[1]" /> 
						<amcharts:AmGraph title="Expenses" id="g1" valueField="expenses" type="line" lineThickness="2" bullet="round" /> 
					</amcharts:graphs>
			  </amcharts:AmSerialChart>
			  
			<amcharts:AmLegend dataProvider="{chart}" width="100%" switchType="v" marginRight="20" marginLeft="40" textClickEnabled="false" marginBottom="15" /> 
		</s:VGroup>
  </s:Application>

2.折线图

<?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" xmlns:amcharts="http://www.amcharts.com/com_internal" backgroundColor="#FFFFFF" width="100%" height="100%" creationComplete="{generateChartData()}" viewSourceURL="srcview/index.html">
	    <fx:Script>
			  <![CDATA[             import com.amcharts.axes.Guide;
				import com.amcharts.chartClasses.AmGraph;
				import mx.collections.ArrayCollection;
				import flash.filters.DropShadowFilter;            
				
				[Bindable]
				private var chartData:ArrayCollection = new ArrayCollection(); 
				// generate some random data
				private function generateChartData():void{
					var firstDate:Date = new Date();
					firstDate.setDate(firstDate.getDate() - 20);
					
					for(var i:Number = 0; i < 20; i++){
						var newDate:Date = new Date(firstDate);
						newDate.setDate(newDate.getDate() + i);
						
						var visits:Number = Math.round(Math.random() * 40) + 100;
						
						chartData.addItem({date:newDate, visits:visits});
					}
					
					// create guide and add it to category axis
					var verticalGuideDate:Date = new Date();
					verticalGuideDate.setHours(0,0,0,0);
					verticalGuideDate.date -= 10;
					
					var verticalGuideToDate:Date = new Date();
					verticalGuideToDate.setHours(0,0,0,0);
					verticalGuideToDate.date -= 5;                
					
					var guide:Guide = new Guide();
					guide.date = verticalGuideDate;
					guide.toDate = verticalGuideToDate;
					guide.fillAlpha = 0.15;                                
					guide.lineAlpha = 0;
					
					catAxis.addGuide(guide);
				}
				
				[Bindable]
				private var shadow:DropShadowFilter = new DropShadowFilter(2,45,0,0.5);
				
				
				
			]]> 
		</fx:Script>
	  <amcharts:AmSerialChart id="chart" width="50%" height="50%" autoMargins="false" marginTop="0" marginLeft="0" marginRight="0" marginBottom="0" dataProvider="{chartData}" categoryField="date">
			  <amcharts:graphs>
				  <amcharts:AmGraph id="g1" lineColor="#7717D7" title="Visits" valueField="visits" type="line" dashLength="3" lineThickness="1" bullet="round" filters="{[shadow]}" /> 
			  </amcharts:graphs>
			  <amcharts:valueAxes>
				  <amcharts:ValueAxis inside="true" tickLength="0">
				 
						 <amcharts:guides>
							  <amcharts:Guide value="0" toValue="105" fillColor="#CC0000" fillAlpha="0.20" lineAlpha="0" /> 
							  <amcharts:Guide value="105" toValue="110" fillColor="#CC0000" fillAlpha="0.15" lineAlpha="0" /> 
							  <amcharts:Guide value="110" toValue="115" fillColor="#CC0000" fillAlpha="0.10" lineAlpha="0" /> 
							  <amcharts:Guide value="115" toValue="120" fillColor="#CC0000" fillAlpha="0.05" lineAlpha="0" /> 
							  <amcharts:Guide value="120" toValue="125" fillColor="#0000cc" fillAlpha="0.05" lineAlpha="0" /> 
							  <amcharts:Guide value="125" toValue="130" fillColor="#0000cc" fillAlpha="0.10" lineAlpha="0" /> 
							  <amcharts:Guide value="130" toValue="135" fillColor="#0000cc" fillAlpha="0.15" lineAlpha="0" /> 
							  <amcharts:Guide value="135" toValue="200" fillColor="#0000cc" fillAlpha="0.20" lineAlpha="0" /> 
						  </amcharts:guides>
					</amcharts:ValueAxis>
			  </amcharts:valueAxes>
			 <amcharts:categoryAxis>
				 
				  <amcharts:CategoryAxis id="catAxis" parseDates="true" minPeriod="DD" inside="true" tickLength="0" /> 
			  </amcharts:categoryAxis>
			 <amcharts:chartCursor>
				  <amcharts:ChartCursor /> 
			  </amcharts:chartCursor>
			  <amcharts:chartScrollbar>
				  <amcharts:ChartScrollbar graph="{g1}" hideResizeGrips="false" /> 
			  </amcharts:chartScrollbar>
		</amcharts:AmSerialChart>
  </s:Application>

<?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" xmlns:amcharts="http://www.amcharts.com/com_internal" backgroundColor="#FFFFFF" width="100%" height="100%" viewSourceURL="srcview/index.html">
 <fx:Style>@font-face {  fontFamily: "Tahoma"; embedAsCFF: false; unicode-range: U+0020-U+0040, /* Punctuation, Numbers */ U+0041-U+005A, /* Upper-Case A-Z */ U+005B-U+0060, /* Punctuation and Symbols */ U+0061-U+007A, /* Lower-Case a-z */ U+007B-U+007E; /* Punctuation and Symbols */ } .MyTextStyle { font-family: Tahoma; }</fx:Style> 
	    <fx:Script>
			 <![CDATA[             import mx.collections.ArrayCollection;
				
				[Bindable]
				private var chartData:Array = [{country:"USA",visits:4252,color:0xFF0F00},
					{country:"China",visits:1882,color:0xFF6600},
					{country:"Japan",visits:1809,color:0xFF9E01},
					{country:"Germany",visits:1322,color:0xFCD202},
					{country:"UK",visits:1122,color:0xF8FF01},
					{country:"France",visits:1114,color:0xB0DE09},
					{country:"India",visits:984,color:0x04D215},
					{country:"Spain",visits:711,color:0x0D8ECF},
					{country:"Netherlands",visits:665,color:0x0D52D1},
					{country:"Russia",visits:580,color:0x2A0CD0},
					{country:"South Korea",visits:443,color:0x8A0CCF},
					{country:"Canada",visits:441,color:0xCD0D74},
					{country:"Brazil",visits:395,color:0x754DEB},
					{country:"Italy",visits:386,color:0xDDDDDD},
					{country:"Australia",visits:384,color:0x999999},
					{country:"Taiwan",visits:338,color:0x333333},
					{country:"Poland",visits:328,color:0x000000}];
				
				
			]]> 
		</fx:Script>
	 <amcharts:AmSerialChart rotate="false" styleName="MyTextStyle" width="60%" height="40%" id="chart" dataProvider="{chartData}" categoryField="country" startDuration="1">
			  <amcharts:graphs>
				  <amcharts:AmGraph cornerRadiusTop="10" valueField="visits" balloonText="[[category]]: [[value]]" colorField="color" type="column" lineAlpha="0" fillAlphas="[0.8]" /> 
			  </amcharts:graphs>
			  <amcharts:valueAxes>
				  <amcharts:ValueAxis title="VISITS PER DAY" titleTextColor="#CC0000" /> 
			  </amcharts:valueAxes>
			  <amcharts:categoryAxis>
				  <amcharts:CategoryAxis gridPosition="start" labelRotation="45" gridCount="{chartData.length}" /> 
			  </amcharts:categoryAxis>
			  <amcharts:balloon>
				  <amcharts:AmBalloon cornerRadius="10" borderThickness="2" borderColor="#FFFFFF" borderAlpha="1" /> 
			  </amcharts:balloon>
			  <amcharts:chartCursor>
				  <amcharts:ChartCursor zoomable="false" cursorAlpha="0" categoryBalloonEnabled="false" /> 
			  </amcharts:chartCursor>
		</amcharts:AmSerialChart>
  </s:Application>

3.饼状图

<?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" xmlns:amcharts="http://www.amcharts.com/com_internal" backgroundColor="#FFFFFF" width="100%" height="100%" viewSourceURL="srcview/index.html">
		  <fx:Style>@font-face {   fontFamily: "Tahoma"; embedAsCFF: false; unicode-range: U+0020-U+0040, /* Punctuation, Numbers */ U+0041-U+005A, /* Upper-Case A-Z */ U+005B-U+0060, /* Punctuation and Symbols */ U+0061-U+007A, /* Lower-Case a-z */ U+007B-U+007E; /* Punctuation and Symbols */ } .MyTextStyle { font-family: Tahoma; }</fx:Style> 
	    <fx:Script>
		  <![CDATA[             import mx.collections.ArrayCollection;
				import flash.filters.DropShadowFilter;
				
				[Bindable]
				private var chartData:Array = [{country:"USA",visits:4252},{country:"China",visits:1882},{country:"Japan",visits:1809},{country:"Germany",visits:1322},{country:"UK",visits:1122},{country:"France",visits:1114},{country:"India",visits:984},{country:"Spain",visits:711},{country:"Netherlands",visits:665},{country:"Russia",visits:580},{country:"South Korea",visits:443},{country:"Canada",visits:441},{country:"Brazil",visits:395},{country:"Italy",visits:386},{country:"Australia",visits:384},{country:"Taiwan",visits:338},{country:"Poland",visits:328}];
				
				[Bindable]
				private var shadow:DropShadowFilter = new DropShadowFilter(2,45,0,0.5);
				
				
			]]> 
		</fx:Script>
	    <s:HGroup width="100%" height="100%">
			  <amcharts:AmPieChart styleName="MyTextStyle" width="50%" height="50%" dataProvider="{chartData}" valueField="visits" titleField="country" angle="5" depth3D="5" innerRadius="10" groupPercent="3" gradient="radial" filters="{[shadow]}" startDuration="1.5" startRadius="100" marginLeft="0" marginRight="0" labelWidth="100">
				    <amcharts:balloon>
						<amcharts:AmBalloon cornerRadius="10" borderThickness="2" borderColor="#FFFFFF" borderAlpha="1" /> 
					</amcharts:balloon>
			  </amcharts:AmPieChart>
			
		</s:HGroup>
  </s:Application>