堆積柱狀圖中的動態系列有時不顯示

Question

我有一個堆疊柱狀圖，其中可能會出現不同的數據。如果垂直軸的autoAdjust設置爲true，則會出現問題，則會顯示一些系列（因爲軸值未達到系列值的範圍）。如果我們將自動軸設置爲假並手動設置最大值和最小值，那麼所有系列都能正常顯示，但只有當我們已經瞭解數據時纔可以手動設置軸。我的數據是動態的，不知道最大軸值。有沒有解決這個問題的方法？ 在此先感謝。

Answer 1

您可以使用「渲染」事件添加循環遍歷圖表內所有系列數據的函數。在呈現任何內容之前分派此事件，並可用於計算圖表可以呈現的最大值。

如果您想利用以下示例中的「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>