Use a semitransparent Canvas container to highlight the data point
<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".
This user guide is licensed for use under the terms of the Creative Commons Attribution
Non-Commercial 3.0 License.
This License allows users to copy, distribute, and transmit the user guide for noncommercial
purposes only so long as
(1) proper attribution to Adobe is given as the owner of the user guide; and
(2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms.
The best way to provide notice is to include the following link.
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/
-->
<!-- charts/ChartItemObjectAccess.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init()">
<mx:Style>
@namespace mx "http://www.adobe.com/2006/mxml";
mx|ToolTip {
fontSize:24;
}
mx|ColumnChart {
gutterLeft: 54;
}
</mx:Style>
<mx:Script>
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();
}
</mx:Script>
<mx:Panel id="p1">
<mx:ColumnChart id="myChart" dataProvider="{dataSet}"
itemClick="overData(event)" mouseSensitivity="0">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month" />
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries displayName="Expense" yField="expense" />
<mx:ColumnSeries displayName="Income" yField="income" />
</mx:series>
</mx:ColumnChart>
</mx:Panel>
<!-- Define the canvas control that will be used as a highlight -->
<mx:Canvas id="highlightBox" y="0" x="0" backgroundColor="0xFFFF00"
alpha=".5" />
</mx:Application>
Related examples in the same category
