1

我在 flex 中有一个柱形图，它有很多列，用户可以选择按列顺序显示或叠加显示。根据用户屏幕，它使图表更具可读性。但是，然后我可以根据数据进行任何调用以更改叠加顺序。即最大的数据列在后面，被下一个最大的列覆盖，依此类推，直到最小的列位于顶部。当前默认行为一些小列被较大的列所掩盖，我不想更改 alpha 值来执行此操作。（首先感谢flashharry！因为我在一些讨论论坛中看到这个问题2-3 次，但在任何地方都没有回答）。这在弹性柱形图中可能吗？？？

任何帮助将不胜感激。

提前致谢..

@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>
4

1 回答 1

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>
于 2013-01-21T21:53:21.957 回答