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

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