[教程]圆形分格统计图表

super-tomato

今天就来换点新鲜的, 也许对某些人有点帮助.....
也许bar chart很多人都会做了, 但是pie chart就挺麻烦的, 不会3D的话怎么办呢.. 在这里就教你们一个仿3D的方法做个pie chart骗吃吧 :p
这个仿3D的效果就是使用"遮照"达成, 可以看看这里的效果, 是否有兴趣继续下去




作者 ：Super-Tomato

步骤1 : 首先当然是弄个3D的pie chart图片汇入到Flash中(方法很多, 最简单的方法就是使用swift 3d软件)




步骤2 : 把汇入的pie chart转换成MC组件, 然后在Library(ctrl+L)设定linkage名为pie





步骤3 : 在第一帧输入
var angleA = new Array(0, 120, 280); //这里是我自己设定的, 你们可以通过计算设定扇形的开始和结束(angleB), 这里就不用写出来了吧.. 动一下脑筋就ok
var angleB = new Array(120, 280, 360);
var radius = 100; //这里是你们饼图片的半径
initial();
function initial() {
for (var i = 0; i<angleA.length; i++) {
attachMovie("pie", "pie"+i, i); //引用library中的pie chart
_root["pie"+i]._x = 200;
_root["pie"+i]._y = 200;
createEmptyMovieClip("mask"+i, i+angleA.length); //因为我的例子有三个扇形所以就制做3个遮照和3个pie
_root["mask"+i]._x = _root["pie"+i]._x;
_root["mask"+i]._y = _root["pie"+i]._y-15;
Draw(angleA[i ], angleB[i ], i); //开始画出所要遮照的范围
_root["pie"+i].setMask(_root["mask"+i]); //进行遮照
setHue(Math.floor(Math.random()*0xFFFFFF), i); //随机数决定三个扇形的颜色
}
}
function Point(Angle) {
var pt = new Object();
pt.x = radius*Math.cos((Math.PI/180)*Angle);
pt.y = (0.5)*radius*Math.sin((Math.PI/180)*Angle);
return pt;
}
function Draw(angleA, angleB, depth) {
_root["mask"+depth].createEmptyMovieClip("drawer", 0);
with (_root["mask"+depth].drawer) {
beginFill(0xFFFFFF, 30);
pt1 = Point(angleA); //这里会回传弧度上"相对"(angleA)的坐标, 详细可以参考圆形的教程
lineTo(pt1.x, pt1.y); //从中心点画线到回传的坐标上
if (pt1.y<=0) { //判断此点的坐标是属于-180方向还是180方向而第一下一步需要画线的y坐标
lineTo(2*pt1.x, 2*pt1.y);
} else {
lineTo(pt1.x, pt1.y+50);
}
var tempAngle = angleA+10;
while (tempAngle<angleB) { //从上一个开始坐标开始进行弧度的联机
tempPt = Point(tempAngle);
lineTo(2*tempPt.x, 2*tempPt.y);
tempAngle += 10;
}
pt2 = Point(angleB); //回传弧度结束的坐标
if (pt2.y<=0) {
lineTo(2*pt2.x, 2*pt2.y);
} else {
lineTo(pt2.x, pt2.y+50);
}
lineTo(pt2.x, pt2.y);
endFill();
}
}
function setHue(rgb, depth) { //这个上色步骤看起来虽然简单, 但却是精髓部份
c = new Color(_root["pie"+depth]);
cv = rgb;
r = (cv >> 16)/2; //这里接下来3步骤开始设定RGB光暗部份
g = ((cv >> 8) & (0xFF))/2;
b = (cv & 0xFF)/2;
c.setTransform({ra:r, ga:g, ba:b, rb:0, gb:0, bb:0, aa:100, ab:0}); //实现光暗部份, 可以参考Flash附带字典的说明
}



[ Last edited by super-tomato on 20-12-2004 at 04:46 AM ]

[ 本帖最后由 super-tomato 于 4-3-2007 03:12 AM 编辑 ]

tensaix2j

super-tomato

抱歉，没检查到这里对[i]敏感，所以之前贴出的代码少了[i]的符号。。
那么你使用我提供的原文件试试看吧

emilccp

想问一下，这些运算法
有什么资料可以学习呢
看起来好像很方便，但又觉得
使用方面不是很广，可能在网页上使用比较多
但实际在flash动画类就很少是吗？
super-tomato你通常都是做什么会用到这些运算的？

super-tomato

你说的学习资料是指什么呢？
如果是指计算方面的学习的话，应该会蛮难找到教程。。
因为这些计算在中学的数学或物理课就有学习到了，所以一般的网站是不会附带数学教程的
在动画方面更加少会使用到。。。 一般AS的使用方法都是在结构性上的创建
例如可以使用编写好的AS创建菜单，组建等。。。当然在游戏方面就更加不用说了
在目前精明老板下的网页设计员，工作范围当然不可能就只有设计，编程也是不可或缺的
学多一样也只会让自己的饭碗多稳定一些

emilccp

谢谢指导哦~
等我在AS方面有疑问时在请教你哦~
这些都不是我的工作，只是有兴趣罢了，呵呵

super-tomato

呵呵，flash也只是我的业余爱好罢了。。。所以大家一起切磋吧

hahabin

呵呵不错。
加分兼精华
好厉害。
我会试下。。。 不会的话问你。

miss tomato... i cant see ur picture... can u upload n show again...