2009-07-09 5 views
1

フレックスの折れ線グラフを使って、年に従ってデータの進捗状況を見ることができます。私はフィルタにスライダを使用しようとしましたが、うまく動作していないようです。助けてください? 私はdataproviderではなく、アルファを正確にフィルタリングしています。私の関数は配列コレクションからすべての情報を取得しますが、アルファを0に設定します。ユーザーがスライダをドラッグすると、その年がその特定の年よりも下になるとデータが表示され、アルファを100に設定します。フレックスの線図に表示されているデータをフィルタリングする

データがあり、軸がすべて設定されていて、アルファが0に設定されていますが、問題は、情報を1行ずつ表示するのではなく、私は最後までスライダをドラッグするまでの間だけ、グラフ...これらは散らかっため

<?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> 

申し訳ありません私のコードです

。:(

答えて

1

x軸として日付を使用しているようですが、スライダは数値間を「スライド」できます。あなたのフィルタ機能のためのその後

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

:また

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

、あなたの代わりに0にアルファを設定してよろしいです私はどうなるのか

は私の費用は、設定するArrayCollection作るですデータポイントをフィルタリングするだけですか?あなたは(これはArrayCollectionのではなく、ソース、アレイ縮む心配しないでください)あなたのArrayCollectionを縮小したい場合は、あなただけ行うことができます:

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

最後に、あなたはまた、スライダー用に独自にdataTipFunctionを設定する必要があります数字を見るのではなく、実際の日付が表示されます。

1

私はすべてのフィルタリングプロセスを処理するFlexライブラリ(DataFilterLib)を作成しました。 このライブラリーは無料で、そこにプロジェクトの詳細があります: http://code.google.com/p/flex-datafilterlib/ 例を見たい場合は、プロジェクトのページにあります(利用可能なソース): 見たい場合は、例をオンラインで確認してくださいさまざまなFlex UIコンポーネント(CheckBox、Slider、Listなど)を使用して、複数の条件をフィルタリングする方法 Slider(2-thumbs)でこれらのフィルタを使用すると、データを簡単にフィルタリングでき、チャートに自動的に反映されます。

ありがとう、 Fabien

関連する問題