Flex动态创建多个曲线图+柱形图

xiaoxiao2021-03-01  6

Flex动态创建多个曲线图+柱形图

获取数据后的回调函数

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>

相关资源:带音效新年烟花动画特效-HTML-代码
转载请注明原文地址: https://www.6miu.com/read-3850343.html

最新回复(0)