Flex中的FusionCharts 2D饼图
1、设计思路
(1)FusionCharts中有Flex组件文件FusionCharts.swc,这样可以让FusionCharts用Flex展示出来;
(2)利用xmlns:components="com.fusioncharts.components.*"组件,将FusionCharts嵌入到Flex中。
2、Flex中展现FusionCharts饼图源码
pieChart.mxml:
<?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"
width="100%" height="100%"
xmlns:components="com.fusioncharts.components.*"
creationComplete="initHandler()">
<s:layout>
<s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import org.osmf.events.TimeEvent;
[Bindable]
/*数据源绑定*/
private var pieArray:ArrayCollection = new ArrayCollection([
{label:"一月",value:"891541"},
{label:"二月",value:"451542"},
{label:"三月",value:"784455"},
{label:"四月",value:"698988"},
{label:"五月",value:"321545"},
{label:"六月",value:"154512"},
{label:"七月",value:"265455"},
{label:"八月",value:"98988"},
{label:"九月",value:"784544"},
{label:"十月",value:"987844"},
{label:"十一月",value:"356522"},
{label:"十二月",value:"894556"}
]);
[Bindable]
/*饼图属性绑定*/
private var params:ArrayCollection = new ArrayCollection([
{baseFontSize:"12"},
{caption:"2013年某桥每月通过的人数统计"},
{showBorder:"1"},
{borderColor:"#00FF00"},
{bgColor:"#0000FF"},
{showLegend:"1"},
{legendShadow:"1"},
{legendAllowDrag:"1"},
{dashed:"1"},
{showToolTip:"1"},
{legendNumColumns:"6"},
{showPercentValues:"1"},
{baseFontColor:"#FF0000"},
{showValue:"1"}
]);
/*声明timer,并且设置成10秒*/
private var timer:Timer = new Timer(10000);
/*初始化函数*/
protected function initHandler():void
{
timer.addEventListener(TimerEvent.TIMER,timerHandler);
timer.start();
}
/*timerHandler处理函数*/
private function timerHandler(evt:TimeEvent):void
{
for(var i:int = 0;i<pieArray.length;i++)
{
pieArray[i].value = int(pieArray[i].value) + int(Math.random()*1000000);
}
pieArray.refresh();
hbox.removeAllChildren();
var fusionCharts:FusionCharts = new FusionCharts();
//fusionCharts.FCData(pieArray);
//fusionCharts.FCChartType = "Pie2D";
fusionCharts.percentWidth = 100;
fusionCharts.percentHeight = 100;
hbox.addChild(fusionCharts);
}
]]>
</fx:Script>
<mx:HBox width="100%" height="100%" id="hbox">
<components:FusionCharts width="100%" height="100%" FCChartType="Pie2D">
<components:FCChartData FCData="{pieArray}" FCParams="{params}" id="pieData"/>
</components:FusionCharts>
</mx:HBox>
</s:Application>
3、设计结果
Flex中的FusionCharts 2D饼图的更多相关文章
- Flex中的FusionCharts 2D面积图
Flex中的FusionCharts 2D面积图 1.源码 <?xml version="1.0" encoding="utf-8"?> <s ...
- Flex中的FusionCharts 2D折线图
Flex中的FusionCharts 2D折线图 1.设计源码 LineChart.mxml: <?xml version="1.0" encoding="utf- ...
- Flex中的FusionCharts 2D柱形图
1.2D柱形图源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...
- Flex中的FusionCharts 3D饼图
1.3D饼图设计源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns: ...
- Flex中配置FusionCharts
Flex中配置FusionCharts 1.配置前说明 (需要的工具和插件) 1.1 MyEclipse10.0 1.2 Flash Builder4.0 1.3 FusionCharts ...
- Flex中的FusionCharts 四图监听
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="ht ...
- Flex中的FusionCharts 3D柱形图
1.3D柱形图源码 <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:f ...
- Flex中设置Camera的视频清晰质量的最佳配合
今天需要设置Flex中的Camera组件的一些属性,后来发现清晰度不是很高,于是捣鼓了上午半天,设置了很多的参数,竟然发现手册上就是有现成的一些设置方法,郁闷!不过我还是专门设置了几个有用和必要的属性 ...
- ArcGIS for Flex中引入google map作底图
上篇文章到在ArcGIS View中引入google map,这里讲ArcGIS for Flex中引入google map作底图. 同样道理,以google map作底图,需要编写继承自TiledM ...
随机推荐
- 04_Linux命令
一.命令使用方法 Linux命令格式 command [-option] [parameter1] [parameter2]... command:相应功能的英文单词或者单词的缩写 option:可用 ...
- Oracle打印日历功能
Oracle用SQL打印日历 1.1 打印当月日历 , D, NULL)) SUN, , D, NULL)) MON, , D, NULL)) TUE, , D, NULL)) WED, , D, ...
- python3图像识别库安装与使用
pytesseract库的安装 因为用的win10,就直说windows上面的安装了.其实就是pip安装就完事了. $ pip install pytesseract 安装了这个还不算完,得安装Tes ...
- Python数据结构之一——list(列表)
Python版本:3.6.2 操作系统:Windows 作者:SmallWZQ Python包含6种常见的内建序列.它们分别是列表.元祖.字符串.Unicode字符串.buffer(memory ...
- tcp_sync_server and tcp_sync_client
#include <iostream> #include <fstream> #include <sstream> #include <boost/asio. ...
- thinkPHP数据库操作
thinkPHP如果要对数据库操作,一般来说首先要做的是在配置文件中链接数据库,然后用M方法实例化一张表,然后就是对表的操作了 可以开启调试功能查看程序执行的sql语句: 1.开启调试功能(默认是已经 ...
- UML设计
UML设计 1. UML的概念 Unified Modeling Language(UML)又称统一建模语言或标准建模语言,是一个支持模型化和软件系统开发的图形化语言.为软件开发的所有阶段提供模型化和 ...
- 解决`向github提交代码是老要输入用户名密码`
在命令行输入命令:git config --global credential.helper store☞ 这一步会在用户目录下的.gitconfig文件最后添加: [credential] help ...
- LVS的NAT模式测试
dir 分别配置ip eth0 :10.222.138.200 eth0:1 10.222.21.190 rs1 eth0 :10.222.138.201 rs2 eth0: 10.222.1 ...
- 拥抱.NET Core系列:MemoryCache 缓存过期
在上一篇"拥抱.NET Core系列:MemoryCache 初识"中我们基本了解了缓存的添加.删除.获取,那么今天我们来看看缓存的过期机制.这里和上篇一样将把"Micr ...