最近由于项目的需要,用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>
文章来源:
http://probe.javaeye.com/blog/481686