当前位置:首页 > 开发 > 编程语言 > 编程 > 正文

Flex4中使用组件添加柱状图、饼状图等图表

发表于: 2013-06-19   作者:AdyZhang   来源:转载   浏览:
摘要: 1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
1.添加一个最简单的柱状图
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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" >
     <s:layout>
         <s:BasicLayout/>
     </s:layout>
     <fx:Declarations>
         <!-- 将非可视元素(例如服务、值对象)放在此处 -->
     </fx:Declarations>
     <fx:Script>
         <![CDATA[
             [Bindable]
             private  var  arr: Array  = [{id: 1 ,city: '北京' ,money: 1000 ,pay: 300 },{id: 2 ,city: '上海' ,money: 1200 ,pay: 500 },{id: 3 ,city: '天津' ,money: 800 ,pay: 200 }];
             
         ]]>
     </fx:Script>
     <mx:BarChart x= "110"  y= "27"  id= "barchart1"  dataProvider= "{arr}"  showDataTips= "true"  selectionMode= "single" >
         <mx:series>
             <mx:BarSeries displayName= "收入"  xField= "money"  />
             <mx:BarSeries displayName= "支出"  xField= "pay"  />
         </mx:series>
         <mx:verticalAxis>
             <mx:CategoryAxis categoryField= "city"  />
         </mx:verticalAxis>
     </mx:BarChart>
     <mx:Legend dataProvider= "{barchart1}" />
</s:Application>

这个例子使用Array做为数据源,柱状图使用mx:BarChart组件,这个例子很简单,就不讲解了

 

 

2.在上面例子的基础上,添加一个特效,就是图表默认是半透明的,在鼠标移到图标上时渐变为不透明,移开时渐变为半透明

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<?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" >
     <s:layout>
         <s:BasicLayout/>
     </s:layout>
     <fx:Declarations>
         <!-- 将非可视元素(例如服务、值对象)放在此处 -->
     </fx:Declarations>
     <fx:Script>
         <![CDATA[
             [Bindable]
             private  var  arr: Array  = [{id: 1 ,city: '北京' ,money: 1000 ,pay: 300 },{id: 2 ,city: '上海' ,money: 1200 ,pay: 500 },{id: 3 ,city: '天津' ,money: 800 ,pay: 200 }];
             
         ]]>
     </fx:Script>
     <mx:BarChart alpha= "0.5"  x= "110"  y= "27"  id= "barchart1"  dataProvider= "{arr}"  showDataTips= "true"  selectionMode= "single" >
         <mx:series>
             <mx:BarSeries displayName= "收入"  xField= "money"  />
             <mx:BarSeries displayName= "支出"  xField= "pay"  />
         </mx:series>
         <mx:verticalAxis>
             <mx:CategoryAxis categoryField= "city"  />
         </mx:verticalAxis>
         <mx:rollOverEffect>
             <s:Fade alphaFrom= "0.5"  alphaTo= "1"  duration= "1000"  />
         </mx:rollOverEffect>
         <mx:rollOutEffect>
             <s:Fade alphaFrom= "1"  alphaTo= "0.5"  duration= "1000"  />
         </mx:rollOutEffect>
     </mx:BarChart>
     <mx:Legend dataProvider= "{barchart1}" />
</s:Application>

 

 

3.添加一个最简单的饼状图 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?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" >
     <s:layout>
         <s:BasicLayout/>
     </s:layout>
     <fx:Script>
         <![CDATA[
             [Bindable]
             private  var  arr: Array  = [{id: 1 ,city: '北京' ,money: 1000 ,pay: 300 },{id: 2 ,city: '上海' ,money: 1200 ,pay: 500 },{id: 3 ,city: '天津' ,money: 800 ,pay: 200 }];
             
         ]]>
     </fx:Script> 
     <fx:Declarations>
         <!-- 将非可视元素(例如服务、值对象)放在此处 -->
     </fx:Declarations>
     <mx:PieChart x= "110"  y= "51"  id= "piechart1"  dataProvider= "{arr}"  showAllDataTips= "true"  selectionMode= "single" >
         <mx:series>
             <mx:PieSeries displayName= "Series 1"  field= "money"  labelPosition= "callout"  labelField= "city"  nameField= "city"  />
         </mx:series>
     </mx:PieChart>
     <mx:Legend dataProvider= "{piechart1}"  direction= "horizontal"  labelPlacement= "right"   />
</s:Application>

 

这里需要说明一下mx:PieSeries标签里面的几个属性:labelField和labelPosition分别是指饼图每块显示的内容和位置,nameField是指图例Legend显示的内容

 

 

4.添加一个竖版柱状图

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?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" >
     <s:layout>
         <s:BasicLayout/>
     </s:layout>
     <fx:Script>
         <![CDATA[
             [Bindable]
             private  var  arr: Array  = [{id: 1 ,city: '北京' ,money: 1000 ,pay: 300 },{id: 2 ,city: '上海' ,money: 1200 ,pay: 500 },{id: 3 ,city: '天津' ,money: 800 ,pay: 200 }];
             
         ]]>
     </fx:Script>
     <fx:Declarations>
         <!-- 将非可视元素(例如服务、值对象)放在此处 -->
     </fx:Declarations>
     <mx:ColumnChart x= "100"  y= "90"  id= "columnchart1"  dataProvider= "{arr}"  showDataTips= "true"  selectionMode= "single" >
         <mx:horizontalAxis>
             <mx:CategoryAxis categoryField= "city"  />
         </mx:horizontalAxis>
         <mx:series>
             <mx:ColumnSeries displayName= "收入"  yField= "money" />
             <mx:ColumnSeries displayName= "支出"  yField= "pay" />
         </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider= "{columnchart1}" />
</s:Application>

跟第一个例子非常相似,只是使用的组件是mx:ColumnChart

Flex4中使用组件添加柱状图、饼状图等图表

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
说明: 前台页面(JSP)使用 Highcharts 图表库对数据库中的数据进行统计展示。 使用技术: 1. jQue
可以生成 柱状图,曲线图,饼状图,只要你给他一个datatable,在这声明一下 using System; using System
可以生成 柱状图,曲线图,饼状图,只要你给他一个datatable,在这声明一下 using System; using System.
近来项目中需要用饼状图表示一些东东,我才想起来,曾经我还改过一个生成图表的控件,翻开电脑找了半天
MPAndroidChart开源图表库之饼状图   为大家介绍一款图标开源库MPAndroidChart,它不仅可以在Andro
MPAndroidChart开源图表库之饼状图   为大家介绍一款图标开源库MPAndroidChart,它不仅可以在Andro
Android中利用View进行绘制折线图,饼状图,柱状图: 绘制这些图形时,主要用到的知识点为: 1.画笔
一、前提: 下载增加jar包 : jfreechart-1.0.13.jar , jcommon-1.0.14.jar 二、柱状图: 2.1 效果
下载jgcharts.js库 在页面引用 <script src="Scripts/jquery-1.4.1.min.js" type="text/javascri
jfreechart生成柱状图与饼状图(入门)贴两段代码。 /** * 生成柱状图 */ public String genChannelNum
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号