CanQue@RSSIDEA » as2.0绘制饼图类

as2.0绘制饼图类

Published by canque on March 20, 2007 02:18 pm under [flash] Tags: actionscript, flash

饼图因为能直观的表现数据比例，所以被广泛的应用。

这个程序的核心部分不是我写的，具体可以看http://www.blueidea.com/tech/multimedia/2007/4540.asp

本类就是在amu945基础上修改所得，还很不完善，但是就像原作者所说——可以用，希望您喜欢。

主要修改为：
1 将代码整理成类，规范了代码
2 引入XpathAPI,提高数据配置的灵活性
3 设定数据初值，防止出错

使用方法：
xml数据文件

PLAIN TEXT

XML:

<?xml version="1.0" encoding="utf-8"?>
<root>
<config x0="210" y0="135" z="150" d="90" w="150" h="20" movew="15" alpha="100" mcalpha="100" showorder="true" orderx="480" ordery="70" orderxy="40" linecolor="0xcccccc" linealpha="100" titleline="20" fontcolor="0xFF0000" percentshow="font" orderfontcolor="0x222222"/>
<vote pieNum="20" pieName="四川" showName="true" colorString="0xFF0F00" defaultState="false"/>
<vote pieNum="15" pieName="重庆" showName="true" colorString="0xFF6600" defaultState="false"/>
<vote pieNum="8" pieName="湖南" showName="true" colorString="0xFCD202" defaultState="true"/>
</root>

具体参数为：
x0，y0圆心坐标；
w1，w2为长短轴；
a0为开始度数，a为结束度数，
h为高, hw为环宽，
color为十六进制颜色,
movew为移动距离,
alpha为透明度（点击之后），mcalpha为原始透明度，
titleline显示名称与值的长短位置，linecolor指示线颜色,linealpha指示线透明度，
fontcolor文字颜色，percentshow是否显示百分比值，dark深色系数(>1如1.43),
defaultState为确定默认载入时是否移动出去，
pieNum为数值，pieName为名称，showName确定是否显示名称与值。

然后在Action面板中写入：

PLAIN TEXT

Actionscript:

import Caky.as;
var mc:MovieClip=_root.createEmptyMovieClip("mc",_root.getNextHighestDepth());
var myCaky:Caky=new Caky(mc,"aaa.xml");

发布完成就可以了。
饼图演示

类代码：

PLAIN TEXT

Actionscript:

