Flex双Y轴的实现

最近由于项目的需要,用flex实现了一个双Y轴的Chart,现在将代码拿出来晒晒!

<?xml version="1.0"?>
<!-- Simple example to demonstrate the LineChart and AreaChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>
<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]
private var expensesAC:ArrayCollection = new ArrayCollection( [
{ Month: "Jan", Wage: 2000, Fine: 100},
{ Month: "Feb", Wage: 1000, Fine: 50},
{ Month: "Mar", Wage: 1500, Fine: 70},
{ Month: "Apr", Wage: 1800, Fine: 30},
{ Month: "May", Wage: 2400, Fine: 50} ]);
]]>
</mx:Script>
<mx:SolidColor id="sc1" color="blue" alpha=".3"/>
<mx:Stroke id = "s1" color="blue" weight="2"/>

<mx:Panel title="LineChart and AreaChart Controls Example"
height="100%" width="100%" layout="horizontal">

<mx:LineChart id="linechart" height="100%" width="100%"
paddingLeft="5" paddingRight="5"
showDataTips="true" dataProvider="{expensesAC}">

<mx:horizontalAxis>
<mx:CategoryAxis categoryField="Month"/>
</mx:horizontalAxis>

<mx:verticalAxis>
<mx:LinearAxis id="first" minimum="0" maximum="200"/>
</mx:verticalAxis>

<mx:secondVerticalAxis>
<mx:LinearAxis id="second" minimum="500" maximum="3000"/>
</mx:secondVerticalAxis>

<mx:series>
<mx:LineSeries verticalAxis="{first}" yField="Fine" form="curve" displayName="Fine"/>
<mx:ColumnSeries verticalAxis="{second}" yField="Wage" displayName="Wage" stroke="{s1}" fill="{sc1}"/>
</mx:series>
</mx:LineChart>
</mx:Panel>
</mx:Application>

效果请看附件.
[flash=710,100]http://i-jumbo.appspot.com/Google.swf[/flash]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值