2013-03-26 3 views
0

을 표시되지 나는 다음과 같은 XML 구조가 있습니다플렉스 스택 ColumnChart에이

<root> 
    <day name="Sun" values="21,22,25,26"/> 
    <day name="Mon" values="27,20,22,25"/> 
</root> 

나는 그것이 스택 막대 세로 막 대형 차트에 표현하고자합니다. 첫 번째 열은 일요일에 해당하는 21,22,25,26의 값으로 서로 쌓인 열로 구성됩니다. 값의 길이는 dataprovider가 갱신 될 때마다 변경 될 수 있습니다. 그래서 내가 좋아하는 코드를 작성 :

var columnChart:ColumnChart = new ColumnChart(); 
columnchart.type="stacked"; 
var yAxisData:String = "@values"; 
var xAxisData:String = "@name"; 
var dp:XMLListCollection = new XMLListCollection(xmlFile.day); 
columnchart.dataProvider = dp; 

var valueLength:int = dp[0][yAxisData].toString().split(",").length; 
for(var count:int = 0;count<valueLength;count++){ 
var bSeries:ColumnSeries = new ColumnSeries(); 
bSeries.dataProvider = dataProvider; 
bSeries.xField = xAxisData; 
bSeries.yField = yAxisData+"["+count+"]"; 
columnchart.series.push(bSeries); 
} 
var hAxis:CategoryAxis = new CategoryAxis(); 
hAxis.dataProvider = dp; 
hAxis.categoryField = xAxisData ; 
CartesianChart(columnchart).horizontalAxis = hAxis;  

그러나 그래프는 비어있는 것으로 밝혀오고있다. 나는 어디로 잘못 갔는가?

+0

문제는 가장 분명 bSeries.yField = yAxisData + "["+ 셀 + "]"는 문이다; 그러나 값의 수가 다를 수 있으며 문제를 해결하기 위해 구현을 원합니다. 와 같은 xml 구조체를 변경하고 싶지 않습니다. – Arun

답변

1

코드가 도움이 될 수 아래 : -

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
     <fx:XML format="e4x" id="xmlFile"> 
      <root> 
       <day name="Fri" values="11,22,33,44,55,66"/> 
       <day name="Sat" values="10,20,30,40,50,60"/> 
       <day name="Sun" values="21,22,25,26,56,76"/> 
       <day name="Mon" values="5,10,15,20,25,30"/> 
      </root> 
     </fx:XML> 
    </fx:Declarations> 
    <fx:Script> 
     <![CDATA[ 
      import mx.charts.CategoryAxis; 
      import mx.charts.ColumnChart; 
      import mx.charts.Legend; 
      import mx.charts.chartClasses.CartesianChart; 
      import mx.charts.chartClasses.Series; 
      import mx.charts.series.ColumnSeries; 
      import mx.charts.series.ColumnSet; 
      import mx.collections.ArrayCollection; 
      import mx.collections.XMLListCollection; 


      private function createChart():void 
      { 
       var columnChart:ColumnChart = new ColumnChart(); 
       var dp:XMLListCollection = new XMLListCollection(xmlFile.day); 
       var stackedData:ArrayCollection = new ArrayCollection(); 

       var yAxisData:String = "@values"; 
       var xAxisData:String = "@name"; 

       var horizontalCategoryAxis:CategoryAxis = new CategoryAxis(); 
       horizontalCategoryAxis.categoryField = "name"; 
       columnChart.horizontalAxis = horizontalCategoryAxis; 

       var columnSet:ColumnSet = new ColumnSet(); 
       columnSet.type = "stacked"; 

       for(var row:int=0; row < dp.length; row++){ 
        var arrayData:Array = dp[row][yAxisData].toString().split(","); 

        var seriesArray:Array = new Array(); 

        var obj:Object = new Object(); 
        obj.name = dp[row][xAxisData].toString(); 

        for(var j:int=0; j < arrayData.length; j++) 
        { 
         obj["xValues"+j] = arrayData[j].toString(); 
        } 
        stackedData.addItem(obj); 
       } 

       for(var col:int=0; col < arrayData.length; col++){ 
        var colmSeries:ColumnSeries = new ColumnSeries(); 
        colmSeries.yField = "xValues"+col; 
        colmSeries.displayName = "Value at "+col; 
        seriesArray.push(colmSeries); 
       } 

       columnSet.series = seriesArray; 
       columnChart.series = [columnSet]; 

       columnChart.dataProvider = stackedData; 
       columnChart.percentWidth = 70; 
       columnChart.percentHeight = 70; 
       columnChart.showDataTips = true; 

       var legend:Legend = new Legend(); 
       legend.direction = "horizontal"; 
       legend.dataProvider = columnChart; 

       container.addElement(columnChart); 
       container.addElement(legend); 
      } 

     ]]> 
    </fx:Script> 

    <s:VGroup id="container" width="100%" height="100%" creationComplete="createChart()"/> 
</s:Application>