柔性柱狀圖疊加層疊順序

Question

我有一個flex柱狀圖，有很多列，用戶可以選擇按列順序顯示或疊加顯示。根據用戶屏幕，它使圖表更具可讀性。 但是，是否可以根據數據調整覆蓋順序？即最大的數據列在後面，被下一個最大的數據列覆蓋，因此第四個直到最小的列在最上面。 當前的默認行爲一些小列被較大的列遮擋，我不想更改alpha值來做到這一點。 （首先感謝flashharry!作爲 我在一些論壇上看到這個question 2-3次，但沒有回答任何地方）。這是可能的flex列圖？

任何幫助將非常感激。

在此先感謝..

@Serge他

代碼示例： - 在下面的代碼的最後兩個月的利潤比費用較低，所以我們不能看連續劇，因爲它的背後是費用系列。我想更大的價值將始終落後於較低的價值

<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"> 
    <fx:Script> 
     <![CDATA[ 

      import mx.collections.ArrayCollection; 
      [Bindable] 
      public var expenses:ArrayCollection = new ArrayCollection([ 
       {Month:"Jan", Profit:2000, Expenses:1500}, 
       {Month:"Feb", Profit:1000, Expenses:200}, 
       {Month:"Mar", Profit:1100, Expenses:500}, 
       {Month:"Apr", Profit:1300, Expenses:900}, 
       {Month:"May", Profit:900, Expenses:1200}, 
       {Month:"June", Profit:1500, Expenses:2500} 
      ]); 


     ]]> 
    </fx:Script> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <s:BorderContainer width="100%" height="100%" > 
     <s:layout> 
      <s:VerticalLayout horizontalAlign="center"/> 
     </s:layout> 
     <mx:ColumnChart id="myChart" width="65%" 
         dataProvider="{expenses}" 
         showDataTips="true" 
         type="overlaid" 
         > 
      <mx:horizontalAxis> 
       <mx:CategoryAxis 
        dataProvider="{expenses}" 
        categoryField="Month" 
        /> 
      </mx:horizontalAxis> 
      <mx:series> 
       <mx:ColumnSeries 
        yField="Profit" 
        displayName="Profit" 
        > 
        <mx:fill> 
         <s:SolidColor color="0x00ff00"/> 
        </mx:fill> 
        </mx:ColumnSeries> 
       <mx:ColumnSeries 
        yField="Expenses" 
        displayName="Expenses" 
        > 
        <mx:fill> 
         <s:SolidColor color="0xff0000"/> 
        </mx:fill> 
        </mx:ColumnSeries> 
      </mx:series> 
     </mx:ColumnChart> 
     <mx:Legend dataProvider="{myChart}"/> 
     <mx:DataGrid dataProvider="{expenses}" editable="true"> 
      <mx:columns> 
       <mx:DataGridColumn dataField="Month" editable="true"/> 
       <mx:DataGridColumn dataField="Profit" editable="true"/> 
       <mx:DataGridColumn dataField="Expenses" editable="true"/> 
      </mx:columns> 
     </mx:DataGrid> 
    </s:BorderContainer> 
</s:Application> 

Answer 1

我已經研究了你的問題，深入初始化ColumnChart組件。有一個功能，系列中的所有列都放在單獨的圖層中。所以，無論是綠柱還是紅柱。沒有可能性改變系列中的一列的父...我恐怕你必須重寫組件的基本行爲，並將所有列放在同一個容器中並對它們的深度進行排序。我畫了一個例子：

