2013-02-18 77 views
0

我正在開發一個圖表,其中我需要有多個列集,但flex給我奇怪的結果。我正在使用歐芹框架Flex列集顯示不正確

這裏是我的MXML代碼

<mx:ColumnChart id="columnChart" 
      width="100%" height="100%" 
      dataProvider="{myPM.myData}" 
      showDataTips="true"       
      click="handleChartClick(event)" 
      backgroundElements="{backgroundGrids}"         
      dataTipFunction="{myPM.formatColumnChartToolTipData}" 
      type="clustered"        
      > 

       <mx:horizontalAxis> 
        <mx:CategoryAxis id="hAxis" 
          categoryField="{myPM.xFieldLabel}" 
          title="{myPM.xAxisDisplayLabel}"/> 
       </mx:horizontalAxis>         

       <mx:verticalAxis> 
        <mx:LinearAxis id="vAxis" 
           title="{myPM.yAxisDisplayLabel}"/> 
       </mx:verticalAxis> 

       <mx:series> 
**works perfecly fine if i change type="clustered"**     
        <mx:ColumnSet series="{myPM.columnSeries}"         
           type="stacked" 
           verticalAxis="{vAxis}" 
             > 
        </mx:ColumnSet> 
        <mx:ColumnSet> 
         <mx:ColumnSeries xField="{myPM.xFieldLabel}" 
           yField="{myPM.yFieldLabel}" 
           displayName="year"/> 
        </mx:ColumnSet>            
       </mx:series> 

    </mx:ColumnChart> 

在我的演講模式,我是回這在下面的代碼提交柱系列

public class MyPM 
{ 

public var columnSeries:Array; 

public void init() 
{ 
     columnSeries=getColumnSeries(); 
} 
public function getColumnSeries():Array 
{ 
    var series:Array = new Array(); 
    var columnSeries:ColumnSeries; 


    columnSeries=new ColumnSeries(); 
    //columnSeries.xField=xFieldLabel; 
    columnSeries.yField="quarter1_profit_count"; 
    columnSeries.displayName="quarter1_title";     
    series.push(columnSeries); 

    columnSeries=new ColumnSeries(); 
    //columnSeries.xField=xFieldLabel; 
    columnSeries.yField="quarter2_profit_count"; 
    columnSeries.displayName="quarter2_title"; 
    series.push(columnSeries); 

    columnSeries=new ColumnSeries(); 
    //columnSeries.xField=xFieldLabel; 
    columnSeries.yField="quarter3_profit_count"; 
    columnSeries.displayName="quarter3_title"; 
    series.push(columnSeries); 

    columnSeries=new ColumnSeries(); 
    //columnSeries.xField=xFieldLabel; 
    columnSeries.yField="quarter4_profit_count"; 
    columnSeries.displayName="quarter4_title"; 
    series.push(columnSeries); 

    return series; 

} 
} 

我在這裏得到的問題是 「在第一列中應該有4個堆棧列系列,但flex drop 4個堆棧列系列中的1個(我能夠看到只剩下3列或2列,剩下一列)我調試了我的代碼,數據完美無缺。刪除所有列集和wr ite像那樣,它給了我第一個堆積列的正確結果。但是,因爲我想第二列也將有一個地方的所有數據的總和。例如, 1疊柱將展示quarterwise利潤數額,我想有一年四季顯示利潤總額第二列「

在這裏可以看到圖表

- 不使用columnsets並直接結合系列定義 without using columnsets and binding series directly in <mx:columnchart> definition - 你可以看到宿舍都在這裏丟棄在兩個圖表數據來源是相同 as you can see the quarters are dropped here. in both the charts data source is same

我不知道我在這裏做錯了什麼。任何形式的幫助將被 讚賞。提前致謝。

回答

1

經過大量的努力,我來到了解決方案。這是代碼。

public function getColumnSeries():Array 
{ 
    var series:Array = new Array(); 

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

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

    var columnSeries:ColumnSeries; 


    columnSeries=new ColumnSeries(); 
    //columnSeries.xField=xFieldLabel; 
    columnSeries.yField="quarter1_profit_count"; 
    columnSeries.displayName="quarter1_title";     
    series.push(columnSeries); 

    columnSeries=new ColumnSeries(); 
    //columnSeries.xField=xFieldLabel; 
    columnSeries.yField="quarter2_profit_count"; 
    columnSeries.displayName="quarter2_title"; 
    series.push(columnSeries); 

    columnSeries=new ColumnSeries(); 
    //columnSeries.xField=xFieldLabel; 
    columnSeries.yField="quarter3_profit_count"; 
    columnSeries.displayName="quarter3_title"; 
    series.push(columnSeries); 

    columnSeries=new ColumnSeries(); 
    //columnSeries.xField=xFieldLabel; 
    columnSeries.yField="quarter4_profit_count"; 
    columnSeries.displayName="quarter4_title"; 
    series.push(columnSeries); 

    set1.series=series; 

    //similarly for set2 

    series=new Array(); 

    //add columnseries to series 

    set2.series=series; 

    var temp:Array=new Array(); 
    temp.push(set1); 
    temp.push(set2); 

    return temp; 
} 

也隨這確保您計算最大值和最小值爲y軸否則它不會呈現屬性格式。這也是我的圖表沒有按照我想要的方式顯示的原因之一。

這裏是更新標記

<mx:ColumnChart id="columnChart" 
      width="100%" height="100%" 
      dataProvider="{myPM.myData}" 
      showDataTips="true"       
      click="handleChartClick(event)" 
      backgroundElements="{backgroundGrids}"         
      dataTipFunction="{myPM.formatColumnChartToolTipData}" 
      type="clustered"        
      series={myPM.series} 
      > 

       <mx:horizontalAxis> 
        <mx:CategoryAxis id="hAxis" 
          categoryField="{myPM.xFieldLabel}" 
          title="{myPM.xAxisDisplayLabel}"/> 
       </mx:horizontalAxis>         

       <mx:verticalAxis> 
        <mx:LinearAxis id="vAxis" 
           title="{myPM.yAxisDisplayLabel}"/> 
       </mx:verticalAxis> 

    </mx:ColumnChart>