Question

我在使用dateTimeAxis作为水平轴放大折线图时遇到问题。我想通过使用滑块设置dateTimeAxis的最小和最大属性来放大和缩小。日期标签应该更改，但是当我设置最小值或最大值时，线条会消失。

以下是我所拥有的代码的一部分：

private function updateBoundariesFromSlider():void
        {
            leftBoundary = slider.values[0];
            rightBoundary = slider.values[1];
            updateMainData();
        }

        private function updateMainData():void
        {

            dateAxis.minimum = new Date(leftBoundary);
            dateAxis.maximum = new Date(rightBoundary);

        }


public function setChartData( data:XML, shown:Array, minDate:Date, maxDate:Date ):void
        {
            globalLeftBoundary = minDate.getTime();
            globalRightBoundary = maxDate.getTime();
            leftBoundary = minDate.getTime();
            rightBoundary = maxDate.getTime();

            for each( var s:String in shown )
            {
                var localXML:XMLList = data.track.(type == s);

                // Create the new series and set its properties.
                var localSeries:LineSeries = new LineSeries();
                localSeries.dataProvider = localXML;
                localSeries.yField = "value";
                localSeries.xField = "time";

                localSeries.displayName = s;

                mySeries.push(localSeries);


            }


            hAxis = new DateTimeAxis();

            hAxis.dataUnits = "minutes";
            hAxis.dataInterval = 1;
            hAxis.labelFunction = showLabel;
            hAxis.alignLabelsToUnits = true;
            hAxis.parseFunction = createDate;
            //hAxis.minimum = new Date( leftBoundary );
            //hAxis.maximum = new Date( rightBoundary );
            Alert.show( (new Date( leftBoundary )).toString());

            dateAxis = hAxis;
        }

        private function createDate(s:String):Date {

            var dateTime:Array = s.split(" ");

            var date:Array = dateTime[0].split("-");
            var time:Array = dateTime[1].split(":");

            var newDate:Date = new Date(date[0],date[1],date[2],time[0],time[1],time[2]);
            return newDate;
        }


<mx:LineChart id="lineChart" left="10" top="10" bottom="47" right="10" series="{mySeries}" horizontalAxis="{dateAxis}" />

<mx:Legend dataProvider="{lineChart}" height="23" bottom="16" left="10" id="legend" width="100"/>
<flexlib:HSlider id="slider" height="25"
                allowTrackClick="true" allowThumbOverlap="false" 
                liveDragging="true" change="updateBoundariesFromSlider()"
                showDataTip="false"
                showTrackHighlight="true"
                thumbCount="2" snapInterval="0"
                values="{[leftBoundary, rightBoundary]}"
                minimum="{globalLeftBoundary}" maximum="{globalRightBoundary}"
                right="50" left="198" y="155"
                />

Answer 1

我有一个类似图表缩放要求的应用程序，我发现基于上限和下限过滤图表数据提供程序看起来比修改图表水平轴上的最小值和最大值要好得多。这是一个简单的工作示例（Flex 3， UPDATE 6-29-10：使用XMLListCollection的修改示例）：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="vertical" initialize="{init()}"
>

    <mx:Script>
        <![CDATA[
            import mx.collections.XMLListCollection;
            import mx.collections.ArrayCollection;
            public static const MIN_DATE:Number = 1900;
            public static const MAX_DATE:Number = 2010;

            public var mainData:XML = function():XML{
                var ret:XML = <data></data>;
                for(var i:Number = MIN_DATE;
                    i <= MAX_DATE; i++)
                {
                    ret.appendChild(
                        XMLList(
                            '<datum><date>' 
                                + i + 
                                '</date><value>' 
                                + Math.random() + 
                            '</value></datum>'
                        )
                    );
                }
                return ret;
            }();

            [Bindable]
            public var selectedData:XMLListCollection = 
                    new XMLListCollection(mainData.child('datum'));

            public function init():void
            {
                selectedData.filterFunction = filterData;
                selectedData.refresh();
            }

            private function filterData(o:Object):Boolean
            {
                return o.date >= minStepper.value && o.date <= maxStepper.value;
            }
        ]]>
    </mx:Script>


    <mx:LineChart 
        id="lineChart" 
        dataProvider="{selectedData}"
    >
        <mx:horizontalAxis>
            <mx:DateTimeAxis 
                id="hAxis" 
                parseFunction="{
                    function(obj:Object):Date
                    {
                        return new Date(obj.toString(), 1);
                    }
                }"
            />
        </mx:horizontalAxis>
        <mx:verticalAxis>
            <mx:LinearAxis 
                id="vAxis" 
            />
        </mx:verticalAxis>
        <mx:series>
            <mx:LineSeries 
                xField="date" 
                yField="value" 
            />
        </mx:series>
    </mx:LineChart>
    <mx:HBox>
        <mx:NumericStepper 
            id="minStepper" 
            minimum="{MIN_DATE}" 
            maximum="{Math.min(maxStepper.value - 1, MAX_DATE)}" 
            change="{selectedData.refresh();}"
            value="{MIN_DATE}"
        />
        <mx:NumericStepper id="maxStepper" 
            maximum="{MAX_DATE}" 
            minimum="{Math.max(minStepper.value + 1, MIN_DATE)}" 
            change="{selectedData.refresh();}"
            value="{MAX_DATE}"
        />
    </mx:HBox>

Answer 2

localSeries.filterData = false;

或

<mx:LineSeries filterData="false" />

柔性折线图缩放

2 个答案: