一整天都在踢我自己并将其缩小(除去除了必需品之外的所有内容之后):当我的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>