原文地址：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,?overhead:33,oneTime:67},
?? ? ? ?{month:"December",revenue:182,?overhead:25,oneTime:48},?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>