/*
Class Name:Caky
update:2007,3,18
coder:amu945(http://www.myvapor.com/web)
残缺(http://www.rssidea.com)
*/
import mx.transitions.Tween;
import mx.transitions.easing.*;
import mx.xpath.XPathAPI;
class Caky {
private var voteArray:Array = new Array();
public function Caky(mc:MovieClip, xmlFile:String) {
var thisObj = this;
var xmlObj:XML = new XML();
xmlObj.ignoreWhite = true;
xmlObj.onLoad = function(success:Boolean) {
if (success) {
var votePath:String = "/root/vote";
var configPath:String = "/root/config";
var tempArray:Array = XPathAPI.selectNodeList(this.firstChild, votePath);
var configNode:XMLNode = XPathAPI.selectSingleNode(this.firstChild, configPath);
var configObj:Object = configNode.attributes;
for (var i:Number = 0; i<tempArray.length; i++) {
var tempObj:Object = tempArray[i].attributes;
thisObj.voteArray[i]=tempObj;
}
delete this;
thisObj.drawPie(mc, "test", mc.getNextHighestDepth(), thisObj.voteArray, configObj);
} else {
trace("loading xml error! Do please check your net connection!");
}
};
xmlObj.load(xmlFile);
}
private function drawPie(targetMc:MovieClip, mcName:String, depth:Number, voteArray:Array, configObj:Object):Void {
//读取vote数据
var voteNameArray:Array = new Array(), voteNumArray:Array = new Array(), isShowNameArray:Array = new Array(), arr_color:Array = new Array(), stateArray:Array = new Array();
var voteTotal:Number = 0;
for (var i:Number = 0; i<voteArray.length; i++) {
voteNameArray[i] = voteArray[i].pieName || "未标题";
voteNumArray[i] = Number(voteArray[i].pieNum) || 0;
arr_color[i] = voteArray[i].colorString || 0x000000;
voteTotal += voteNumArray[i];
isShowNameArray[i] = (voteArray[i].showName == "true") ? true : false;
stateArray[i] = (voteArray[i].defaultState == "true") ? true : false;
}
//加载配置选项
var x0:Number = Number(configObj.x0)||0;
var y0:Number = Number(configObj.y0)||0;
var z:Number = Number(configObj.z)||100;
var d:Number = Number(configObj.d)||60;
var w:Number = Number(configObj.w)||150;
var h:Number = Number(configObj.h)||20;
var movew:Number = Number(configObj.movew)||15;
var alpha:Number = Number(configObj.alpha)||100;
var mcalpha:Number = Number(configObj.mcalpha)||100;
var showorder:Boolean = configObj.showorder=="true"?true:false;
var orderx:Number = Number(configObj.orderx)||250;
var ordery:Number = Number(configObj.ordery)||10;
var orderxy:Number = Number(configObj.orderxy)||5;
var linecolor:Number = Number(configObj.linecolor)||0x666666;
var linealpha:Number = Number(configObj.linealpha)||80;
var titleline:Number = Number(configObj.titleline)||0x333333;
var fontcolor:Number = Number(configObj.fontcolor)||0x000000;
var percentshow:String = configObj.percentshow;
var orderfontcolor:Number = Number(configObj.orderfontcolor)||0x000000;
var dark:Number = Number(configObj.dark)||1.4;
//计算百分比值
var arr_percent:Array = new Array(), arr_num:Array = new Array();
var duof:Number = 0, duo:Number = 0;
for (var m:Number = 0; m<voteNumArray.length; m++) {
if (m == voteNumArray.length-1) {
duo = 360-duof;
arr_num[m] = duo.toString();
} else {
duo = Math.round((Number(voteNumArray[m])*360)/voteTotal);
duof = duof+duo;
arr_num[m] = duo.toString();
}
arr_percent[m] = Math.round((Number(voteNumArray[m])*100)/voteTotal*100)/100;
}
//所有扇环的中间度
var arr_middle:Array = new Array();
//生成所有的扇环的中间度，用来确定深度
var xx:Number = -90, a0:Number, a:Number;
var arr_a:Array = new Array();
//记录每一扇环的开始度与结束度
for (m=0; m<arr_num.length; m++) {
a0 = xx;
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度差值的绝对值最大就排在最前面）
}
}
}
//扇环排序
arr_middle = arr_middle.sort(Array.NUMERIC | Array.RETURNINDEXEDARRAY);
//重排序，让原来的数组值从小到大排列，但数组的索引不变。
for (var m:Number = 0; m<arr_middle.length; m++) {
//绘出竖向方块链接------------------------------------------------------------------------
if (showorder) {
targetMc.createEmptyMovieClip(mcName+arr_middle[m]+"icon_mc", (5-m)*22+depth*10+1);
var mc:MovieClip = targetMc[mcName+arr_middle[m]+"icon_mc"];
var color:Number, beginx:Number, beginy:Number, jianxy:Number;
color = parseInt(arr_color[arr_middle[m]]);
beginx = orderx;
beginy = ordery;
jianxy = orderxy+12;
mc.beginFill(color, 100);
mc.lineStyle(1, this.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 = voteNameArray[arr_middle[m]];
var myformat:TextFormat = new TextFormat();
myformat.font = "Verdana";
myformat.size = 12;
myformat.color = orderfontcolor;
label.setTextFormat(myformat);
}
//---------------------------------------------------------------------
targetMc.createEmptyMovieClip(mcName+arr_middle[m]+"_mc", (5-m)*22+depth*10);
//当前m应算为arr_middle[m];
this.drawCircle(targetMc[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, stateArray[arr_middle[m]], arr_percent[arr_middle[m]], voteNameArray[arr_middle[m]], isShowNameArray[arr_middle[m]], titleline, linecolor, linealpha, fontcolor, percentshow, dark, targetMc[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;
}
}
}
/*
mc为影片名。
x0，y0圆心坐标；w1，w2为长短轴；a0为开始度数，a为结束度数，h为高, hw为环宽，color为十六进制颜色,
movew为移动距离,alpha为透明度（点击之后），mcalpha为原始透明度,movenow为确定默认载入时是否移动出去，
valuepercent为百分比值，arr_name为每项名称，arr_showname确定是否显示名称与值，
titleline显示名称与值的长短位置，linecolor指示线颜色,linealpha指示线透明度，fontcolor文字颜色，percentshow是否显示百分比值，dark深色系数(>1如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 {
var step:Number, leichang:Number, leiduan:Number, hicolor:Number, k:Number;
var thisObj = this;
//加减间隔度
step = 1;
//求内长短轴
leichang = w1-hw;
leiduan = w2-(hw*w2/w1);
//深色
hicolor = this.darkColor(color, dark);
//---------------------------------
//下面为下面环;
mc.beginFill(color, 100);
//mc.lineStyle(1, color, 100, false, "none");
//外边
mc.moveTo(this.getPoint(x0, y0+h, w1, w2, a0).x, this.getPoint(x0, y0+h, w1, w2, a0).y);
k = a0;
while (k<a) {
k += step;
mc.lineTo(this.getPoint(x0, y0+h, w1, w2, k).x, this.getPoint(x0, y0+h, w1, w2, k).y);
}
//侧边1
mc.lineTo(this.getPoint(x0, y0+h, leichang, leiduan, k).x, this.getPoint(x0, y0+h, leichang, leiduan, k).y);
//内边
while (k>a0) {
k -= step;
mc.lineTo(this.getPoint(x0, y0+h, leichang, leiduan, k).x, this.getPoint(x0, y0+h, leichang, leiduan, k).y);
}
//侧边2
mc.lineTo(this.getPoint(x0, y0+h, leichang, leiduan, a0).x, this.getPoint(x0, y0+h, leichang, leiduan, a0).y);
mc.endFill();
//--------------------------------
//下边高
//下边外侧边高
if (a0<=0 && a>=0 && a<=180) {
//解决90度时外侧面，显示事实为90度，实际为0度，因为我们整个旋转了-90度；
mc.beginFill(hicolor, 100);
mc.moveTo(this.getPoint(x0, y0+h, w1, w2, a0).x, this.getPoint(x0, y0+h, w1, w2, a0).y);
k = a0;
while (k<0) {
k += step;
mc.lineTo(this.getPoint(x0, y0+h, w1, w2, k).x, this.getPoint(x0, y0+h, w1, w2, k).y);
}
mc.lineTo(this.getPoint(x0, y0, w1, w2, 0).x, this.getPoint(x0, y0, w1, w2, 0).y);
while (k>a0) {
k -= step;
mc.lineTo(this.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, this.getPoint(x0, y0+h, w1, w2, 0).y);
k = 0;
while (k<a) {
k += step;
mc.lineTo(this.getPoint(x0, y0+h, w1, w2, k).x, this.getPoint(x0, y0+h, w1, w2, k).y);
}
mc.lineTo(this.getPoint(x0, y0, w1, w2, a).x, this.getPoint(x0, y0, w1, w2, a).y);
while (k>0) {
k -= step;
mc.lineTo(this.getPoint(x0, y0, w1, w2, k).x, this.getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
} else if (a>=180 && a0<=180 && a0>=0) {
//解决180度时外侧面，显示事实为270度，实际为180度，因为我们整个旋转了-90度；
mc.beginFill(hicolor, 100);
mc.moveTo(this.getPoint(x0, y0+h, w1, w2, a0).x, this.getPoint(x0, y0+h, w1, w2, a0).y);
k = a0;
while (k<180) {
k += step;
mc.lineTo(this.getPoint(x0, y0+h, w1, w2, k).x, this.getPoint(x0, y0+h, w1, w2, k).y);
}
mc.lineTo(this.getPoint(x0, y0, w1, w2, 180).x, this.getPoint(x0, y0, w1, w2, 180).y);
while (k>a0) {
k -= step;
mc.lineTo(this.getPoint(x0, y0, w1, w2, k).x, this.getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
mc.beginFill(hicolor, 100);
mc.moveTo(this.getPoint(x0, y0+h, w1, w2, 180).x, this.getPoint(x0, y0+h, w1, w2, 180).y);
k = 180;
while (k<a) {
k += step;
mc.lineTo(this.getPoint(x0, y0+h, w1, w2, k).x, this.getPoint(x0, y0+h, w1, w2, k).y);
}
mc.lineTo(this.getPoint(x0, y0, w1, w2, a).x, this.getPoint(x0, y0, w1, w2, a).y);
while (k>180) {
k -= step;
mc.lineTo(this.getPoint(x0, y0, w1, w2, k).x, this.getPoint(x0, y0, w1, w2, k).y);
}
mc.endFill();
} else if (a0<=0 && a>=180) {
//解决同时处于0度和180度的情况
mc.beginFill(hicolor, 100);