Flex柱状图

 效果如下:



源码:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;

            protected function legend1_dataChangeHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
            }

        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            //定义数据集，内容为每个月的收支情况
            public var finance:ArrayCollection = new ArrayCollection([
                {Month:"一月",In:"2000",Out:"1500"},
                {Month:"二月",In:"1000",Out:"200"},
                {Month:"三月",In:"1500",Out:"200"},
                {Month:"四月",In:"3500",Out:"1000"},
                {Month:"五月",In:"500",Out:"800"},
                {Month:"六月",In:"4500",Out:"600"},
                {Month:"七月",In:"2500",Out:"500"},
                {Month:"八月",In:"1570",Out:"300"},
                {Month:"九月",In:"1000",Out:"4500"},
                {Month:"十月",In:"1500",Out:"400"},
                {Month:"十一月",In:"1700",Out:"2500"},
                {Month:"十二月",In:"1800",Out:"1500"},
            ]);
        ]]>
    </fx:Script>
    <s:Panel title="年收支柱状图">  <!-- 柱状图容器 -->
        <mx:ColumnChart id="myChart" dataProvider="{finance}" > <!-- 柱状图组件 -->
            <mx:horizontalAxis>    <!-- 定义横坐标,并将数据绑定-->
                <mx:CategoryAxis dataProvider="{finance}" categoryField="Month" title="月份" />    
            </mx:horizontalAxis>
            <mx:series>            <!-- 数据以柱的形式显示 -->
                <mx:ColumnSeries xField="Month" yField="In" displayName="收入" />
                <mx:ColumnSeries xField="Month" yField="Out" displayName="支出" />
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}" x="314" y="0" height="54" width="86"/>
        </s:Panel>
</s:Application>