Строка 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 столбчатых столбца, но изгиб капель 1 из 4 стековых столбцов (я могу видеть только 3 или 2 столбца, которые он остает один). Я отлаживал свой код, и данные идут отлично. Если i удалите все наборы столбцов и wr это похоже на то, что дает мне правильный результат для первого столбчатого столбца. Но так как мне нужен второй столбец, который будет суммировать все данные в одном месте. например. Первый стек колонка будет показывать quarterwise прибыль суммы и второй столбец, я хочу, чтобы отобразить общую прибыль в течение года «

Вы можете увидеть графики здесь

-. Без использования columnsets и связывания ряда непосредственно определение . - как вы можете увидеть кварталы упали здесь и в источнике данных диаграммы такое же

Я не знаю, что я делаю неправильно здесь. Любая помощь будет оценена. Заранее спасибо.

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>