Zoom sur le graphique linéaire

Question

J'ai un problème de zoom sur un graphique linéaire avec une dateTimeAxis comme axe horizontal. Je veux effectuer un zoom avant et arrière, en définissant les attributs minimum et maximum de la dateTimeAxis avec un curseur. Les étiquettes de date changent comme il se doit, mais les lignes disparaissent lorsque je règle le minimum ou le maximum.

est ici une partie du code que j'ai:

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

J'ai eu une application avec une exigence de zoom graphique similaire, et je trouve que le filtrage du hit-parade fournisseur de données en fonction des limites supérieure et inférieure est beaucoup mieux que de modifier le minimum et le maximum sur l'axe horizontal des diagrammes. Voici un exemple simple, de travail (Flex 3, Mise à jour 29/06/10: exemple modifié pour utiliser 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; 

ou

<mx:LineSeries filterData="false" />