Filtern der im Liniendiagramm angezeigten Daten im Flex

Question

Ich arbeite an einem Liniendiagramm für flex, mit dem ich den Fortschritt der Daten je nach Jahr anzeigen kann. Ich habe versucht, mit einem Schieberegler zu filtern, aber es schien nicht zu funktionieren. Irgendwelche Hilfe bitte? Ich filtere nicht gerade den Datenprovider, sondern das Alpha. Meine Funktion wird alle Informationen aus meiner Array-Sammlung abrufen, aber das Alpha auf 0 setzen. Wenn der Benutzer den Schieberegler zieht, werden die Daten angezeigt, wenn das Jahr unter dieses bestimmte Jahr fällt. Dann wird das Alpha auf 100 gesetzt.

Die Daten sind da, die Achsen sind alle gesetzt, Alpha ist auf 0 gesetzt. Aber das Problem ist, es zeigt die Informationen Zeile für Zeile nicht so wie ich es wollte, stattdessen zeigt es das Ganze an graph nur, bis ich den Regler nach Ende ziehen ...

diese meine Codes sind

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
<mx:Script> 
<![CDATA[ 
    import mx.collections.ArrayCollection; 
    import mx.rpc.events.ResultEvent; 

    [Bindable] 
    public var expenses:ArrayCollection = new ArrayCollection([ 
     {Year:"1990", Profit:2000 }, 
     {Year:"1991", Profit:1000 }, 
     {Year:"1992", Profit:1500 }, 
     {Year:"1993", Profit:2100 }, 
     {Year:"1994", Profit:2500 }, 
     {Year:"1995", Profit:1500 }, 
     {Year:"1996", Profit:1900 }, 
      ]); 


       private function init():void { 
        expenses.filterFunction = sliderFilterFunc; 
        expenses.refresh(); 
       } 

       private function sliderFilterFunc(item:Object):Boolean{ 
         var result:Boolean = true; 
         pro.alpha=0; 
         if(item.Year<=slider.value || item.Year==slider.value) 
         { 
         pro.alpha=100; 
         return result; 
         } 
       return result; 


       } 

    ]]></mx:Script> 
    <mx:VBox horizontalCenter="0" top="10" horizontalAlign="center" height="100%"> 
     <mx:HSlider id="slider" minimum="1990" maximum="1996" value="220" liveDragging="true" change="init()" width="570" snapInterval="1" dataTipPrecision="0" labels="['1990','1996']" tickInterval="1" themeColor="#000000" borderColor="#FFFFFF" fillAlphas="[1.0, 1.0, 1.0, 1.0]" fillColors="[#000000, #000000, #FFFFFF, #1400D1]" height="48" styleName="myDataTip"/> 
     <mx:Panel title="Line Chart with One Shadow"> 
     <mx:LineChart id="myChart" dataProvider="{expenses}" showDataTips="true" > 
       <mx:seriesFilters> 
       <mx:Array/> 
       </mx:seriesFilters> 
       <mx:horizontalAxis> 
       <mx:CategoryAxis 
         dataProvider="{expenses}" 
         categoryField="Year" 
       /> 
       </mx:horizontalAxis> 
       <mx:series> 
       <mx:LineSeries id="pro" alpha="0" 
         yField="Profit" 
         displayName="Profit" 
       /> 
       </mx:series> 
      </mx:LineChart> 

      <mx:Legend dataProvider="{myChart}" /> 
     </mx:Panel> 
    </mx:VBox> 

</mx:Application> 

sorry für die Unsauberkeit. :(

Answer 1

Sie scheinen Datumsangaben als X-Achse zu verwenden, der Schieberegler kann zwischen numerischen Werten "verschoben" werden.

Was ich tun würde, ist meine Kosten machen Arraycollection zu:

public var expenses:ArrayCollection = new ArrayCollection([ 
    {Year: new Date(1990), Profit:2000 }, 
    {Year: new Date(1991), Profit:1000 }, 
    ... 

Dann für Ihre Filterfunktion:

private function sliderFilterFunc(item:Object):Boolean { 
    pro.alpha = item.Year.getTime() <= slider.value ? 100 : 0; 
    return true; 
} 

Auch Sie sind sicher, dass Sie die Alpha auf 0 statt festlegen möchten von nur die Datenpunkte ausfiltern? Wenn Sie möchten, dass Ihre Arraycollection schrumpfen (keine Sorge dies die Arraycollection schrumpft, nicht die Quelle, die Array), könnten Sie einfach tun:

private function sliderFilterFunc(item:Object):Boolean { 
    return = item.Year.getTime() <= slider.value; 
} 

Schließlich sollten Sie auch Ihre eigene dataTipFunction für den Schieber eingestellt Anstatt Nummern zu sehen, sehen sie das tatsächliche Datum.

Answer 2

Ich habe eine Flex Library (DataFilterLib) erstellt, die sich um den gesamten Filterprozess kümmert, komplett in MXML. Diese Bibliothek ist kostenlos, Sie können die Projektdetails dort finden: Wenn Sie sich die Beispiele ansehen möchten, sind sie alle in der Projektseite (Quelle verfügbar): Überprüfen Sie die Beispiele online, wenn Sie sehen möchten wie man nach mehreren Kriterien filtern kann, mit verschiedenen Flex UI Komponenten (CheckBox, Slider, List, ...). Wenn Sie diese Filter mit einem Schieberegler (2-Daumen) verwenden, können Sie Ihre Daten einfach filtern und sie werden automatisch in Ihrem Diagramm angezeigt.

Danke, Fabien