Flex 动态创建多个曲线图/柱形图 ColumnSeries
获取数据后的回调函数
private function resultHandlerDay(event:ResultEvent):void {
statisticCount = event.result.statistic.weekstatistic.length;
var source:ArrayCollection = event.result.statistic.buildingtatistic;
var seriesArr:Array = new Array();
for(var i:Number = 0;i<source.length;i++){
var columnSeries:ColumnSeries = new ColumnSeries();
columnSeries.xField = "statday";
columnSeries.yField = "pitchpower"+(i+1);
columnSeries.displayName = source[i].buildingname;
seriesArr.push(columnSeries);
}
if(statisticCount==null){
myData=null;
}else{
columnCharts.series = seriesArr;
columnCharts.dataProvider = event.result.statistic.weekstatistic;
}
}
<mx:HTTPService id="myService" url="loaddata.action" method="GET" result="resultHandlerDay(event)">
</mx:HTTPService>
<mx:Panel
title="能耗统计"
width="643" height="462" fontSize="12" paddingTop="10" paddingBottom="0" paddingLeft="0" paddingRight="0" layout="absolute"
borderAlpha="1"
id="panelid"
borderThicknessBottom="0"
borderThicknessLeft="0"
borderThicknessRight="0"
borderThicknessTop="0"
horizontalGap="0"
verticalGap="0"
verticalAlign="top"
titleStyleName="fileItemover" x="0" y="0">
<mx:ViewStack id="myViewstack" width="643" height="422" borderStyle="solid" paddingTop="0" backgroundColor="white" x="0" y="10">
<mx:VBox id="child1" height="411" width="632" verticalAlign="middle">
<mx:ColumnChart id="columnCharts" dataProvider="{myData}" showDataTips="true" columnWidthRatio="0.6" width="623" height="338">
<mx:backgroundElements>
<mx:GridLines>
<mx:horizontalStroke>
<mx:Stroke color="haloSilver" weight="0" />
</mx:horizontalStroke>
</mx:GridLines>
</mx:backgroundElements>
<mx:verticalAxis>
<mx:LinearAxis id="la" baseAtZero="true" title="能耗(单位:万千瓦时)"/>
</mx:verticalAxis>
<mx:verticalAxisRenderers>
<mx:AxisRenderer axis="{la}" canDropLabels="false" fontSize="12"/>
</mx:verticalAxisRenderers>
<mx:horizontalAxis>
<mx:CategoryAxis id="ca" categoryField="statday" title="时间(单位：周)"/>
</mx:horizontalAxis>
<mx:horizontalAxisRenderers>
<mx:AxisRenderer axis="{ca}" canDropLabels="false" fontSize="12"/>
</mx:horizontalAxisRenderers>
<mx:series>
<mx:ColumnSeries xField="statday" yField="pitchpower1" displayName="建筑" fontSize="12" labelPosition="outside" id="changeOption1" showDataEffect="{interpolateIn}">
<mx:fill>
<mx:RadialGradient>
<mx:entries>
<mx:Array>
<mx:GradientEntry color="haloBlue"
ratio="0.0"
alpha="1.0" />
</mx:Array>
</mx:entries>
</mx:RadialGradient>
</mx:fill>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend horizontalGap="28" paddingLeft="150" id="legend" dataProvider="{columnCharts}" direction="horizontal" legendItemClass="BigFontLegendItem" width="621" height="32"/>
</mx:VBox>
</mx:ViewStack>
</mx:Panel>
xml 数据源：
<statistic>
<weekstatistic>
<statday>11</statday>
<pitchpower1>11.11</pitchpower1>
<pitchpower2>11.11</pitchpower2>
</weekstatistic>
<weekstatistic>
<statday>22</statday>
<pitchpower1>22.22</pitchpower1>
<pitchpower2>11.11</pitchpower2>
</weekstatistic>
<buildingtatistic>
<buildingname>建筑一号</buildingname>
</buildingtatistic>
<buildingtatistic>
<buildingname>建筑2号</buildingname>
</buildingtatistic>
</statistic>
tags:Flex 动态创建多个曲线图/柱形图 ColumnSeries
本文转自yjflinchong 51CTO博客，原文链接：http://blog.51cto.com/yjflinchong/1165112，如需转载请自行联系原作者
