1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  3. xmlns:s="library://ns.adobe.com/flex/spark"
  4. xmlns:mx="library://ns.adobe.com/flex/mx"
  5. width="100%" height="100%" creationComplete="initHandler()"
  6. xmlns:components="com.fusioncharts.components.*">
  7. <s:layout>
  8. <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
  9. </s:layout>
  10. <fx:Declarations>
  11. <!-- 将非可视元素(例如服务、值对象)放在此处 -->
  12. </fx:Declarations>
  13.  
  14. <fx:Script>
  15. <![CDATA[
  16. import com.events.FCEvent;
  17. import com.fusioncharts.components.FusionCharts;
  18.  
  19. import mx.collections.ArrayCollection;
  20. import mx.controls.Alert;
  21.  
  22. [Bindable]
  23. /*数据源绑定*/
  24. private var pieArray:ArrayCollection = new ArrayCollection([
  25. {label:"一月",value:"891541",link:"S-1"},
  26. {label:"二月",value:"451542",link:"S-2"},
  27. {label:"三月",value:"784455",link:"S-3"},
  28. {label:"四月",value:"698988",link:"S-4"},
  29. {label:"五月",value:"321545",link:"S-5"},
  30. {label:"六月",value:"154512",link:"S-6"},
  31. {label:"七月",value:"265455",link:"S-7"},
  32. {label:"八月",value:"98988",link:"S-8"},
  33. {label:"九月",value:"784544",link:"S-9"},
  34. {label:"十月",value:"987844",link:"S-10"},
  35. {label:"十一月",value:"356522",link:"S-11"},
  36. {label:"十二月",value:"894556",link:"S-12"}
  37. ]);
  38.  
  39. [Bindable]
  40. /*饼图属性绑定*/
  41. private var params:ArrayCollection = new ArrayCollection([
  42. {baseFontSize:"12"},
  43. {caption:"2013年某桥每月通过的人数统计"},
  44. {showBorder:"1"},
  45. {borderColor:"#00FF00"},
  46. {bgColor:"#000000"},
  47. {showLegend:"1"},
  48. {legendShadow:"1"},
  49. {legendAllowDrag:"1"},
  50. {dashed:"1"},
  51. {showToolTip:"1"},
  52. {legendNumColumns:"6"},
  53. {baseFontColor:"#FF0000"},
  54. {showValue:"1"},
  55. {startingAngle:"90"}
  56. ]);
  57.  
  58. /**
  59. * 初始化函数
  60. */
  61. protected function initHandler():void
  62. {
  63. var FC:FusionCharts = new FusionCharts();
  64. FC.FCChartType = "Pie2D";
  65. FC.FCData(pieArray);
  66. FC.percentWidth = 100;
  67. FC.percentHeight = 100;
  68. pie.addChild(FC);
  69. FC.addEventListener("FCClickEvent",clickPie);
  70. }
  71.  
  72. private function clickPie(evt:FCEvent):void
  73. {
  74. Alert.show(evt.param);
  75. column.removeAllChildren();
  76. var FC:FusionCharts = new FusionCharts();
  77. FC.FCChartType = "Column2D";
  78. FC.FCData(pieArray);
  79. FC.percentWidth = 100;
  80. FC.percentHeight = 100;
  81. column.addChild(FC);
  82. FC.addEventListener("FCClickEvent",clickColumn);
  83. }
  84.  
  85. private function clickColumn(evt:FCEvent):void
  86. {
  87. Alert.show(evt.param);
  88. line.removeAllChildren();
  89. var FC:FusionCharts = new FusionCharts();
  90. FC.FCChartType = "Line";
  91. FC.FCData(pieArray);
  92. FC.percentWidth = 100;
  93. FC.percentHeight = 100;
  94. line.addChild(FC);
  95. FC.addEventListener("FCClickEvent",clickLine);
  96. }
  97.  
  98. private function clickLine(evt:FCEvent):void
  99. {
  100. Alert.show(evt.param);
  101. bar.removeAllChildren();
  102. var FC:FusionCharts = new FusionCharts();
  103. FC.FCChartType = "Bar2D";
  104. FC.FCData(pieArray);
  105. FC.percentWidth = 100;
  106. FC.percentHeight = 100;
  107. bar.addChild(FC);
  108. }
  109.  
  110. ]]>
  111. </fx:Script>
  112.  
  113. <mx:HBox width="100%" height="50%">
  114. <mx:HBox width="50%" height="100%" id="pie">
  115.  
  116. </mx:HBox>
  117. <mx:HBox width="50%" height="100%" id="column">
  118.  
  119. </mx:HBox>
  120. </mx:HBox>
  121. <mx:HBox width="100%" height="50%">
  122. <mx:HBox width="50%" height="100%" id="line">
  123.  
  124. </mx:HBox>
  125. <mx:HBox width="50%" height="100%" id="bar">
  126.  
  127. </mx:HBox>
  128. </mx:HBox>
  129. </s:Application>

