1

かなりの数の列を持つフレックスの縦棒グラフがあります。ユーザーは、列の順序で表示するか、重ねて表示するかを選択できます。ユーザーの画面によっては、グラフが読みやすくなります。ただし、データに応じてオーバーレイの順序を変更するために行うことができる呼び出しはありますか。つまり、最大のデータ列が背面にあり、次に大きい列が重ねられ、最小の列が一番上になるまで 4 番目に大きくなります。現在、デフォルトの動作では、小さな列の一部が大きな列によって隠されています。これを行うためにアルファ値を変更したくありません。(まず、flashharry に感謝します!いくつかのディスカッション フォーラムでこの質問を2 ～ 3 回見たことがありますが、どこにも答えていません)。これはフレックス縦棒グラフで可能ですか???

どんな助けでも大歓迎です。

前もって感謝します..

@セルジュ・ヒム

コード サンプル:- 以下のコードでは、過去 2 か月の利益が費用よりも少ないため、費用シリーズの背後にあるため、シリーズを見ることができません。より大きな価値が常により小さな価値の後ろにあることを望みます

<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 コンポーネントの初期化を深めました。シリーズのすべての列が別のレイヤーに配置されるという機能があります。したがって、緑色の列が上にあるか、赤色になっています。シリーズから1つの列の親を変更する可能性はありません...コンポーネントの基本的な動作をオーバーライドし、すべての列を同じコンテナーに配置して、それらの深さを並べ替える必要があります。私は例を描きました：

<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 に答える