本文详细的介绍了FLASH饼状图的制作方法,手把手教会您.
以下讨论的是和饼状图相关的调用xml进行flash动态饼状图的制作 教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:
效果有参考一下国外的饼图,不过他的代码,注释等我也看不懂,英文不懂,所以我就写个中文的好了。大家完全可以根据我的代码改出更多的效果来。编程水平有限,大家谅解一下,不过能正常运行。
http://www.yes028.com/amu/ok.swf
增加了xml配置文件,可以直接修改xml文件以达到直接使用的目的。
默认数据来源为piedata.xml但是可以在页面中修改这个数据来源。
如下:
在代码中swf文件名后加上参数?piedata=piedata.asp则可以修改数据来源为piedata.asp。
代码一次发不下,下面回贴再发。
以下是引用片段: //缩放舞台并不缩放内容,将内容定位于舞台的左上角; Stage.align = "TL"; Stage.scaleMode = "noScale"; _quality = "BEST"; import mx.transitions.Tween; import mx.transitions.easing.*; //全局 //所有数据 var pie_num:String = "20,15,8,50,55,100,100,190"; //所有数据名称 var pie_name:String = "四川,重庆,云南,贵州,山西,湖南,上海,北京,广州"; //是否显示数据名称与百分比值 var show_name:String = "true,false,false,true,false,true,true,true" //所有颜色 var colorstr:String = "0xFF0F00,0xFF6600,0xFF9E01,0xFCD202,0xF8FF01,0xB0DE09,0x04D215,0x0D8ECF,0xFF1F11"; //所有开始位置 var defaultsate:String = "false,false,false,false,false,false,false,true"; //公共变量 x0 = 210;//圆点坐标x(数字) y0 = 135;//圆点坐标y(数字) z = 150;//圆长轴(>0) d = 90;//圆短轴(>0) w = 150;//环宽(>0,<长轴) h = 20;//饼高(>=0) movew = 15;//移动距离(>0) alpha = 100;//点击之后的透明度(0-100) mcalpha = 100;//默认所有开始透明度(0-100) showorder = true;//是否显示竖向排列表(true,false) orderx = 400;//竖向排列表起始x(数字) ordery = 70;//竖向排列表起始y(数字) orderxy = 6;//竖向排列表竖向间隔(>0) linecolor = 0xcccccc;//指示线颜色(十六进制颜色) linealpha = 100;//指示线透明度(0-100) titleline = 20; //指示线长度(>0 || 0<) fontcolor = 0xFF0000;//文字颜色(十六进制颜色) percentshow = "font";//是否显示百分值四个值(font文字,num百分值,all都显示,none不显) orderfontcolor = 0x222222;//左边竖向排列文字颜色(十六进制颜色) dark = 1.43;//深色系数(>1如1.43默认) //以下为三个饼图示例 //第一个参数为影片名,第二个为深度群 drawpie("amu",1, pie_num,pie_name,titleline,linecolor,linealpha,orderfontcolor,percentshow,fontcolor,colorstr,defaultsate,show_name, x0,y0,z,d,w,h,movew,alpha,mcalpha,dark, showorder,orderx,ordery,orderxy); drawpie("vapr",2, "15,30,60,90","好,不好,一般,差,太差了",0,0xcccccc,0,0x000000,"all",0x666666,"0x0D8ECF,0x04D215,0xB0DE09,0xF8FF01,0xFF9E01,0xFF6600,0xFF1F11","true,true,false,false","true,true,true,false", 160,380,70,70,50,2,15,100,100,1.5, true,20,340,13); drawpie("kiss",3, "30,50,290,70,50,10","Flash,Html,Javascript,Asp,PHP,C#",10,0x999999,100,0x000000,"none",0xff6600,"0x0D8ECF,0x04D215,0xB0DE09,0xF8FF01,0xFF9E01,0xFF6600,0xFF1F11","false,false,false,false,false,false,false","false,false,false,false,false,false,false", 470,300,100,60,60,20,15,50,100,1.15, false,280,250,28); drawpie("kisss",4, "242,332,171,116,106,224","Flash,Html,Javascript,Asp,PHP,C#",10,0x999999,100,0x000000,"all",0xff6600,"0x0D8ECF,0x04D215,0xB0DE09,0xF8FF01,0xFF9E01,0xFF6600,0xFF1F11","false,false,false,false,false,false,false","true,true,true,true,true,true,true", 370,520,60,40,40,10,15,50,100,1.15, true,515,480,3); function drawpie(mcname:String, depth:Number, pie_num:String, pie_name:String, titleline:Number, linecolor:Number,linealpha:Number, orderfontcolor:Number,percentshow:String, fontcolor:Number, colorstr:String, defaultsate:String, show_name:String, x0:Number, y0:Number, z:Number, d:Number, w:Number, h:Number, movew:Number, alpha:Number, mcalpha:Number, dark:Number, showorder:Boolean, orderx:Number, ordery:Number, orderxy:Number):Void{ arr_n = pie_num.split(","); arr_total=0; for(m=0;m } var arr_name = new Array(); arr_name = pie_name.split(","); var arr_showname = new Array(); arr_showname = show_name.split(","); var arr_num = new Array(); var arr_percent = new Array(); duof = 0; for(m=0;m duo = 360-duof; arr_num[m]= duo.toString(); }else{ duo = Math.round((Number(arr_n[m])*360)/arr_total); duof = duof+duo; arr_num[m]= duo.toString(); } arr_percent[m] = Math.round((Number(arr_n[m])*100)/arr_total*100)/100; } //分割数据 var arr_color = colorstr.split(","); var arr_defaultstate = defaultsate.split(","); //所有扇环的中间度 var arr_middle:Array = new Array(); //生成所有的扇环的中间度,用来确定深度 var xx:Number=-90; var arr_a:Array = new Array();//记录每一扇环的开始度与结束度 for(m=0; m a=Number(a0)+Number(arr_num[m]); arr_a.push([a0,a]); xx=a; if(a-a0>180){ arr_middle[m] = 0.001; }else{ if((a-a0)/2+a0<=180 && (a-a0)/2+a0>=0){ //本mc的中间角度与90度的差值(这儿我们确定谁与90度差值的绝对值最小就排在最前面) arr_middle[m] = Math.abs(90-((a-a0)/2+a0)); }else if((a-a0)/2+a0>180 && (a-a0)/2+a0<=270){ arr_middle[m] = (Math.abs((a-a0)/2+a0-180)+500); //本mc的中间角度与180度的差值(这儿我们确定谁与90度差值的绝对值最大就排在最前面) }else if((a-a0)/2+a0>=-90 && (a-a0)/2+a0<0){ arr_middle[m] = (Math.abs((a-a0)/2+a0-360)+500); //本mc的中间角度与270度的差值(这儿我们确定谁与90度差值的绝对值最大就排在最前面) } } //trace(m+":"+arr_middle[m]); } //trace(arr_a[0][0]); //扇环排序 arr_middle = arr_middle.sort(Array.NUMERIC|Array.RETURNINDEXEDARRAY);//重排序,让原来的数组值从小到大排列,但数组的索引不变。 //arr_middle.reverse(); // for(m = 0; m if(showorder){ _root.createEmptyMovieClip(mcname+arr_middle[m]+"icon_mc",(5-m)*22+depth*10+1); mc = this[mcname+arr_middle[m]+"icon_mc"]; color = parseInt(arr_color[arr_middle[m]]); beginx = orderx; beginy = ordery; jianxy = orderxy+12; mc.beginFill(color, 100); mc.lineStyle(1, darkcolor(color,dark), 100, true, "none"); mc.moveTo(beginx,arr_middle[m]*jianxy+beginy); mc.lineTo(beginx+12,arr_middle[m]*jianxy+beginy); mc.lineTo(beginx+12,arr_middle[m]*jianxy+beginy+12); mc.lineTo(beginx,arr_middle[m]*jianxy+beginy+12); mc.endFill(); var label:TextField = mc.createTextField("label", 1, beginx+16, arr_middle[m]*jianxy+beginy-3, 0, 0); label.html = true; label.autoSize = "left"; label.htmlText = arr_name[arr_middle[m]]; var myformat:TextFormat = new TextFormat(); myformat.font = "Verdana"; myformat.size = 12; myformat.color = orderfontcolor; label.setTextFormat(myformat); } //--------------------------------------------------------------------- _root.createEmptyMovieClip(mcname+arr_middle[m]+"_mc",(5-m)*22+depth*10); //当前m应算为arr_middle[m]; drawCircle(this[mcname+arr_middle[m]+"_mc"], x0, y0, z, d, arr_a[arr_middle[m]][0], arr_a[arr_middle[m]][1], h, w, parseInt(arr_color[arr_middle[m]]), movew,alpha,mcalpha,arr_defaultstate[arr_middle[m]], arr_percent[arr_middle[m]],arr_name[arr_middle[m]],arr_showname[arr_middle[m]], titleline,linecolor,linealpha,fontcolor,percentshow,dark, this[mcname+arr_middle[m]+"icon_mc"]); this[mcname+arr_middle[m]+"_mc"]._alpha=mcalpha; //--------------------------------------------------------------------- //让点击竖向排列时的效果和点击pie时一样。 if(showorder){ mc.onRelease = this[mcname+arr_middle[m]+"_mc"].onRelease; } } } |
所有代码放到影片的时间轴上的一帧中就可以了。
关于调用xml进行flash动态饼状图的制作的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/
a/2008091155227.shtml方便下次再访问哦。