Flex中的FusionCharts 四图监听的更多相关文章

  1. 关于JAVA中事件分发和监听机制实现的代码实例-绝对原创实用

    http://blog.csdn.net/5iasp/article/details/37054171 文章标题:关于JAVA中事件分发和监听机制实现的代码实例 文章地址: http://blog.c ...

  2. Android 开发中的View事件监听机制

    在开发过程中,我们常常根据实际的需要绘制自己的应用组件,那么定制自己的监听事件,及相应的处理方法是必要的.我们都知道Android中,事件的监听是基于回调机制的,比如常用的OnClick事件,你了解它 ...

  3. Flex中的FusionCharts 2D饼图

    1.设计思路 (1)FusionCharts中有Flex组件文件FusionCharts.swc,这样可以让FusionCharts用Flex展示出来: (2)利用xmlns:components=& ...

  4. Flex中的FusionCharts 2D面积图

    Flex中的FusionCharts 2D面积图 1.源码 <?xml version="1.0" encoding="utf-8"?> <s ...

  5. Flex中的FusionCharts 2D折线图

    Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...

  6. Flex中配置FusionCharts

    Flex中配置FusionCharts 1.配置前说明 (需要的工具和插件) 1.1   MyEclipse10.0 1.2   Flash Builder4.0 1.3   FusionCharts ...

  7. onscroll事件没有响应的原因以及vue.js中添加onscroll事件监听的方法

    1 onscroll事件失效 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  8. Android应用中返回键的监听及处理

    MainActivity: package com.testnbackpressed;  import android.os.Bundle;  import android.view.KeyEvent ...

  9. Android应用中Back键的监听及处理

    MainActivity如下: package cn.testnbackpressed; import android.os.Bundle; import android.view.KeyEvent; ...

随机推荐

  1. C++ explicit关键字详解(转载)

    转载:https://www.cnblogs.com/ymy124/p/3632634.html 首先, C++中的explicit关键字只能用于修饰只有一个参数的类构造函数, 它的作用是表明该构造函 ...

  2. spring之注解详解

    一.类级别注解 通用:@Component("id") Controller层:@Controller("id") Service层:@Service(&quo ...

  3. JAVA设计模式---命令模式

    1.定义: 将“请求”封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象,命令模式也支持可撤销的操作.命令可以用来实现日志和事务系统. 2.实例: 1)需求:设计一个家电遥控器的API,遥控 ...

  4. 06_Linux系统常用命令

    一.命令使用方法 Linux命令格式 command [-option] [parameter1] [parameter2]... command:相应功能的英文单词或者单词的缩写 option:可用 ...

  5. python中的协程及实现

    1.协程的概念: 协程是一种用户态的轻量级线程.协程拥有自己的寄存器上下文和栈. 协程调度切换时,将寄存器上下文和栈保存到其他地方,在切换回来的时候,恢复先前保存的寄存器上下文和栈. 因此,协程能保留 ...

  6. Go笔记-变量

    声明变量的一般形式:     var indentifier type 实例:     var a int     var b bool     var str string     var (    ...

  7. 关于dom4j解析xml

    一:相关jar包 dom4j-1.6.1.jar 二:用例xml文件 三:解析 注:可能有的小白不知道如果获取节点,so,you can: for (Iterator<Element> i ...

  8. pandas中的分组技术

    目录 1  分组操作 1.1  按照列进行分组 1.2  按照字典进行分组 1.3  根据函数进行分组 1.4  按照list组合 1.5  按照索引级别进行分组 2  分组运算 2.1  agg 2 ...

  9. linux使用i/o内存访问外设

    一.linux中访问外设的方法. 1.IO端口(IO port) linux系统给外设分配不同的端口号,linux利用端口号来访问设备(驱动) (cpu x86) cpu访问外设通过端号,访问通过地址 ...

  10. ajax同步与异步的坑

      之前工作中一个需求,需要动态的添加一组下拉菜单并为这个菜单绑定一个插件,很明显获取数据用Ajax,这本身是没错的,坑就坑在我用了 同步请求,当服务器端正确返回数据时再去执行下一个方法,这逻辑本身没 ...