apache-flex - 堆积柱形图中的动态系列有时不显示

Question

我有一个堆积柱形图，其中可能会出现不同的数据。如果垂直轴中的 autoAdjust 设置为 true，则会出现问题，然后某些系列未显示（因为轴值未达到系列值的范围）。如果我们将 autoaxis 设置为 false 并手动设置最大值和最小值，那么所有系列都可以正确显示，但只有在我们已经知道数据的情况下才能进行手动轴设置。我的数据是动态的，不知道最大轴值。这个问题有什么解决方法吗？提前致谢。

Answer 1

您可以添加一个函数，使用“render”事件循环遍历图表内的所有系列数据。此事件在渲染任何内容之前调度，可用于计算图表可以渲染的最大值。

如果您想利用以下示例中的“min”计算，请将垂直轴“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>