柔性折線圖縮放

Question

我在使用dateTimeAxis作爲橫軸放大折線圖時出現問題。我想放大和縮小，通過使用滑塊設置dateTimeAxis的最小和最大屬性。日期標籤會根據情況發生變化，但當我設置最小值或最大值時，線條消失。

下面的代碼的一部分，我有：

private function updateBoundariesFromSlider():void 
     { 
      leftBoundary = slider.values[0]; 
      rightBoundary = slider.values[1]; 
      updateMainData(); 
     } 

     private function updateMainData():void 
     { 

      dateAxis.minimum = new Date(leftBoundary); 
      dateAxis.maximum = new Date(rightBoundary); 

     } 


public function setChartData(data:XML, shown:Array, minDate:Date, maxDate:Date):void 
     { 
      globalLeftBoundary = minDate.getTime(); 
      globalRightBoundary = maxDate.getTime(); 
      leftBoundary = minDate.getTime(); 
      rightBoundary = maxDate.getTime(); 

      for each(var s:String in shown) 
      { 
       var localXML:XMLList = data.track.(type == s); 

       // Create the new series and set its properties. 
       var localSeries:LineSeries = new LineSeries(); 
       localSeries.dataProvider = localXML; 
       localSeries.yField = "value"; 
       localSeries.xField = "time"; 

       localSeries.displayName = s; 

       mySeries.push(localSeries); 


      } 


      hAxis = new DateTimeAxis(); 

      hAxis.dataUnits = "minutes"; 
      hAxis.dataInterval = 1; 
      hAxis.labelFunction = showLabel; 
      hAxis.alignLabelsToUnits = true; 
      hAxis.parseFunction = createDate; 
      //hAxis.minimum = new Date(leftBoundary); 
      //hAxis.maximum = new Date(rightBoundary); 
      Alert.show((new Date(leftBoundary)).toString()); 

      dateAxis = hAxis; 
     } 

     private function createDate(s:String):Date { 

      var dateTime:Array = s.split(" "); 

      var date:Array = dateTime[0].split("-"); 
      var time:Array = dateTime[1].split(":"); 

      var newDate:Date = new Date(date[0],date[1],date[2],time[0],time[1],time[2]); 
      return newDate; 
     } 


<mx:LineChart id="lineChart" left="10" top="10" bottom="47" right="10" series="{mySeries}" horizontalAxis="{dateAxis}" /> 

<mx:Legend dataProvider="{lineChart}" height="23" bottom="16" left="10" id="legend" width="100"/> 
<flexlib:HSlider id="slider" height="25" 
       allowTrackClick="true" allowThumbOverlap="false" 
       liveDragging="true" change="updateBoundariesFromSlider()" 
       showDataTip="false" 
       showTrackHighlight="true" 
       thumbCount="2" snapInterval="0" 
       values="{[leftBoundary, rightBoundary]}" 
       minimum="{globalLeftBoundary}" maximum="{globalRightBoundary}" 
       right="50" left="198" y="155" 
       /> 

Answer 1

我有一個類似的圖表縮放需求的應用程序，我發現過濾依據的上限和下限的圖表數據提供程序看起來好多了而不是修改圖表水平軸上的最小值和最大值。下面是一個簡單，工作實施例（Flex 3中，UPDATE 10年6月29日：變形例使用的XMLListCollection）：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" initialize="{init()}" 
> 

    <mx:Script> 
     <![CDATA[ 
      import mx.collections.XMLListCollection; 
      import mx.collections.ArrayCollection; 
      public static const MIN_DATE:Number = 1900; 
      public static const MAX_DATE:Number = 2010; 

      public var mainData:XML = function():XML{ 
       var ret:XML = <data></data>; 
       for(var i:Number = MIN_DATE; 
        i <= MAX_DATE; i++) 
       { 
        ret.appendChild(
         XMLList(
          '<datum><date>' 
           + i + 
           '</date><value>' 
           + Math.random() + 
          '</value></datum>' 
         ) 
        ); 
       } 
       return ret; 
      }(); 

      [Bindable] 
      public var selectedData:XMLListCollection = 
        new XMLListCollection(mainData.child('datum')); 

      public function init():void 
      { 
       selectedData.filterFunction = filterData; 
       selectedData.refresh(); 
      } 

      private function filterData(o:Object):Boolean 
      { 
       return o.date >= minStepper.value && o.date <= maxStepper.value; 
      } 
     ]]> 
    </mx:Script> 


    <mx:LineChart 
     id="lineChart" 
     dataProvider="{selectedData}" 
    > 
     <mx:horizontalAxis> 
      <mx:DateTimeAxis 
       id="hAxis" 
       parseFunction="{ 
        function(obj:Object):Date 
        { 
         return new Date(obj.toString(), 1); 
        } 
       }" 
      /> 
     </mx:horizontalAxis> 
     <mx:verticalAxis> 
      <mx:LinearAxis 
       id="vAxis" 
      /> 
     </mx:verticalAxis> 
     <mx:series> 
      <mx:LineSeries 
       xField="date" 
       yField="value" 
      /> 
     </mx:series> 
    </mx:LineChart> 
    <mx:HBox> 
     <mx:NumericStepper 
      id="minStepper" 
      minimum="{MIN_DATE}" 
      maximum="{Math.min(maxStepper.value - 1, MAX_DATE)}" 
      change="{selectedData.refresh();}" 
      value="{MIN_DATE}" 
     /> 
     <mx:NumericStepper id="maxStepper" 
      maximum="{MAX_DATE}" 
      minimum="{Math.max(minStepper.value + 1, MIN_DATE)}" 
      change="{selectedData.refresh();}" 
      value="{MAX_DATE}" 
     /> 
    </mx:HBox> 

Answer 2

localSeries.filterData = false; 

或

<mx:LineSeries filterData="false" />