zoukankan      html  css  js  c++  java
  • 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、设计结果



  • 相关阅读:
    python的性能了解
    工作记录01/17/11
    继承或者重写django的user model?
    dunder=double underscore
    ipython应该是个好的命令行式的python ide,不过现在没时间折腾。
    django的settings如何在不同环境下进行切换
    pythonic实践
    关于递归函数的简单认识
    数据结构(C语言版)链表相关操作算法的代码实现
    数据结构(C语言版)顺序栈相关算法的代码实现
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13315368.html
Copyright © 2011-2022 走看看