`
Supanccy2013
  • 浏览: 225481 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

flex 之折线图1

阅读更多
该博文转自:http://hi.baidu.com/wangqinlanbd/item/0b2d98797d88f22d5c1789e9

<?xml version="1.0"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
				layout="vertical" 
				verticalAlign="middle" 
				backgroundColor="white" 
				preinitialize="init();"> 
	
	<mx:Script> 
		<![CDATA[ 
			import mx.charts.chartClasses.IAxis; 
			import mx.formatters.CurrencyFormatter; 
			
			private var currFormatter:CurrencyFormatter; 
			
			private function init():void { 
				currFormatter = new CurrencyFormatter(); 
				currFormatter.precision = 2; 
			} 
			
			private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String { 
				return currFormatter.format(item); 
			} 
			
			private function lineChart_creationComplete():void { 
				var linearAxisMinimum:int = Math.floor(linearAxis.computedMinimum); 
				var linearAxisMaximum:int = Math.ceil(linearAxis.computedMaximum); 
				linearAxis.minimum = linearAxisMinimum; 
				linearAxis.maximum = linearAxisMaximum; 
			} 
		]]> 
	</mx:Script> 
	
	<mx:XMLListCollection id="dp"> 
		<mx:source> 
			<mx:XMLList> 
				<quote date="8/27/2007" open="40.38" close="40.81" /> 
				<quote date="8/24/2007" open="40.5" close="40.41" /> 
				<quote date="8/23/2007" open="40.82" close="40.6" /> 
				<quote date="8/22/2007" open="40.4" close="40.77" /> 
				<quote date="8/21/2007" open="40.41" close="40.13" /> 
				<quote date="8/20/2007" open="40.55" close="40.74" /> 
				<quote date="8/17/2007" open="40.18" close="40.32" /> 
				<quote date="8/16/2007" open="39.83" close="39.96" /> 
				<quote date="8/15/2007" open="40.22" close="40.18" /> 
				<quote date="8/14/2007" open="41.01" close="40.41" /> 
				<quote date="8/13/2007" open="41" close="40.83" /> 
				<quote date="8/10/2007" open="41.3" close="41.06" /> 
				<quote date="8/9/2007" open="39.9" close="40.75" /> 
				<quote date="8/8/2007" open="39.61" close="40.23" /> 
				<quote date="8/7/2007" open="39.08" close="39.42" /> 
				<quote date="8/6/2007" open="38.71" close="39.38" /> 
				<quote date="8/3/2007" open="39.47" close="38.75" /> 
				<quote date="8/2/2007" open="39.4" close="39.52" /> 
				<quote date="8/1/2007" open="40.29" close="39.58" /> 
			</mx:XMLList> 
		</mx:source> 
	</mx:XMLListCollection> 
	
	<mx:ApplicationControlBar dock="true"> 
		<mx:Form styleName="plain"> 
			<mx:FormItem label="minimum:"> 
				<mx:HSlider id="minSlider" 
							minimum="28" 
							maximum="38" 
							value="38" 
							liveDragging="true" 
							snapInterval="1" 
							change="linearAxis.minimum = event.value;" /> 
			</mx:FormItem> 
			<mx:FormItem label="maximum:"> 
				<mx:HSlider id="maxSlider" 
							minimum="42" 
							maximum="52" 
							value="42" 
							liveDragging="true" 
							snapInterval="1" 
							change="linearAxis.maximum = event.value;" /> 
			</mx:FormItem> 
		</mx:Form> 
		
		<mx:Spacer width="100%" /> 
		
		<mx:Legend dataProvider="{lineChart}" 
				   direction="horizontal" /> 
	</mx:ApplicationControlBar> 
	
	<mx:LineChart id="lineChart" 
				  showDataTips="true" 
				  dataProvider="{dp}" 
				  width="100%" 
				  height="100%" 
				  creationComplete="lineChart_creationComplete();"> 
		
		<mx:backgroundElements> 
			<mx:GridLines id="gridLines" 
						  verticalTickAligned="false"> 
				<mx:verticalStroke> 
					<mx:Stroke color="haloSilver" 
							   weight="0" 
							   alpha="1.0" /> 
				</mx:verticalStroke> 
				<mx:horizontalStroke> 
					<!-- Set alpha to 0 so stroke isn't visible. --> 
					<mx:Stroke color="white" 
							   weight="0" 
							   alpha="0.0" /> 
				</mx:horizontalStroke> 
				<mx:horizontalFill> 
					<mx:SolidColor color="haloSilver" 
								   alpha="0.1" /> 
				</mx:horizontalFill> 
			</mx:GridLines> 
		</mx:backgroundElements> 
		
		<!-- vertical axis ** minorInterval:y轴线条的间 隔  interval:y轴数值的间隔,maximum:y轴最大值 , minimum:y轴最小值 --> 
		<mx:verticalAxis> 
			<mx:LinearAxis id="linearAxis" 
						   baseAtZero="false" 
						   title="Price (USD)" 
						   minorInterval="0.10" 
						   interval="0.5" 
						   maximum="78" minimum="0"
						   labelFunction="linearAxis_labelFunc" /> 
		</mx:verticalAxis> 
		
		<!-- horizontal axis --> 
		<mx:horizontalAxis> 
			<mx:CategoryAxis id="ca" 
							 categoryField="@date" 
							 title="Date" /> 
		</mx:horizontalAxis> 
		
		<!-- horizontal axis renderer --> 
		<mx:horizontalAxisRenderers> 
			<mx:AxisRenderer axis="{ca}"   fontSize="12"
							 canDropLabels="true" /> 
		</mx:horizontalAxisRenderers> 
		
		<!-- series --> 
		<mx:series> 
			<mx:LineSeries yField="@open" 
						   displayName="Open" /> 
		</mx:series> 
	</mx:LineChart> 
	
</mx:Application>
分享到:
评论

相关推荐

    flex 移动折线图

    在Flex编程中,移动折线图是一种常见的交互功能,它允许用户通过拖动来查看数据的不同部分,这对于处理大量数据或者需要动态分析趋势的应用来说非常有用。本篇将深入探讨如何在Flex中实现线图的左右移动,以及...

    flex折线图

    1. **Flex折线图** 折线图是用于展示连续性数据变化趋势的图表,如时间序列数据。在Flex中,我们可以使用Spark或 Halo 组件库中的Chart类来创建折线图。首先,需要引入所需的库,然后定义一个Chart对象,并设置其...

    flex 折线图

    flex 折线图

    用arcgis for flex 在地图上显示柱状图 饼状图和折线图

    本教程将深入讲解如何利用ArcGIS for Flex在地图上显示柱状图、饼状图和折线图,以便于用户更直观地理解地理数据。 首先,我们需要了解ArcGIS for Flex的基本概念。ArcGIS for Flex是一个基于Adobe Flex的开发库,...

    flex折线的实现

    在IT行业中,"flex折线的实现"是一个与前端开发相关的知识点,主要涉及到CSS3中的Flexbox布局模型。Flexbox,全称为“Flexible Box”,旨在提供一种更加灵活的方式来处理元素的布局,尤其在响应式设计中表现优秀。...

    多款风格的Flex的Demo、柱状图、饼图、折线图等

    每个编号的文件可能代表一个独立的示例,比如1可能是柱状图的基础用法,2可能是饼图的进阶展示,3可能是折线图的动态效果,以此类推。 通过研究这些Demo,开发者可以学习到如何配置数据源、调整图表属性、响应用户...

    Flex 实时曲线图(定时获取后台数据)

    `mx:LineChart` 是Flex中用于绘制折线图的一个图表组件。它可以通过`dataProvider`属性与数据源进行绑定,这里的`dataProvider`就是之前定义的`ArrayCollection`。 ```as3 showDataTips="true" fontSize="12" y=...

    Flex 饼形图 piechart 柱形图 columnchart 条形图 barchart 折线图 linechart

    在Flex中,饼形图(piechart)、柱形图(columnchart)、条形图(barchart)和折线图(linechart)是数据可视化的重要工具,广泛应用于数据分析和展示。 1. **饼形图(PieChart)** 饼形图用于显示部分与整体之间...

    flex统计图标实例,饼状图,柱状图,折线图

    在本压缩包文件"Charts"中,我们聚焦于Flex中的统计图表功能,包括饼状图、柱状图和折线图的实例。这些图表是数据可视化的重要工具,帮助用户直观地理解复杂的数据信息。 饼状图在统计学中被广泛用于显示部分与整体...

    flex统计图 柱状 饼图折线

    在本讨论中,我们将深入探讨如何使用Flex构建柱状图、饼图和折线图,这些都是数据可视化中常见的图表类型,对于数据分析和展示至关重要。 1. **柱状图(Bar Chart)**: 柱状图是用长条的高度或长度来表示数值大小...

    Flex制作的几款漂亮的立体柱状图饼状图和折线图

    在给定的资源中,"Flex制作的几款漂亮的立体柱状图饼状图和折线图"显然涉及到Flex的图表组件,这些组件允许开发者创建出具有专业视觉效果的数据可视化应用。 在Flex中,Chart类是用于展示数据的主要组件。它可以...

    flex实时更新曲线图

    1. **Flex图表组件**:Flex提供了多种图表类型,包括折线图、柱状图、饼图等。曲线图,即折线图,用于展示数据随时间变化的趋势。它通过连接一系列数据点形成连续的线条,使用户能够直观地看到数据的变化情况。 2. ...

    flex 实现的折线

    在本案例中,"flex 实现的折线"指的是使用Flex技术创建的图形元素,具体为一条由多个点连接形成的折线。这种折线通常会用在数据可视化、地图绘制或任何需要表示路径或轨迹的应用中。 在Flex中,我们可以利用`mx....

    折线图

    折线图示例

    flex图形组件

    2. Flex图形组件类型:Flex提供多种图形组件,如BarChart(条形图)、PieChart(饼图)、LineChart(折线图)、AreaChart(面积图)等,适用于不同类型的数据显示需求。 3. 数据绑定:Flex图形组件支持数据绑定,...

    FLEX 等距离偏移一条折线

    将一条折线,等距离偏移一定距离。 把屏幕坐标转换为GIS坐标,可以在地图上偏移折线

    flex统计分析图

    FusionCharts是一个知名的图表库,它专为Web应用设计,支持多种图表类型,如折线图、柱状图、饼图、散点图等,用于数据可视化。在Flex环境中,FusionCharts能够帮助开发者轻松地创建动态、交互式的统计图表,使得...

    Flex画线(直线,折线)完美实现

    本示例“Flex画线(直线,折线)完美实现”专注于提供一种高效、灵活的方法来绘制动态直线和折线,并允许用户进行实时编辑。通过这个项目,开发者可以学习如何在Flex应用中实现这一功能,提升用户体验。 首先,Flex是...

Global site tag (gtag.js) - Google Analytics