过滤折线图上显示的数据

发布于 2024-07-26 15:26:32 字数 2782 浏览 4 评论 0原文

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

I am working on a line chart on flex which enable me to view the progress of data according to the year. I have tried using a slider to filter but it doesn't seemed to work.

I am not exactly filtering the dataprovider, but the alpha. My function will retrieve all the information from my array collection, but set the alpha to 0, so when user drags the slider, if the year falls below that particular year, it will display the data, which i then set the alpha to 100.

The data is there, the axis are all set, alpha is set to 0. The problem is it doesn't display the information line by line as what I wanted it to be, instead, it display the whole graph only until I drag the slider to the end.


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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

绝對不後悔。 2024-08-02 15:26:32

为您的 sliderFilterFunc 尝试一下:

private function sliderFilterFunc(item:Object):Boolean{
    var result:Boolean = true;
    pro.alpha=100;
    if(item.Year<=slider.value || item.Year==slider.value)
    {
        return false;
    }
    return result;
}

Try this for your sliderFilterFunc:

private function sliderFilterFunc(item:Object):Boolean{
    var result:Boolean = true;
    pro.alpha=100;
    if(item.Year<=slider.value || item.Year==slider.value)
    {
        return false;
    }
    return result;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文