Problem
Data tip class for charts does not support effects well. If try to define custom data tip effect and just set its showEffect or hideEffect style properties, effects work badly.
Solution
Below solution provides a tip what needs to be done to make effects playing for data tip much more reliable. The core points are: handle effects playing canceling, define show effect for creation complete as well, and handle the case when data tip instance is re-used without visibility change.
Detailed explanation
Below is a custom class for data tips. It is just override of the base data tip class with adding effects support. See comments in the code to get the idea how it is working.
package
{
import flash.events.Event;
import mx.charts.HitData;
import mx.charts.chartClasses.DataTip;
import mx.effects.IEffect;
public class EffectsDataTip extends DataTip {
public static var showEffect:IEffect;
public static var hideEffect:IEffect;
public function EffectsDataTip() {
super();
// Specify basic effects for playing
this.setStyle("hideEffect", hideEffect);
// We set show effect for creationComplete as well because showEffect is not working initially
this.setStyle("showEffect", showEffect);
this.setStyle("creationCompleteEffect", showEffect);
// Flex charting just moves and re-uses an instance of data
// tip if nmove mouse from one chart item to another. We need to play
// effect. We do this, however, when data actually changed
this.addEventListener(MoveEvent.MOVE, checkMovePlayEffect);
}
// handle visibility to to cancel previous effect playing if need to re-display
public override function set visible(value:Boolean):void {
if (value) {
hideEffect.end();
} else {
showEffect.end();
}
super.visible = value;
}
private var _previous:HitData;
private var _dataChanged:Boolean = false;
override public function set data(value:Object):void {
var d:HitData = value as HitData;
if ((d) &&
(_previous==null ||
(_previous.displayText != d.displayText && _previous.contextColor != d.contextColor)
)
) {
// after data changed, cancel previous effects playing and set the flag about that
showEffect.end();
hideEffect.end();
_previous = d;
_dataChanged = true;
}
super.data = value;
}
private function checkMovePlayEffect(event:Event) : void {
if (showEffect && _dataChanged) {
showEffect.play([this]);
_dataChanged = false;
}
}
}
}
Below is what you need to do when application initializes (MXML application example) - define effects for custom data tip. Here we use Fade effects, though you can use any other effects as well. Also, you need to specify new class as custom data tip renderer for chart. Put your chart in below example to try this class.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.managers.ToolTipManager;
private function initApp() : void {
EffectsDataTip.hideEffect = fadeOut;
EffectsDataTip.showEffect = fadeIn;
}
]]>
</mx:Script>
<mx:Fade id="fadeIn" alphaFrom="0.3" alphaTo="1.0" duration="300" />
<mx:Fade id="fadeOut" alphaFrom="1.0" alphaTo="0.3" duration="300" />
<mx:LineChart dataTipRenderer="EffectsDataTip" showDataTips="true" ... />
</mx:Application>
