Фильтрация данных, отображаемых на линейной диаграмме в flex - PullRequest
Новая
       17

Фильтрация данных, отображаемых на линейной диаграмме в flex

1 голос
/ 09 июля 2009

Я работаю над линейным графиком Flex, который позволяет мне просматривать ход данных в зависимости от года. Я пытался использовать ползунок для фильтрации, но он не работает. любая помощь, пожалуйста? я не точно фильтрую провайдер данных, но альфа. Моя функция будет извлекать всю информацию из моей коллекции массивов, но установите альфа на 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>

извините за беспорядок. :(

Ответы [ 2 ]

1 голос
/ 02 октября 2009

Я создал библиотеку Flex (DataFilterLib), которая отвечает за весь процесс фильтрации, полностью в MXML. Эта библиотека бесплатна, вы можете найти детали проекта там: http://code.google.com/p/flex-datafilterlib/ Если вы хотите взглянуть на примеры, все они находятся на странице проекта (источник доступен): Посмотрите примеры в Интернете, если вы хотите увидеть, как фильтровать по нескольким критериям, используя различные компоненты Flex UI (CheckBox, Slider, List, ...). Используя эти фильтры с ползунком (2 пальца), вы можете легко фильтровать ваши данные, и они будут автоматически отражаться на вашей диаграмме.

Спасибо, Фабьен

1 голос
/ 18 июля 2009

Кажется, вы используете даты в качестве оси 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;
}

Кроме того, вы уверены, что хотите установить альфа на 0 вместо простой фильтрации точек данных? Если вы хотите уменьшить ArrayCollection (не беспокойтесь, это уменьшает ArrayCollection, а не источник, Array), вы можете просто сделать: 

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

Наконец, вам также следует установить собственную функцию dataTipFunction для ползунка, чтобы вместо цифр они видели фактическую дату.

...