1

我正在制作一个关于 flex 的折线图，它使我能够根据年份查看数据的进度。我曾尝试使用滑块进行过滤，但似乎不起作用。请问有什么帮助吗？我不完全过滤数据提供者，而是过滤 alpha。我的函数将从我的数组集合中检索所有信息，但将 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>

对不起，混乱。:(

4

2 回答 2

1

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

谢谢，法比恩

于 2009-10-02T18:47:56.693 回答
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，而不是源，Array），你可以这样做：

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

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

于 2009-07-18T01:41:35.543 回答