16.6.创建列状图的明细项目效果
16.6.1.问题
我想在查看图表细目表的时候添加一个效果。
16.6.2. 解决办法
为所选的图表项目创建一个新的数组，然后把列状图的数据提供器绑定到这个数组上。使用SeriesZoom 在总体数据集和详细数据集中转换。
16.6.3.讨论
查看图表的细目表是一个用户界面的概念，它允许用户在一个较大的数据选择其中一个特定的数据项目来查看。
图表的明细项目效果使你能够选择图表的某一项目然后查看这个项目更详细的数据信息。
这个效果可以通过设置图表的数据提供器来实现。
当数据提供器更换的时候，使用showDataEffect 和hideDataEffect 属性就可实现这样的效果。
在mx.charts.effects 包内定义了三个效果，分别是SeriesInterpolate、SeriesSlide 和SeriesZoom。
以下例子是使用SeriesZoom 效果。
SeriesZoom 类通过horizontalFocus 和verticalFocus 属性调用焦点集合来实现图表数据的缩放。
我想在查看图表细目表的时候添加一个效果。
16.6.2. 解决办法
为所选的图表项目创建一个新的数组，然后把列状图的数据提供器绑定到这个数组上。使用SeriesZoom 在总体数据集和详细数据集中转换。
16.6.3.讨论
查看图表的细目表是一个用户界面的概念，它允许用户在一个较大的数据选择其中一个特定的数据项目来查看。
图表的明细项目效果使你能够选择图表的某一项目然后查看这个项目更详细的数据信息。
这个效果可以通过设置图表的数据提供器来实现。
当数据提供器更换的时候，使用showDataEffect 和hideDataEffect 属性就可实现这样的效果。
在mx.charts.effects 包内定义了三个效果，分别是SeriesInterpolate、SeriesSlide 和SeriesZoom。
以下例子是使用SeriesZoom 效果。
SeriesZoom 类通过horizontalFocus 和verticalFocus 属性调用焦点集合来实现图表数据的缩放。
+展开
-XML
<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>
<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>
加支付宝好友偷能量挖...
