折线图缩放

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，更新 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" />