`

Flex中如何利用showLabelVertically属性控制ColumnChart上ColumnSeries标签为竖直或横向的例子

    博客分类:
  • Flex
阅读更多
接下来的例子演示了Flex中如何利用showLabelVertically属性,控制ColumnChart上ColumnSeries标签为竖直或横向
下面是完整代码
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        @font-face {
            src: local("Arial");
            fontFamily: ArialEmbedded;
        }
 
        ColumnChart {
            fontFamily: ArialEmbedded;
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.charts.series.items.ColumnSeriesItem;
            import mx.charts.ChartItem;
            import mx.charts.chartClasses.Series;
            import mx.charts.chartClasses.IAxis;
            import mx.utils.ObjectUtil;
 
            private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                return currencyFormatter.format(item);
            }
 
            private function categoryAxis_labelFunc(item:Object, prevValue:Object, axis:CategoryAxis, categoryItem:Object):String {
                var datNum:Number = Date.parse(item);
                var tempDate:Date = new Date(datNum);
                return shortDateFormatter.format(tempDate).toUpperCase();
            }
 
            private function columnSeries_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);
                return fullDateFormatter.format(tempDate);
            }
        ]]>
    </mx:Script>
 
    <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>
            <mx: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" />
            </mx:XMLList>
        </mx:source>
    </mx:XMLListCollection>
 
    <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>
 
</mx:Application>

分享到:
评论

相关推荐

    Flex ColumnChart获取得焦点改变颜色

    例如,在`ColumnChart`上添加`focusIn`和`focusOut`事件监听,当图表获得或失去焦点时,通过修改`itemSelectionColor`属性来改变选中状态下的柱状图颜色,从而达到视觉上的聚焦效果。 ### 四、总结 通过以上分析,...

    Flex漂亮的柱状图(ColumnChart)

    在Flex中,我们可以使用Spark或MX图表组件来创建柱状图,这些组件提供了丰富的自定义选项,以便于开发者构建出美观且功能强大的图表。 本资源包含的"Flex漂亮的柱状图(ColumnChart)"是一个示例项目,展示了如何在...

    FLEX画图之各种柱状图饼状图画法

    3. 添加`&lt;mx:BarSeries&gt;`或`&lt;mx:ColumnSeries&gt;`组件到`ColumnChart`,并设置其数据字段以映射到数据源中的数值。 4. 可以自定义柱状图的样式,如颜色、宽度、标签等,以增强视觉效果。 接下来,我们转向饼状图的...

    How to use Flex to achieve Thematic Layers of Columnar

    在本文中,我们将探讨如何使用Adobe Flex来实现柱状专题图层,这是一种在地图上以柱状图形式展示统计数据的有效方法,特别适合于比较和分析各类统计数据。柱状专题图或直方图专题图在地理信息系统中非常常见,它们...

    flex柱状图表很漂亮的源码1

    在这个名为"flex柱状图表很漂亮的源码1"的资源中,我们可以期待学习到如何利用Flex来创建美观且功能丰富的柱状图表。 柱状图是一种常见的数据可视化工具,它通过不同长度的柱子来表示数据的大小或比例关系。在Flex...

    Flex Chart 使用教程(含源代码)

    Flex Chart 是Adobe Flex框架中的一个强大图表组件,用于在Flex应用程序中展示数据的图形化表示。这个使用教程包含了源代码,使得开发者无论是否熟悉ActionScript(AS)都能掌握其使用方法。下面将详细介绍Flex ...

    flex折线图

    Flex中的BarSeries或ColumnSeries可以用来创建柱状图。与折线图类似,我们需要设置数据源、x轴和y轴的字段,以及每个柱子的样式。此外,还可以添加堆叠柱状图,显示各组的总和,或者百分比柱状图,显示每个柱子相...

    flex图表展示数据源码

    综上所述,“flex图表展示数据源码”涉及了Flex框架中的数据可视化技术,包括使用MX和Spark图表组件、数据源的创建和绑定、以及动态更新图表数据的方法。在实际项目中,开发者需要根据具体需求灵活应用这些知识点,...

    Flex 饼状、柱状、实时曲线图

    Flex中的ColumnChart类可以生成垂直柱状图,而BarChart类则用于生成水平柱状图。数据同样通过数据Provider传递,每个条形的高度对应于数据值。通过ColumnSeries或BarSeries,我们可以指定数据列和它们的样式。还可以...

    flex graph

    Flex Graph是一种基于Adobe Flex技术的图形绘制库,用于在Web应用程序中创建交互式的图表和图形。Flex是ActionScript 3.0的一个框架,主要用于构建富互联网应用(RIA)。本篇文章将深入探讨Flex Graph的基本概念、...

    FLEX问题总汇 (总结篇)

    在Flex中,可以设置横轴滚动条(horiz)和竖轴滚动条(verticalScrollPolicy)的属性为`off`,以隐藏滚动条。 7. **模块间数据通信**: 模块间的通信可以通过示例代码中的`ModuleCommunicationSample.rar`来实现...

    flex柱状图表很漂亮的源码

    在Flex中,可以使用`mx.charts.ColumnSeries`(Halo)或`s.spark.components.ColumnSeries`(Spark)来创建系列。 4. **X轴与Y轴**:定义X轴和Y轴的数据字段,它们会根据数据提供者中的数据来显示。例如,X轴通常...

    FLEX常见问题总汇

    5. **访问父级对象**:在Flex中,你可以使用`parentApplication`属性来访问父级应用对象。 6. **去除滚动条**:在需要移除滚动条的地方,可以设置横条`horizontalScrollPolicy`为`off`,竖条`verticalScrollPolicy`...

    flex柱状图动态切换数据源实例

    该flex应用程序演示了柱状图动态切换数据源 &lt;mx:ColumnChart x="6" y="65" id="columnchart1" showDataTips="true" dataProvider="{list}" height="390" itemClick="onItemClick(event)"&gt; &lt;mx:...

    flex做的柱状图,动态显示效果

    在MXML中,我们可以通过`dataProvider`属性将XML数据绑定到`BarSeries`或`ColumnSeries`上。 4. **监听数据变化**:为了实现动态效果,我们需要监听XML数据的变化。这可以通过使用`XMLListCollection`并设置其`data...

    Flex中通过RadioButton进行切换示例代码

    showDataTips属性被设置为true,这允许用户在交互时鼠标悬停在图表的柱状或折线上的特定数据点时,显示一个包含数据信息的提示框。 最后,Legend组件的使用能够显示图表中的数据系列名称,方便用户理解图表所表达的...

    Flex动态创建多个曲线图和柱形图源码

    在本例中,我们将探讨如何利用Flex来动态地创建多个曲线图和柱形图。此段代码摘自一个更完整的统计图表项目,并通过手动编写的数据源来展示图表的生成过程。下面将对代码进行详细的分析和解释。 #### 关键概念与...

    oxyplot绘制统计图饼状线性等

    在 oxyplot 中,你可以利用丰富的 API 自定义图表的每一个细节,包括轴的标签、图例、颜色、线型、填充图案等等。这使得 oxyplot 成为了数据可视化的强大工具,无论是简单的报告还是复杂的交互式应用,都能满足需求...

    MS chart例子描述

    设置其DataSource属性为数据源(例如,DataTable、数组或其他集合),并设定ValueMember和SeriesMember属性来指定数据列。 3. **图表类型**:MS Chart支持多种图表类型,包括折线图(LineSeries)、柱状图...

Global site tag (gtag.js) - Google Analytics