<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.charts.series.items.ColumnSeriesItem;
import mx.graphics.SolidColor;
import mx.charts.ChartItem;
import mx.graphics.IFill;
import mx.collections.ArrayCollection;
import mx.charts.HitData;
import mx.charts.events.ChartItemEvent;
//這個內層數據集合不僅可以使所有項目一起顯示，也可以使每個項目獨立顯示。
[Bindable]
public var overview:ArrayCollection = new ArrayCollection
([
{ date:"01/02/2006", total:3000, food:1300, drinks:1700,other:0, expenses:2700,profit:300},
{ date:"01/08/2006", total:3500, food:1800, drinks:1500,other:200, expenses:2900,profit:600},
{ date:"01/15/2006", total:2600, food:1000, drinks:1600,other:0, expenses:2700, profit:-100},
{ date:"01/22/2006", total:3200, food:1300, drinks:1900,other:0, expenses:2900,profit:200 },
{ date:"02/1/2006", total:2200, food:1200, drinks:1000,other:0, expenses:2100,profit:100 },
{ date:"02/8/2006", total:2600, food:1300, drinks:1600,other:100, expenses:2700,profit:400 },
{ date:"02/16/2006", total:4100, food:2300, drinks:1700,other:100, expenses:2700,profit:200 },
{ date:"02/22/2006", total:4300, food:2300, drinks:1700,other:300, expenses:3300,profit:1000 }]);
[Bindable]
public var drillDownDataSet:ArrayCollection;
[Bindable]
public var mainDataProvider:ArrayCollection = overview;
private function zoomIntoSeries(e:ChartItemEvent):void {
if (mainDataProvider == overview) {
drillDownDataSet =
new ArrayCollection(createDataForDate(e));
columnSeries.displayName = "Daily Breakdown";
columnSeries.yField = "amount";
columnSeries.xField = "type";
ca1.categoryField = "type";
mainPanel.title = "Profits for " +e.hitData.item.date;
mainDataProvider = drillDownDataSet;
} else {
mainDataProvider = overview;
columnSeries.displayName = "Profit by date";
columnSeries.yField = "profit";
columnSeries.xField = "date";
ca1.categoryField = "date";
mainPanel.title = "Profit Overview";
}
}
private function profitFunction(element:ChartItem,index:Number):IFill {
// black for profit
var dateColor:SolidColor = new SolidColor(0x000000);
var item:ColumnSeriesItem = ColumnSeriesItem(element);
var profit:Number = Number(item.yValue);
if (profit < 0) {
// red for not profitable
dateColor.color = 0xFF0000;
}
return dateColor;
}
//若列狀圖上某個特定的數列被點擊，可使用ChartItemEvent 的hitData 屬性來獲取這個被點擊的數據。以下是明
private function createDataForDate(e:ChartItemEvent):Array {
var result:Array = [];
var food:Object = { type:"food",
amount:e.hitData.item.food };
var drinks:Object = { type:"drinks",
amount:e.hitData.item.drinks };
var other:Object = { type:"other",
amount:e.hitData.item.other };
var expenses:Object = { type:"expenses",amount:e.hitData.item.expenses };
result.push(food);
result.push(drinks);
result.push(other);
result.push(expenses);
return result;
}

]]>
</mx:Script>
<mx:SeriesZoom id="slideZoomIn" duration="1000"
verticalFocus="bottom"/>
<mx:SeriesZoom id="slideZoomOut" duration="1000"
verticalFocus="bottom"/>
<mx:Panel id="mainPanel" title="Profitability">
<mx:ColumnChart id="chart" showDataTips="true"
itemClick="zoomIntoSeries(event)"
dataProvider="{mainDataProvider}">
<mx:series>
<!--showDataEffect 和hideDataEffect 屬性指出當圖表的數據提供器變化時哪種效果將被顯示。-->
<mx:ColumnSeries id="columnSeries" displayName="Total profit"
fillFunction="profitFunction" yField="profit" xField="date"
hideDataEffect="slideZoomOut" showDataEffect="slideZoomIn"/>
</mx:series>
<mx:horizontalAxis>
<mx:CategoryAxis id="ca1" categoryField="date"/>
</mx:horizontalAxis>
</mx:ColumnChart>
</mx:Panel>
</mx:Application>