堆积柱状图中的动态系列有时不显示

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>