Question

我正在使用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>

抱歉这个混乱。:(

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组件（CheckBox，Slider，List，...）过滤多个标准，请在线查看示例。将这些过滤器与Slider（2-thumbs）一起使用，您可以轻松过滤数据，它将自动反映在您的图表上。

谢谢，法比安

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

2 个答案: