过滤 Flex 中折线图上显示的数据

Question

我正在 Flex 上制作折线图，它使我能够根据年份查看数据的进度。 我尝试过使用滑块进行过滤，但似乎不起作用。 有什么帮助吗？ 我并不是完全过滤数据提供者，而是过滤阿尔法。 我的函数将从数组集合中检索所有信息，但将 alpha 设置为 0，因此当用户拖动滑块时，如果年份低于该特定年份，它将显示数据，然后我将 alpha 设置为 100。

数据在那里，轴都设置好了，alpha设置为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>

抱歉造成混乱。:(

Answer 1

您似乎使用日期作为 x 轴，滑块可以在数值之间“滑动”。

我要做的是将我的费用 ArrayCollection 设置为：

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;
}

另外，您确定要将 alpha 设置为 0 而不是仅仅过滤掉数据点吗？ 如果您想缩小 ArrayCollection（不用担心，这会缩小 ArrayCollection，而不是源，即数组），您可以这样做：

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

最后，您还应该为滑块设置自己的 dataTipFunction，这样就不会看到他们看到的数字实际日期。

Answer 2

我创建了一个 Flex 库 (DataFilterLib)，它完全用 MXML 处理所有过滤过程。
该库是免费的，您可以在那里找到项目详细信息：
http://code.google.com/p/flex-datafilterlib/
如果您想查看示例，它们都位于项目页面中（源可用）：
如果您想了解如何使用不同的 Flex UI 组件（复选框、滑块、列表等）根据多个条件进行过滤，请查看在线示例。
使用这些过滤器和滑块（2 个拇指），您可以轻松过滤数据，并将自动反映在图表上。

谢谢，
法比安