Flex 4图表使用实例ColumnChart

本例子针对flash.com/article/flex' target='_blank'>flex的ColumnChart组件写的例子，通过设置ColumnChar的type为不同的类型，得出不同的列状图表。

ColumnChar的type有100%、clustered、overlaid、stacked四种。四种例子都是用到的代码：

<?xml version="1.0" encoding="utf-8"?>
< s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flash.com/article/flex' target='_blank'>flex/spark"
xmlns:mx="library://ns.adobe.com/flash.com/article/flex' target='_blank'>flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var money:ArrayCollection = new ArrayCollection( [
{ month:6, Fare:120, CostOfLiving:470, Play:231, other:510 },
{ month:7, Fare:120, CostOfLiving:500, Play:106, other:23},
{ month:8, Fare:120, CostOfLiving:650, Play:43, other:342},
{ month:9, Fare:120, CostOfLiving:704, Play:180, other:18},
{ month:10, Fare:120, CostOfLiving:512, Play:410, other:123},
{ month:11, Fare:120, CostOfLiving:823, Play:123, other:124},
])
]]>
</fx:Script>
<mx:ColumnChart id="column" type="stackedclustered overlaid"
dataProvider="{money}">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="month" />
</mx:horizontalAxis>
<mx:series>
<mx:ColumnSeries displayName="Fare" yField="Fare">
<mx:fill>
<mx:RadialGradient>
<mx:entries>
<mx:GradientEntry color="#f23f0" />
<mx:GradientEntry color="#f0420" ratio="0"/>
</mx:entries>
</mx:RadialGradient>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries displayName="CostOfLiving" yField="CostOfLiving">
<mx:fill>
<mx:SolidColor color="#0350f">
</mx:SolidColor>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries displayName="Play" yField="Play">
<mx:fill>
<mx:SolidColor color="#0af00"/>
</mx:fill>
</mx:ColumnSeries>
<mx:ColumnSeries displayName="other" yField="other">
<mx:fill>
<mx:SolidColor color="#f08788"/>
</mx:fill>
</mx:ColumnSeries>
</mx:series>
</mx:ColumnChart>
<mx:Legend dataProvider="{column}" x="424" y="14"/>
< /s:Application>

（1）type="100%"时，显示如下：

(2)、type="clustered"显示如下：

(3)、type="overlaid"显示如下：

(4)、type="stacked"：显示如下：