flex柱状图

1.图标中添加标签的代码：

private function linearAxis_labelFunc(item:Object, prevValue:Object,axis:IAxis):String {

                returncurrencyFormatter.format(item);

            }

 

            private functioncategoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis,categoryItem:Object):String {

                var datNum:Number = Date.parse(item);

                var tempDate:Date =new Date(datNum);

                returnshortDateFormatter.format(tempDate).toUpperCase();

            }

 

            private functioncolumnSeries_labelFunc(element:ChartItem, series:Series):String {

                var csi:ColumnSeriesItem =ColumnSeriesItem(element);

                var ser:ColumnSeries = ColumnSeries(series);

 

                var datNum:Number = Date.parse(csi.item.@date);

                var tempDate:Date =new Date(datNum);

                returnfullDateFormatter.format(tempDate);

            }

2.图表数据及非可视化组件

<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<!--定义一个特效-->
<mx:DateFormatter id="shortDateFormatter" formatString="DD" /> 
<mx:DateFormatter id="fullDateFormatter" formatString="MMM D, YYYY" /> 
<mx:CurrencyFormatter id="currencyFormatter" precision="2" /> 

<mx:XMLListCollection id="dp"> 
<mx:source> 
<fx:XMLList> 
<quote date="8/1/2007" open="40.29" close="39.58" /> 
<quote date="8/2/2007" open="39.4" close="39.52" /> 
<quote date="8/3/2007" open="39.47" close="38.75" /> 
<quote date="8/6/2007" open="38.71" close="39.38" /> 
<quote date="8/7/2007" open="39.08" close="39.42" /> 
<quote date="8/8/2007" open="39.61" close="40.23" /> 
<quote date="8/9/2007" open="39.9" close="40.75" /> 
<quote date="8/10/2007" open="41.3" close="41.06" /> 
<quote date="8/13/2007" open="41" close="40.83" /> 
<quote date="8/14/2007" open="41.01" close="40.41" /> 
<quote date="8/15/2007" open="40.22" close="40.18" /> 
<quote date="8/16/2007" open="39.83" close="39.96" /> 
<quote date="8/17/2007" open="40.18" close="40.32" /> 
<quote date="8/20/2007" open="40.55" close="40.74" /> 
<quote date="8/21/2007" open="40.41" close="40.13" /> 
<quote date="8/22/2007" open="40.4" close="40.77" /> 
<quote date="8/23/2007" open="40.82" close="40.6" /> 
<quote date="8/24/2007" open="40.5" close="40.41" /> 
<quote date="8/27/2007" open="40.38" close="40.81" /> 
</fx:XMLList> 
</mx:source> 
</mx:XMLListCollection> 
<mx:SeriesSlide id="ss" duration="1000" direction="up" />
</fx:Declarations>

3.可视化组件：

<mx:ApplicationControlBar dock="true">

        <mx:CheckBox id="checkBox"

                label="showLabelVertically:"

                labelPlacement="left"

                selected="true"/>

    </mx:ApplicationControlBar>

 

    <mx:ColumnChart id="columnChart"

            showDataTips="true"

            dataProvider="{dp}"

            width="100%"

            height="100%"

            showLabelVertically="{checkBox.selected}">

 

        <!-- vertical axis -->

        <mx:verticalAxis>

            <mx:LinearAxis baseAtZero="false"

                    labelFunction="linearAxis_labelFunc"/>

        </mx:verticalAxis>

 

        <!-- horizontal axis -->

        <mx:horizontalAxis>

            <mx:CategoryAxis id="ca"

                    categoryField="@date"

                    title="August 2007"

                    labelFunction="categoryAxis_labelFunc"/>

        </mx:horizontalAxis>

 

        <!-- horizontal axis renderer -->

        <mx:horizontalAxisRenderers>

            <mx:AxisRenderer axis="{ca}"

                    canDropLabels="true"/>

        </mx:horizontalAxisRenderers>

 

        <!-- series -->

        <mx:series>

            <mx:ColumnSeries displayName="Open"

                    xField="@date"

                    yField="@open"

                    labelFunction="columnSeries_labelFunc"

                    labelPosition="outside">

            </mx:ColumnSeries>

        </mx:series>

 

        <!-- series filters -->

        <mx:seriesFilters>

            <mx:Array />

        </mx:seriesFilters>

    </mx:ColumnChart>

4.下图为展示效果：