`
fengzheng0603
  • 浏览: 72962 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

原创 flex 折线图和柱状图叠加显示

    博客分类:
  • flex
 
阅读更多
<?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"  >
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var dataArray:ArrayCollection = new ArrayCollection( [
				{ Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
				{ Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
				{ Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
				{ Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
				{ Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
		]]>


	</fx:Script>
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
	</fx:Declarations>
	<s:Group x="6" y="2" width="600" height="258"  >
		<mx:ColumnChart x="6" y="10" id="columnchart1" showDataTips="true"  height="244" width="100%" fontSize="12">
			<mx:horizontalAxis>
				<mx:CategoryAxis id="cc" dataProvider="{dataArray}" categoryField="Month">
				</mx:CategoryAxis>
			</mx:horizontalAxis>
			<mx:series>
				<mx:ColumnSeries  dataProvider="{dataArray}"   maxColumnWidth="10"  displayName="横坐标" xField="Month" yField="Profit"  />
				<mx:LineSeries  id="lineSeries" dataProvider="{dataArray}" displayName="平均值" xField="Month" yField="Expenses"/>
				<mx:LineSeries  id="lineSeries2" dataProvider="{dataArray}" displayName="Amount" xField="Month" yField="Amount"/>
			</mx:series>
		</mx:ColumnChart>
	</s:Group>
</s:Application>

 效果图:

    效果图

 

  • 大小: 18.4 KB
分享到:
评论

相关推荐

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

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

    flex折线图

    在本主题中,我们将深入探讨Flex中如何实现折线图,同时也会涉及到饼状图和柱状图的制作,这些都是数据可视化的常见图表类型。 1. **Flex折线图** 折线图是用于展示连续性数据变化趋势的图表,如时间序列数据。在...

    flex 折线图

    flex 折线图

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

    在这个压缩包中,包含了一系列的Flex Demo,涵盖了不同的图表类型,如柱状图、饼图和折线图,这些都是数据可视化的常用工具。 首先,让我们来详细了解一下Flex中的图表组件。Flex提供了强大的图表组件库,允许...

    flex 移动折线图

    总的来说,实现Flex中的移动折线图需要理解LineChart组件的特性,熟练掌握DragManager的用法,以及灵活处理数据和视图的同步。通过以上步骤,你可以创建一个交互性强、易于使用的移动线图,满足用户在大数据集上的...

    flex折线的实现

    在实际项目中,你可以参考这个链接去学习和实践,通过不断试验和调试,掌握flex折线布局的精髓。 至于"DesignDemo"这个文件名,可能是包含一个设计示例的压缩包,里面可能有HTML、CSS和JavaScript代码,用于展示...

    flex统计图 柱状 饼图折线

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

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

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

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

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

    FLEX画图之各种柱状图饼状图画法

    在本文中,我们将深入探讨如何使用Adobe Flex技术来创建各种柱状图和饼状图。Flex是一个基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。通过使用Flex,开发者可以轻松地创建交互式的图形界面...

    Flex画饼状、柱状图资料参考

    3. **动态生成图表**:利用Flex的图表组件,可以在Asp.Net中动态生成各种图表,包括饼状图和柱状图。 #### Flex其他实例 Flex不仅限于绘制图表,还支持多种复杂的应用场景,如动画、多媒体处理等。学习Flex的各种...

    flex拖拽形成柱状图,点击弹出图片窗口,柱状图用法

    综上所述,这个Flex实例展示了如何利用Flex的图表组件和事件处理机制创建交互式的柱状图。通过拖拽和点击事件,我们可以创建出更加动态且用户友好的数据可视化应用。在实际开发中,可以根据需求进一步定制图表,如...

    flex绘制的3d柱状体图形

    在Flex中实现3D柱状体图形,主要依赖于Flex的图形渲染和组件库。以下是一些关键知识点: 1. **图形渲染**:Flex使用矢量图形进行渲染,这使得图形在放大时仍能保持清晰。在3D柱状图中,每个柱子都是由多个矩形形状...

    flex倒立柱状图

    通过这些知识点的学习和实践,你可以构建出自己的“flex倒立柱状图”。文件列表中的“倒立柱状图”可能包含了示例代码、JSON数据文件和其他相关资源,是学习和实现这一功能的好起点。在实际项目中,根据具体需求,你...

    基于FLEX4多功能柱状统计图

    基于FLEX4多功能柱状统计图,包括了分组统计图、单项统计图。知识点有:设置坐标轴样式、图例样式、柱子颜色设置、柱子mouseover、click事件等。还包括比较怪异的图例文字大小设置。 这是一个可直接运行的DEMO。...

    flex 统计,柱状图,饼图。

    在本案例中,"flex 统计,柱状图,饼图"指的是使用Flex来创建数据可视化工具,具体是柱状图和饼图这两种常见的图表类型。 柱状图是一种统计图表,用于比较类别之间的数量差异。在Flex中,可以使用mx.charts系列类来...

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

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

    flex做的柱状图,动态显示效果

    本主题聚焦于使用Flex制作的柱状图以及如何实现动态显示效果。 柱状图是一种常见的数据可视化工具,用于比较不同类别的数值。在Flex中,我们可以利用MX图表组件库来创建柱状图,这个库包含了多种图表类型,如条形图...

    Flex漂亮的柱状图(ColumnChart)

    本资源包含的"Flex漂亮的柱状图(ColumnChart)"是一个示例项目,展示了如何在Flex中实现动态效果和颜色变化的柱状图。通过下载并解压提供的"columnChart"压缩包,您可以找到源代码和演示文件。其中,"test.html"是...

Global site tag (gtag.js) - Google Analytics