今天就来换点新鲜的, 也许对某些人有点帮助.....
也许bar chart很多人都会做了, 但是pie chart就挺麻烦的, 不会3D的话怎么办呢.. 在这里就教你们一个仿3D的方法做个pie chart骗吃吧 :p
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<angleB.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附带字典的说明
}
