先发效果,效果有参考一下国外的饼图,不过他的代码,注释等我也看不懂,英文不懂,所以我就写个中文的好了。大家完全可以根据我的代码改出更多的效果来。
编程水平有限,大家谅解一下,不过能正常运行。
http://www.blueidea.com/articleimg/2007/03/4540/ok.swf
数据来源于xml配置文件,可以直接修改xml文件以达到直接使用的目的。默认数据来源为piedata.xml但是可以在页面中修改这个数据来源。如下:
代码拷贝框
[Ctrl+A 全部选择 然后拷贝]
在代码中swf文件名后加上参数?piedata=piedata.asp则可以修改数据来源为piedata.asp。
其实原理也不难,先画个圆(扇形)做上表面,然后分别画出两个侧面和一个曲面,最后画底下的圆(扇形)。一个立体的小扇形就出来了。让他们一起拼在一起就成了饼图嘛。只有一点比较烦就是确定每一个扇形的深度,好让他们在视学上看起来处于正常的前后关系位置。在这儿,我想了一个法子。
先算出当前扇形的中间度数,看这个度数是否在水平线以下,是的话就看这个度数与垂直方向的角度,角度最小的在最前面,最大的在最后面,如果中间度数在水平线以上,那么则与中间度数在水平线以下的相反。这儿要注意的是必须要从正上方作为0度,开始计算。
下面是源文件,所有代码放到影片的时间轴上的一帧中就可以了。
代码拷贝框
//缩放舞台并不缩放内容,将内容定位于舞台的左上角;
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,=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 || 01如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;m180){
arr_middle[m] = 0.001;
}else{
if((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=-90 && (a-a0)/2+a01如1.43)
本pie对应竖向排列方块mc名。
*/
function drawCircle(mc:MovieClip,
x0:Number, y0:Number, w1:Number, w2:Number, a0:Number, a:Number, h:Number, hw:Number, color:Number,
movew:Number, alpha:Number, mcalpha:Number, movenow:String,
valuepercent:Number, arr_name:String, arr_showname:String,
titleline:Number, linecolor:Number,linealpha:Number, fontcolor:Number,percentshow:String,dark:Number,
ordermc:MovieClip):Void {
//加减间隔度
step = 1;
//求内长短轴
leichang = w1-hw;
leiduan = w2-(hw*w2/w1);
//深色
hicolor = darkcolor(color,dark);
//---------------------------------
//下面为下面环;
mc.beginFill(color, 100);
//mc.lineStyle(1, color, 100, false, "none");
//外边
mc.moveTo(getPoint(x0, y0+h, w1, w2, a0).x, getPoint(x0, y0+h, w1, w2, a0).y);
k = a0;
while (ka0) {
k -= step;
mc.lineTo(getPoint(x0, y0+h, leichang, leiduan, k).x, getPoint(x0, y0+h, leichang, leiduan, k).y);
}
//侧边2
mc.lineTo(getPoint(x0, y0+h, leichang, leiduan, a0).x, getPoint(x0, y0+h, leichang, leiduan, a0).y);
mc.endFill();
//--------------------------------
//下边高
//下边外侧边高
if(a0=0 && aa0){
k -=step;
mc.lineTo(getPoint(x0, y0, w1, w2, k).x, getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
mc.beginFill(hicolor, 100);
mc.moveTo(getPoint(x0, y0+h, w1, w2, 0).x, getPoint(x0, y0+h, w1, w2, 0).y);
k=0;
while (k0){
k -=step;
mc.lineTo(getPoint(x0, y0, w1, w2, k).x, getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
}else if(a>=180 && a0=0){
//解决180度时外侧面,显示事实为270度,实际为180度,因为我们整个旋转了-90度;
mc.beginFill(hicolor, 100);
mc.moveTo(getPoint(x0, y0+h, w1, w2, a0).x, getPoint(x0, y0+h, w1, w2, a0).y);
k=a0;
while (ka0){
k -=step;
mc.lineTo(getPoint(x0, y0, w1, w2, k).x, getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
mc.beginFill(hicolor, 100);
mc.moveTo(getPoint(x0, y0+h, w1, w2, 180).x, getPoint(x0, y0+h, w1, w2, 180).y);
k=180;
while (k180){
k -=step;
mc.lineTo(getPoint(x0, y0, w1, w2, k).x, getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
}else if(a0=180){
//解决同时处于0度和180度的情况
mc.beginFill(hicolor, 100);
mc.moveTo(getPoint(x0, y0+h, w1, w2, a0).x, getPoint(x0, y0+h, w1, w2, a0).y);
k=a0;
while (ka0){
k -=step;
mc.lineTo(getPoint(x0, y0, w1, w2, k).x, getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
mc.beginFill(hicolor, 100);
mc.moveTo(getPoint(x0, y0+h, w1, w2, 0).x, getPoint(x0, y0+h, w1, w2, 0).y);
k=0;
while (k0){
k -=step;
mc.lineTo(getPoint(x0, y0, w1, w2, k).x, getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
mc.beginFill(hicolor, 100);
mc.moveTo(getPoint(x0, y0+h, w1, w2, 180).x, getPoint(x0, y0+h, w1, w2, 180).y);
k=180;
while (k180){
k -=step;
mc.lineTo(getPoint(x0, y0, w1, w2, k).x, getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
}else{
mc.beginFill(hicolor, 100);
mc.moveTo(getPoint(x0, y0+h, w1, w2, a0).x, getPoint(x0, y0+h, w1, w2, a0).y);
k = a0;
while (ka0) {
k -= step;
mc.lineTo(getPoint(x0, y0, w1, w2, k).x, getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
}
//下边开始侧面高
mc.beginFill(hicolor, 100);
//mc.lineStyle(1, hicolor, 100, false, "none");
mc.moveTo(getPoint(x0, y0+h, w1, w2, a0).x, getPoint(x0, y0+h, w1, w2, a0).y);
mc.lineTo(getPoint(x0, y0+h, leichang, leiduan, a0).x, getPoint(x0, y0+h, leichang, leiduan, a0).y);
mc.lineTo(getPoint(x0, y0, leichang, leiduan, a0).x, getPoint(x0, y0, leichang, leiduan, a0).y);
mc.lineTo(getPoint(x0, y0, w1, w2, a0).x, getPoint(x0, y0, w1, w2, a0).y);
mc.endFill();
//下面结束侧面高
mc.beginFill(hicolor, 100);
//mc.lineStyle(1, hicolor, 100, false, "none");
mc.moveTo(getPoint(x0, y0+h, w1, w2, a).x, getPoint(x0, y0+h, w1, w2, a).y);
mc.lineTo(getPoint(x0, y0+h, leichang, leiduan, a).x, getPoint(x0, y0+h, leichang, leiduan, a).y);
mc.lineTo(getPoint(x0, y0, leichang, leiduan, a).x, getPoint(x0, y0, leichang, leiduan, a).y);
mc.lineTo(getPoint(x0, y0, w1, w2, a).x, getPoint(x0, y0, w1, w2, a).y);
mc.endFill();
//下面内侧面高
mc.beginFill(hicolor, 100);
//mc.lineStyle(1, hicolor, 100, false, "none");
mc.moveTo(getPoint(x0, y0+h, leichang, leiduan, a0).x, getPoint(x0, y0+h, leichang, leiduan, a0).y);
k = a0;
while (ka0) {
k -= step;
mc.lineTo(getPoint(x0, y0, leichang, leiduan, k).x, getPoint(x0, y0, leichang, leiduan, k).y);
}
mc.endFill();
//---------------------------------
//下面为上面环;
mc.beginFill(color, 100);
//mc.lineStyle(1, color, 100, false, "none");
//外边
mc.moveTo(getPoint(x0, y0, w1, w2, a0).x, getPoint(x0, y0, w1, w2, a0).y);
k = a0;
while (ka0) {
k -= step;
mc.lineTo(getPoint(x0, y0, leichang, leiduan, k).x, getPoint(x0, y0, leichang, leiduan, k).y);
}
//侧边2
mc.lineTo(getPoint(x0, y0, leichang, leiduan, a0).x, getPoint(x0, y0, leichang, leiduan, a0).y);
mc.endFill();
//--------------------------------------显示名称与值
if(arr_showname=="true"){
mc.beginFill(color, 100);
mc.lineStyle(1, linecolor, linealpha);
mc.moveTo(getPoint(x0, y0, w1, w2, a0+(a-a0)/2).x,getPoint(x0, y0, w1, w2, a0+(a-a0)/2).y);
mc.lineTo(getPoint(x0, y0, w1+titleline, w2+(w2*titleline)/w1, a0+(a-a0)/2).x,getPoint(x0, y0, w1+titleline, w2+(w2*titleline)/w1, a0+(a-a0)/2).y);
mc.endFill();
//trace(mc._name+":"+(a0+(a-a0)/2));
if(a0+(a-a0)/2>0 && a0+(a-a0)/290 && a0+(a-a0)/2180 && a0+(a-a0)/2-90 && a0+(a-a0)/2
[Ctrl+A 全部选择 然后拷贝]
源文件打包下载
flashpie.rar
本文转自:http://www.5uflash.com/flashjiaocheng/Flashyingyongkaifa/660.html