为什么笛卡尔图表上的百分比宽度和百分比高度会破坏showDataEffect样式?

时间:2013-11-22 01:45:55

标签: actionscript-3 flex flex3

一整天都在踢我自己并将其缩小(除去除了必需品之外的所有内容之后):当我的CartesianChart组件指定了percentWidth和percentHeight时,我应用于我的系列的数据效果无法完成。我想要的效果是,在调整容器大小时,我的系列上的数据效果会继续。任何帮助将不胜感激。

<?xml version="1.0"?>
<!-- charts/ApplyEffectsAsStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                creationComplete="init()">
    <mx:Script>
    <![CDATA[
        import mx.charts.chartClasses.CartesianChart;
        import mx.charts.chartClasses.Series;
        import mx.charts.effects.SeriesInterpolate;
        import mx.charts.series.ColumnSeries;
        import mx.charts.series.LineSeries;
        import mx.collections.ArrayCollection;
        import mx.effects.Move;
        import mx.effects.Parallel;
        import mx.effects.Resize;
        import mx.effects.easing.Exponential;

        [Bindable]
        public var lineItems:ArrayCollection = new ArrayCollection([
            {item: 2400},
            {item: 2256},
            {item: 3200},
            {item: 2453},
            {item: 3350}
        ]);

        [Bindable]
        public var columnItems:ArrayCollection = new ArrayCollection([
            {item: 2111},
            {item: 3300},
            {item: 3000},
            {item: 2100},
            {item: 3200}
        ]);

        private var parallel:Parallel;
        private var myChart:CartesianChart;

        public function init():void {
            instantiateChart();
            addSeriesToChart();
            addDataEffectsToChartSeries();
            addChartToParent();
            resize(750, 750);
            callLater(setDataProviders);
        }


        public function instantiateChart():void
        {
            myChart = new CartesianChart();
            // PROBLEM LINES: this kills the data effect
            //myChart.percentHeight = 100;
            //myChart.percentWidth = 100;
        }

        public function addChartToParent():void
        {
            if(myChart != null)
            {
                myContainer.removeAllChildren();
                myContainer.addChild(myChart);
            }
        }

        public function addDataEffectsToChartSeries():void
        {
            for each(var series:Series in myChart.series)
            {
                trace("added a data effect");
                series.setStyle("showDataEffect", interpolateIn);
            }
        }

        public function addSeriesToChart():void
        {
            var lineSeries:LineSeries = new LineSeries();
            lineSeries.yField = "item";

            var columnSeries:ColumnSeries = new ColumnSeries();
            columnSeries.yField = "item";

            myChart.series = [columnSeries, lineSeries];
        }

        private function setDataProviders():void
        {
            myChart.series[0].dataProvider = columnItems;
            myChart.series[1].dataProvider = lineItems;
        }

        public function resize(w:Number, h:Number):void
        {
            trace("resizing");
            if(parallel != null && parallel.isPlaying)
                parallel.pause();

            parallel = new Parallel();
            addResizeAndMoveToParallel(parallel, w, h, 100, 10);
            parallel.play();
        }

        private function addResizeAndMoveToParallel(parallel:Parallel, widthTo:Number, heightTo:Number, xTo:Number, yTo:Number):void
        {
            myContainer.x = 0;
            myContainer.y = 0;

            var move:Move = new Move(myContainer);
            move.xTo = xTo;
            move.yTo = yTo;
            move.startDelay = 500;
            move.easingFunction = Exponential.easeOut;
            move.duration = 2000;

            var resize:Resize = new Resize(myContainer);            

            resize.widthTo = widthTo;
            resize.heightTo = heightTo;
            resize.startDelay = 500;
            resize.easingFunction = Exponential.easeOut;
            resize.duration = 2000;

            parallel.addChild(move);
            parallel.addChild(resize);
        }       
    ]]>
    </mx:Script>

    <mx:SeriesInterpolate id="interpolateIn" duration="0" minimumElementDuration="2000" elementOffset="100" />
    <mx:Canvas width="100%" height="100%">
        <mx:Panel id="myContainer" title="Column Chart with Series Interpolate Effect" />
    </mx:Canvas>
</mx:Application>

0 个答案:

没有答案