原创 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>

 效果图:

    效果图

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值