年ごとのデータの進捗状況を表示できるフレックスの折れ線グラフに取り組んでいます。スライダーを使用してフィルタリングしようとしましたが、うまくいかないようです。
データプロバイダーを正確にフィルタリングしているのではなく、アルファをフィルタリングしています。私の関数は配列コレクションからすべての情報を取得しますが、アルファを 0 に設定します。そのため、ユーザーがスライダーをドラッグすると、年がその特定の年を下回った場合にデータが表示され、アルファを 100 に設定します。
データはそこにあり、軸はすべて設定され、アルファは 0 に設定されています。スライダーを最後まで。
<?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>