Flex柱状图和线图结合
[img][/img]
<?xml version="1.0" encoding="utf-8"?><mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="800" height="400" fontSize="12"title="柱状图+线状图"creationComplete="initApp()"><!-- 柱状图加线图，各自用各自的Y轴 --><mx:Script> <![CDATA[ import mx.charts.series.items.ColumnSeriesItem; import mx.charts.chartClasses.Series; import mx.charts.ChartItem; import mx.collections.ArrayCollection; /** 绑定的数据源*/ [Bindable] private var medalsAC:ArrayCollection; /** * 初始化方法 */ private function initApp():void { var array:ArrayCollection = new ArrayCollection(); for(var i:uint; i<12; i++) { var obj:Object = new Object(); obj.month = (i+1) + "月份"; obj.number = 100 + Math.round(Math.random() * 500); array.addItem(obj); } medalsAC = new ArrayCollection(); //计算增长率 for(var j:uint; j<array.length; j++) { obj = new Object(); obj.month = array[j].month; obj.number = array[j].number; if(j>0) { obj.rise = Number(((array[j].number - array[j-1].number) / array[j-1].number) * 100).toFixed(2); } medalsAC.addItem(obj); } } ]]></mx:Script> <mx:SolidColor id="sc1" color="blue" alpha="0.6"/> <mx:Stroke id="s1" color="white" weight="2"/> <mx:Stroke id="s2" color="red" weight="2"/> <mx:HBox height="100%" width="100%" paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"> <mx:ColumnChart id="column" height="100%" width="100%" showDataTips="true" dataProvider="{medalsAC}" secondDataProvider="{medalsAC}" fontSize="12"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSeries yField="number" displayName="生产量" fill="{sc1}" stroke="{s1}"/> </mx:series> <mx:secondVerticalAxis> <mx:LinearAxis /> </mx:secondVerticalAxis> <mx:secondSeries> <mx:LineSeries yField="rise" displayName="增长率" form="curve" lineStroke="{s2}"/> </mx:secondSeries> </mx:ColumnChart> <mx:Legend dataProvider="{column}" fontWeight="bold"/> </mx:HBox></mx:Panel>