creationComplete="init()">
@namespace mx "http://www.adobe.com/2006/mxml";
mx|ToolTip {
fontSize:24;
}
mx|ColumnChart {
gutterLeft: 54;
}
import mx.core.IFlexDisplayObject;
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.ColumnSeriesItem;
import mx.charts.series.ColumnSeries;
import mx.effects.Move;
import mx.charts.HitData;
import mx.collections.ArrayCollection;
public var m:mx.effects.Move;
public var hitData:mx.charts.HitData;
public var chartItem:ColumnSeriesItem;
public var renderer:IFlexDisplayObject;
public var series:ColumnSeries;
public var chartItemPoint:Point;
public var highlightBoxPoint:Point;
public var leftAdjust:Number;
private function init():void {
m = new Move(highlightBox);
leftAdjust = myChart.getStyle("gutterLeft") - 14;
}
[Bindable]
private var dataSet:ArrayCollection = new ArrayCollection([
{month:"Jan", income:12300, expense:3210},
{month:"Feb", income:12450, expense:3100},
{month:"Mar", income:13340, expense:3550},
{month:"Apr", income:13489, expense:3560},
{month:"May", income:11020, expense:4600},
{month:"Jun", income:14030, expense:3410},
{month:"Jul", income:15600, expense:4485},
{month:"Aug", income:17230, expense:3892},
{month:"Sep", income:15212, expense:3562},
{month:"Oct", income:14980, expense:5603},
{month:"Nov", income:15020, expense:4102},
{month:"Dec", income:15923, expense:4789}]);
private function overData(event:mx.charts.events.ChartItemEvent):void
{
hitData = event.hitData;
chartItem = ColumnSeriesItem(hitData.chartItem);
renderer = chartItem.itemRenderer;
series = ColumnSeries(hitData.element);
// Add 10 pixels to give it horizontal overlap.highlightBox.width = renderer.width * 2 + 10;
// Add 20 pixels to give it vertical overlap.highlightBox.height = renderer.height + 20;
highlightBoxPoint = new Point(highlightBox.x,highlightBox.y);
// Convert the ChartItem's pixel values from local
// (relative to the component) to global (relative
// to the stage). This enables you to place the Canvas
// container using the x and y values of the stage.
chartItemPoint = myChart.localToGlobal(new
Point(chartItem.x, chartItem.y));
// Define the parameters of the move effect and
// play the effect.
m.xTo = chartItemPoint.x + leftAdjust;
m.yTo = chartItemPoint.y;
m.duration = 500;
m.play();
highlightBox.toolTip = "$" + chartItem.yValue.toString();
}
itemClick="overData(event)" mouseSensitivity="0">
alpha=".5" />