Flex列集未正确显示

Question

我正在开发一个图表，其中我需要有多个列集，但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个堆叠的列系列，但是4个堆叠列系列中的1个是柔性滴（我只能看到3个或2个列，它只剩下一个）。我调试了我的代码并且数据完全正常如果我删除了所有的列集并像那样写了它给了我第一个堆叠列的正确结果。但是因为我想要第二列也将在一个地方对所有数据进行求和。例如，第一个堆叠列将显示季度利润金额和第二列我希望全年显示总利润。“

您可以在此处查看图表

- 不直接在定义中使用列集和绑定系列   - 正如你所看到的那样，宿舍被丢弃了。在两个图表中数据源相同

  

我不知道我在这里做错了什么。任何形式的帮助都将是   赞赏。提前致谢。

Answer 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>