<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" width="900" height="600"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.charts.series.items.ColumnSeriesItem; 
      import mx.collections.ArrayCollection; 

      [Bindable] 
      public var expenses:ArrayCollection = new ArrayCollection([ 
       {Month:"Jan", Profit:200, Expenses:100, Expenses2:50}, 
       {Month:"Feb", Profit:1000, Expenses:2000, Expenses2:500}, 
       {Month:"Mar", Profit:1100, Expenses:500, Expenses2:100}, 
       {Month:"Apr", Profit:1300, Expenses:900, Expenses2:1000}, 
       {Month:"May", Profit:900, Expenses:1200, Expenses2:1000}, 
       {Month:"June", Profit:1000, Expenses:2000, Expenses2:1500} 
      ]); 

      private var items:Array = []; 

      private function init():void 
      { 
       items = []; 
       for (var i:int=0; i<myChart.series.length; i++) 
       { 
        var series:ColumnSeries = myChart.series[i] as ColumnSeries; 
        for (var j:int=0; j<series.items.length; j++) 
        { 
         if (!items[j]) 
          items[j] = []; 

         var item:ColumnSeriesItem = series.items[j] as ColumnSeriesItem; 
         items[j][i] = item; 
         series.parent.addChild(item.itemRenderer as DisplayObject); 
        } 
       } 
       sort(); 
      } 

      private function sort():void 
      { 
       var h:Number = myChart.height - 50; 
       for (var i:int=0; i<items.length; i++) 
       { 
        var group:Array = items[i]; 
        group.sort(sortFunction); 
        for (var j:int=0; j<group.length; j++) 
        { 
         var item:ColumnSeriesItem = group[j] as ColumnSeriesItem; 
         item.itemRenderer.parent.setChildIndex(item.itemRenderer as DisplayObject, group.length - j - 1); 
         item.min = NaN; 
         if (j > 0) 
          item.min = h - group[j-1].itemRenderer.height; 
        } 
       } 
      } 

      private function sortFunction(item1:ColumnSeriesItem, item2:ColumnSeriesItem):int 
      { 
       var yValue1:int = item1.item[Object(item1.element).yField]; 
       var yValue2:int = item2.item[Object(item2.element).yField]; 
       return (yValue1 < yValue2) ? -1 : (yValue1 > yValue2) ? 1 : 0; 
      } 
     ]]> 
    </fx:Script> 
    <fx:Declarations> 
     <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 

    <s:BorderContainer width="100%" height="100%" > 
     <s:layout> 
      <s:VerticalLayout horizontalAlign="center"/> 
     </s:layout> 
     <mx:ColumnChart id="myChart" width="65%" 
         dataProvider="{expenses}" 
         showDataTips="true" 
         type="overlaid" 
         updateComplete="init()" 
         > 
      <mx:horizontalAxis> 
       <mx:CategoryAxis 
        dataProvider="{expenses}" 
        categoryField="Month" 
        /> 
      </mx:horizontalAxis> 
      <mx:series> 
       <mx:ColumnSeries 
        yField="Profit" 
        displayName="Profit" 
        > 
        <mx:fill> 
         <s:SolidColor color="0x00ff00"/> 
        </mx:fill> 
       </mx:ColumnSeries> 
       <mx:ColumnSeries 
        yField="Expenses" 
        displayName="Expenses" 
        > 
        <mx:fill> 
         <s:SolidColor color="0xff0000"/> 
        </mx:fill> 
       </mx:ColumnSeries> 
       <mx:ColumnSeries 
        yField="Expenses2" 
        displayName="Expenses2" 
        > 
        <mx:fill> 
         <s:SolidColor color="0xffff00"/> 
        </mx:fill> 
       </mx:ColumnSeries> 
      </mx:series> 
     </mx:ColumnChart> 
     <mx:Legend dataProvider="{myChart}"/> 
     <mx:DataGrid dataProvider="{expenses}" editable="true"> 
      <mx:columns> 
       <mx:DataGridColumn dataField="Month" editable="true"/> 
       <mx:DataGridColumn dataField="Profit" editable="true"/> 
       <mx:DataGridColumn dataField="Expenses" editable="true"/> 
       <mx:DataGridColumn dataField="Expenses2" editable="true"/> 
      </mx:columns> 
     </mx:DataGrid> 
    </s:BorderContainer> 
</s:Application>