apache-flex - 積み上げ縦棒グラフの動的系列が表示されない場合がある

Question

さまざまなデータが含まれる積み上げ縦棒グラフがあります。この問題は、垂直軸の autoAdjust が true に設定されている場合に発生し、一部のシリーズが表示されません (軸の値がシリーズ値の範囲に達していないため)。autoaxis を false に設定し、手動で最大値と最小値を設定している場合、すべてのシリーズは適切に表示されますが、データについて既にわかっている場合にのみ手動で軸をセットアップできます。私のデータは動的で、軸の最大値についてはわかりません。問題の回避策はありますか? 前もって感謝します。

Answer 1

「render」イベントを使用して、チャート内のすべての系列のデータを循環する関数を追加できます。このイベントは、何かがレンダリングされる直前に送出され、チャートがレンダリングできる最大値を計算するために使用できます。

次の例で行われた「最小」計算を利用したい場合は、垂直軸の「baseAtZero」プロパティを「false」に設定します。

次に例を示します。

<mx:Canvas 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="init()"
    click="generateRandomData()"
    >

    <mx:Script>
        <![CDATA[
            import mx.charts.chartClasses.AxisBase;
            import mx.charts.chartClasses.ChartBase;
            import mx.charts.chartClasses.Series;
            import mx.collections.ArrayCollection;

            [Bindable]
            public var testData:ArrayCollection = new ArrayCollection();

            public function init():void{
                generateRandomData();
            }

            public function generateRandomData():void{
                var randomNumberOfObject:int = Math.floor((Math.random() * 100));
                var i:int = 0;
                var resultData:ArrayCollection = new ArrayCollection();

                if(randomNumberOfObject <= 1){
                    randomNumberOfObject = 2;
                }

                while(i < randomNumberOfObject){
                    var dataObject:Object = new Object();
                    dataObject.date = i;
                    dataObject.value = Math.floor((Math.random() * 10));
                    dataObject.value2 = Math.floor((Math.random() * 10));
                    dataObject.value3 = Math.floor((Math.random() * 10));

                    resultData.addItem(dataObject);
                    i++;
                }

                testData = resultData;
            }

            public function adjustVerticalLabels(e:Event = null):void{
                var chartSeries:Array = (e.currentTarget as ChartBase).series;
                var vAxis:* = null;
                var size:int = chartSeries.length;
                var max:Number = 0;
                var min:Number = NaN;

                for each(var series:* in chartSeries){
                    if(vAxis == null){
                        vAxis = (series as Series).getAxis(ChartBase.VERTICAL);
                    }
                    if(series.enabled == true){
                        var dataField:String = series.yField;
                        for each(var item:* in series.dataProvider){
                            if(item[dataField] > max){
                                max = item[dataField];
                            }
                            if(isNaN(min)){
                                min = item[dataField];
                            }else{
                                if(item[dataField] < min){
                                    min = item[dataField];
                                }
                            }
                        }
                    }
                }

                vAxis.minimum = min;
                if(max > 2){
                    vAxis.maximum = max;
                }else{
                    //Used when the chart values are very small
                    vAxis.maximum = 2;
                }
            }
        ]]>
    </mx:Script>

    <mx:BarChart id="lineChart"
        width="100%" height="100%"
        showDataTips="true"
        dataTipMode="single"
        seriesFilters="{[]}"
        dataProvider="{testData}"
        render="adjustVerticalLabels(event)"
        >
        <mx:horizontalAxis>
            <mx:CategoryAxis  id="testXAxis" 
                dataProvider="{testData}" 
                categoryField="date"
                />
        </mx:horizontalAxis>

        <mx:verticalAxis>
            <mx:LinearAxis id="textYAxis"
                baseAtZero="false"
                />
        </mx:verticalAxis>

        <mx:series>
            <mx:ColumnSeries 
                yField="value" 
                displayName="Value"
                />
            <mx:ColumnSeries 
                yField="value2" 
                displayName="Value2"
                />
            <mx:ColumnSeries 
                yField="value2" 
                displayName="Value3"
                />
        </mx:series>
    </mx:BarChart>

</mx:Canvas>