`
baobeituping
  • 浏览: 1074074 次
  • 性别: Icon_minigender_1
  • 来自: 长沙
社区版块
存档分类
最新评论

Flex图表篇(mx:ColumnChart)

阅读更多

<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
         
        import mx.collections.ArrayCollection;

        [Bindable]
        private var salesDept_1:ArrayCollection = new ArrayCollection( [
            { SalesDept: "销售一部", tract: 3500, gather:3400 },
            ]);
         private var salesDept_2:ArrayCollection = new ArrayCollection( [
            { SalesDept: "销售二部", tract: 2000, gather:1400 },
            ]);
         //这里定义的是数据源
        ]]>
    </mx:Script>

    <mx:Panel title="ColumnChart and BarChart Controls Example"
        height="100%" width="50%" layout="horizontal">

        <mx:ColumnChart id="column" height="100%" width="45%"
            paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{salesDept_1}">
               
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="SalesDept"/>
            </mx:horizontalAxis>

            先制定柱子按照数据源的什么分类,然后在后面的series中指定每一个分类中的具体小类
             //在中里我们指定柱子显示的方向,horizontalAxis表示竖向显示,

            /*

            <mx:verticalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:verticalAxis>

           表示横向显示

 

           */
            <mx:series>
                <mx:ColumnSeries xField="SalesDept" yField="tract" displayName="签单"/>
                <mx:ColumnSeries xField="SalesDept" yField="gather" displayName="到帐"/>
               //displayName表示图表显示出来的名字yField表示数据显示的字段
            </mx:series>
        </mx:ColumnChart>

        <mx:Legend dataProvider="{column}"/>
 <mx:HBox>
            <mx:RadioButton groupName="stocks" label="销售一部"
                selected="true" click="column.dataProvider=salesDept_1;"/>
            <mx:RadioButton groupName="stocks" label="销售二部"
                click="column.dataProvider=salesDept_2;"/>
        </mx:HBox>
    </mx:Panel>
</mx:Application>

分享到:
评论
1 楼 djb_daydayup 2011-01-25  
如何在函数中改变ColumnChart的series呢

相关推荐

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

    &lt;mx:ColumnChart x="6" y="65" id="columnchart1" showDataTips="true" dataProvider="{list}" height="390" itemClick="onItemClick(event)"&gt; &lt;mx:horizontalAxis&gt; &lt;mx:CategoryAxis categoryField="Time"/&gt; ...

    flex graph

    本篇文章将深入探讨Flex Graph的基本概念、用途、核心组件以及如何通过实例进行应用。 一、Flex Graph概述 Flex Graph组件是Flex SDK中的一个部分,它允许开发人员创建各种图表,如折线图、柱状图、饼图等,用于...

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

    &lt;mx:ColumnChart id="columnCharts" dataProvider="{myData}" showDataTips="true" columnWidthRatio="0.6" width="623" height="338"&gt; &lt;!-- 背景元素配置 --&gt; &lt;mx:backgroundElements&gt; &lt;mx:GridLines&gt; &lt;mx:...

    Flex股票分析图

    数据可以是XML、JSON或其他格式,关键在于数据结构要与Flex图表组件的预期输入相匹配。 五、代码实现 1. 创建Flex项目,导入所需的图表库。 2. 设置数据源:将股票数据绑定到`ArrayCollection`,这是Flex中最常用的...

    flex图表展示数据源码

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

    flex3动态创建[参考].pdf

    - `mx:PieChart`, `mx:ColumnChart`, `mx:BarChart`, 和 `mx:LineChart` 是不同类型的图表组件,它们可以通过数据集展示数据。 - `cbChartType` 的数据提供者允许用户在不同的图表类型间切换。 4. **颜色选择器和...

    Flex常见效果

    `&lt;mx:ColumnChart&gt;`柱状图的一种,与`&lt;mx:BarChart&gt;`类似,但通常用于竖直方向上的数据比较。 ##### 8. DateTimeAxis `&lt;mx:DateTimeAxis&gt;`时间轴,适用于连续的时间序列数据。 ##### 9. GridLines `&lt;mx:GridLines&gt;...

    Felx 报表

    `mx:ColumnChart`、`mx:LineChart`和`mx:PieChart`等类提供了丰富的图表选项,可以创建出美观且信息丰富的可视化效果。此外,`mx:Legend`和`mx:Axis`等组件则帮助我们更好地组织和解释数据。 分页和过滤是大型数据...

    flex做的四种图表(线、柱、饼、区域)直接用js调用

    Flex中的mx.charts.ColumnChart类可以实现这一功能,同样通过dataProvider设置数据源,设置columnWidthRatio调整每个柱子的宽度,以及使用horizontalAxis和verticalAxis定义横纵坐标轴。 饼图适用于展示各部分占...

    flex 柱状图表

    4. 动态更新:实时数据显示是Flex图表的一个强大特性,可以在运行时动态添加、删除或修改数据,图表会即时响应。 5. 视觉效果:Flex提供多种视觉效果,如动画、阴影、3D效果等,可以提升图表的视觉吸引力。 五、...

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

    你需要在.mxml文件中导入相关的图表库,例如`&lt;s:BarChart&gt;`(Spark)或`&lt;mx:ColumnChart&gt;`(MX)。接着,你可以定义一个chart数据系列,这通常是一个`&lt;s:Series&gt;`(Spark)或`&lt;mx:ColumnSeries&gt;`(MX)元素,它将...

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

    在Flex中,可以使用`mx.charts.ColumnChart`类来创建柱状图。以下是一些关键步骤: 1. 创建一个新的Flex项目,并在MXML文件中引入必要的命名空间,如`&lt;s:Application&gt;`和`&lt;mx:ColumnChart&gt;`。 2. 定义数据源,通常...

    使用 Flex3 开发 OLAP 应用

    &lt;mx:ColumnChart id="columnChart" showDataTips="true" width="100%" height="100%"/&gt; ... &lt;/mx:HBox&gt; &lt;mx:HBox id="pieBox" name="PieChart" width="100%"&gt; ... &lt;/mx:HBox&gt; &lt;mx:HBox id="lineBox" name=...

    Flex漂亮的柱状图(ColumnChart)

    Flex是一种开源的富互联网应用程序(RIA)开发框架,由Adobe公司提供,主要用于创建交互式、高性能的Web应用。...这个实例对于学习和理解Flex图表组件的使用非常有帮助,可以作为进一步开发自己数据可视化应用的基础。

    Flex+java+bluzeds反向传送,正向数据传送与配置与实例

    - 数据绑定机制使得`moviemodel.movieList.subPointedDataList`可以直接作为图表`&lt;mx:ColumnChart&gt;`的数据提供者,当Java端数据发生变化时,图表会自动更新。 4. **BlazeDS配置**: - 在Java应用服务器(如Tomcat...

    自学flex时自己编写的培训教程。包括程序配置和开发

    ### Flex环境配置与图表应用详解 #### 一、Flex环境配置 **1. 安装FlexBuilder** - **步骤**: 下载并安装最新版本的FlexBuilder。 - **配置FlexBuilder**: 在JRUN或Tomcat中需要导入`flex`和`samples`两个包到`...

    Eclipse开发Flex新手必学例子(后台数据页面显示N种图表)

    以上就是关于"Eclipse开发Flex新手必学例子(后台数据页面显示N种图表)"的主要内容,希望对初学者在理解Flex图表和后台数据交互方面有所帮助。通过不断练习和探索,你将能够自如地运用Flex创建出各种复杂且富有洞察力...

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

    在Flex中,我们可以利用MX图表组件库来创建柱状图,这个库包含了多种图表类型,如条形图(BarChart)、柱状图(ColumnChart)等。这些图表能够以直观的方式展示数据,帮助用户快速理解和分析信息。 动态显示效果是...

    flex 柱状图表2

    开发者可能使用了Flex提供的mx.charts库,该库包含了多种图表类型,如条形图(BarChart)、柱状图(ColumnChart)等。 `.actionScriptProperties`文件是Adobe Flex Builder或Flash Builder中的项目配置文件,它存储...

    flex的labelRotation解决方法

    在Flex开发中,有时我们需要对图表的...通过理解并使用`labelRotation`属性以及正确地嵌入字体,我们可以灵活地调整Flex图表的轴标签,以适应各种设计和布局需求。这对于创建美观且用户友好的数据可视化界面至关重要。

Global site tag (gtag.js) - Google Analytics