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"：显示如下：