2013-02-18 58 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>