原文地址:http://bishoponvsto.wordpress.com/2010/01/27/flex-stacked-column-chart-programatically-in-actionscript/
Flex: Stacked column chart – programmatically in actionscript
By bishopondevelopment
I was looking for ages for an example of a dynamically generated stacked column chart in Flex, but most of the examples were incorporating some MXML, or contained hard-coded series objects.
The example below is based on Adobe Livedocs, but I show how to generate the series arrays programatically in as3, with no use of mxml code, and apply these series to a column chart (added topanelActionscript as seen in the code below). Also, this could be easily adapted to a barchart.
If youve got any suggestions, let me know.
Flex Stacked Chart
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()" width="622" height="660">
<mx:Script>
<![CDATA[
import mx.charts.CategoryAxis;
import mx.charts.series.ColumnSeries;
import mx.charts.ColumnChart;
import mx.charts.series.ColumnSet;
import mx.charts.Legend;
import mx.charts.BarChart;
import mx.charts.series.BarSet;
import mx.charts.series.BarSeries;
import mx.collections.ArrayCollection;
[Bindable]
private var yearlyData:ArrayCollection = new ArrayCollection([
{month:"January", revenue:120, costs:45, overhead:102, oneTime:23},
{month:"February", revenue:108, costs:42, overhead:87, oneTime:47},
{month:"March", revenue:150, costs:82, overhead:32, oneTime:21},
{month:"April", revenue:170, costs:44, overhead:68},
{month:"May", revenue:250, costs:57, overhead:77, oneTime:17},
{month:"June", revenue:200, costs:33, overhead:51, oneTime:30},
{month:"July", revenue:145, costs:80, overhead:62, oneTime:18},
{month:"August", revenue:166, costs:87, overhead:48},
{month:"September", revenue:103, costs:56, overhead:42},
{month:"October", revenue:140, costs:91, overhead:45, oneTime:60},
{month:"November", revenue:100, costs:42, overhead:33, oneTime:67},
{month:"December", revenue:182, costs:56, overhead:25, oneTime:48},
{month:"May", revenue:120, costs:57, overhead:30}
]);
private function initApp():void {
// Create a column chart object
var stackedColumnChart:ColumnChart = new ColumnChart();
stackedColumnChart.dataProvider = yearlyData;
stackedColumnChart.showDataTips = true;
stackedColumnChart.width = 460;
// Set the horizontal axix category
var xAxis:CategoryAxis = new CategoryAxis();
xAxis.categoryField = "month";
stackedColumnChart.horizontalAxis = xAxis;
// ColumnSet.series is an array which contains
// an array of ColumnSeries objects.
var columnSet:ColumnSet = new ColumnSet();
columnSet.type = "stacked";
// Each item in seriesDetails becomes a different segment of
// a column in the stacked chart i.e. each item represents a series.
var seriesDetails:ArrayCollection = new ArrayCollection([
{YField:"costs", DisplayName:"Recurring Costs"},
{YField:"overhead", DisplayName:"Overhead Costs"},
{YField:"oneTime", DisplayName:"One-Time Costs"}
]);
// Create a ColumnSeries, and an array to be
// populated with dynamically generated columnSeries objects
var columnSeries:ColumnSeries;
var seriesArray:Array = new Array();
// Generate an array of ColumnSeries objects
// which are then be applied to the ColumnSet series.
for(var i:int = 0; i < seriesDetails.length; i++){
columnSeries = new ColumnSeries();
columnSeries.yField = seriesDetails[i].YField;
columnSeries.displayName = seriesDetails[i].DisplayName;
seriesArray.push(columnSeries);
}
columnSet.series = seriesArray;
// c.series could take an array of column sets
// for displaying mixed charts i.e. c.series = [columnSet1, columnSet2];
stackedColumnChart.series = [columnSet];
var legend:Legend = new Legend();
legend.direction = "horizontal";
legend.dataProvider = stackedColumnChart;
panelActionscript.addChild(stackedColumnChart);
panelActionscript.addChild(legend);
}
]]>
</mx:Script>
<mx:VBox height="100%">
<mx:Panel title="Stacked chart (dynamically created in ActionScript)"
id="panelActionscript" width="490">
</mx:Panel>
</mx:VBox>
<mx:Panel title="Same chart created solely in MXML" id="panelMxml" width="490">
<mx:ColumnChart id="mxmlColumnChart" dataProvider="{yearlyData}"
showDataTips="true" width="470">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month"/>
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSet type="stacked">
<mx:ColumnSeries
yField="costs"
displayName="Recurring Costs"/>
<mx:ColumnSeries
yField="overhead"
displayName="Overhead Costs"/>
<mx:ColumnSeries
yField="oneTime"
displayName="One-Time Costs"/>
</mx:ColumnSet>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{mxmlColumnChart}" direction="horizontal"/>
</mx:Panel>
</mx:Application>