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

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

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


filter linechart apache-flex
person Community    schedule 09.07.2009    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

person Sunny Dhillon    schedule 18.07.2009

arrow_upward
1
arrow_downward

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

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

person Community    schedule 02.10.2009