一个纯粹的用actionscripts编写的立体统计图
(2006年3月6日) 回首页
as代码 如下,随便建一个flash文件,把这个代码贴入第一桢中,然后编译生成swf文件即可。
CODE
/* 停止影片播放 */
stop();
var CopyRightText;
var CR;
/* 需要使用到的变量定义 */
var ThisWidth = 600; // 本flash场景宽度
var ThisHeight = 400; // 本flash场景高度
var BgLeftMargin = 60; // 图形部分背景离flash左侧距离
var BgRightMargin = 20; // 图形部分背景离flash右侧距离
var BgTopMargin = 20; // 图形部分背景离flash顶端距离
var BgBottomMargin = 60; // 图形部分背景离flash下部距离
var BgDepth = 1; // 图形部分背景的起始深度
var BgFromColor = 0xECECEA; // 背景渐变的前景颜色
var BgToColor = 0xBFBFBC; // 背景渐变的背景颜色
var RowColLineColor = "0x1B4E56"; // 边框及标尺颜色
var BgLineColor = "0x000000"; // 背景上横线颜色
var CartData; // 通过.swf?传递过来的变量
var CartMark; // 通过.swf?传递过来的变量
var NumList; // 以逗号隔开的字符串
var RemarkList; // 以逗号隔开的字符串
// 给变量赋予默认值
CopyRightText = (CR == "" || CR == undefined) ? "www.okooo.com" : CR; // 版权信息
NumList = (CartData == "" || CartData == undefined) ? "300,100,1300,2300,500,1700,2000,3280,1020,2000,200,100,100,100" : CartData;
RemarkList = (CartMark == "" || CartMark == undefined) ? "B,y, ,S,u,p,e,r,s,p,i,c,e, ,感,谢,使,用, ,太,长,了, ,拖,那,么,长, ,你,好,无,聊,啊" : CartMark;
var BarSpaceRate = 2; // 柱状图形和其中间距离的比例
var BarHeightRate = 5 / 6; // 柱状图形最高的高度占背景图形的百分比
/* 以下给出三组颜色值,一组是普通颜色,一组是最大值的颜色,一组是最小值的颜色,每组颜色有三种颜色,分别是柱状图的正面,顶部和侧面 */
var DefaultCartColor = new Array("0xE2C41F", "0xF8DB39", "0xCCB11A");
var MaxCartColor = new Array("0xE28A1F", "0xF8A139", "0xCC7B1A");
var MinCartColor = new Array("0xC78739", "0xDE9E52", "0xB47932");
/* 定义需要使用的几种文字样式 */
ColTextFormat = new TextFormat(); // 列文字的样式
ColTextFormat.color = 0x61615F;
ColTextFormat.font = "Arial";
ColTextFormat.bold = true;
ColTextFormat.align = "center";
ColTextFormat.size = 12;
RowTextFormat = new TextFormat(); // 行文字的样式
RowTextFormat.color = 0x61615F;
RowTextFormat.font = "Arial";
RowTextFormat.bold = true;
RowTextFormat.align = "right";
RowTextFormat.size = 12;
BarTextFormat = new TextFormat(); // 柱图顶部文字的样式
BarTextFormat.color = 0x61615F;
BarTextFormat.font = "Arial";
BarTextFormat.bold = true;
BarTextFormat.align = "center";
BarTextFormat.size = 12;
CrFormat = new TextFormat(); // copyright信息的样式
CrFormat.color = 0xB5B5B2;
CrFormat.font = "Times New Roman";
CrFormat.bold = true;
CrFormat.align = "center";
CrFormat.size = 36;
/* 计算背景的坐标和宽高, 离左边60,右边20, 上下各20 */
var BgWidth, BgHeight, BgX, BgY;
BgX = BgLeftMargin;
BgWidth = ThisWidth - BgLeftMargin - BgRightMargin;
BgY = BgTopMargin;
BgHeight = ThisHeight - BgTopMargin - BgBottomMargin;
/* 初始化变量并分割字符串 */
ArrayNum = new Array();
ArrayRemark = new Array();
ArrayX = new Array();
ArrayY = new Array();
ArrayWidth = new Array();
ArrayHeight = new Array();
var NumLength, I, MaxNum = 0, MinNum = 0;
ArrayNum = NumList.split(",");
ArrayRemark = RemarkList.split(",");
NumLength = ArrayNum.length;
/* 计算最大最小值 */
for( I = 0; I < NumLength; I ++ )
{
MaxNum = (MaxNum == 0) ? ArrayNum[I] : Math.max(MaxNum, ArrayNum[I]);
MinNum = (MinNum == 0) ? ArrayNum[I] : Math.min(MinNum, ArrayNum[I]);
}
MaxHeight = BgHeight * BarHeightRate; // 计算柱状图形最大的高度
/*
计算左侧高度标记的区间范围(5个区间),如果最大值为49, 则取50做最大区间,每区间10
如果是9,取10做最大区间,每区间2,如果是129,取150做最大区间,每区间30,169取200
总结,如果该数为1位,最大区间是大于等于该数且最小的能被5整除的数。
如果该数为2位,最大区间是大于等于该数且最小的能被5整除的数。
如果该数为3位,最大区间是大于等于该数且最小的能被50整除的数。
如果该数为4位,最大区间是大于等于该数且最小的能被500整除的数。
*/
MaxRowLength = String(MaxNum).length;
PowNum = Math.pow(10, (MaxRowLength == 1) ? 0 : (MaxRowLength - 2));
RowRange = PowNum * 5;
RowMode = MaxNum % RowRange;
MaxRowRange = (RowMod == 0) ? MaxNum : ( Math.floor(MaxNum / RowRange) + 1 ) * RowRange;
RowRangeNum = MaxRowRange / 5;
RowNumRank = ( MaxHeight / MaxNum );
// RowHeightList是指横线高度(离背景图形的距离)的一个列表
RowHeightList = new Array(0, RowRangeNum * RowNumRank, RowRangeNum * 2 * RowNumRank, RowRangeNum * 3 * RowNumRank, RowRangeNum * 4 * RowNumRank, RowRangeNum * 5 * RowNumRank);
// RowNumList是指需要标上去的值
RowNumList = new Array(0, RowRangeNum, RowRangeNum * 2, RowRangeNum * 3, RowRangeNum * 4, RowRangeNum * 5);
/* 计算各图位置和高度宽度 */
for( I = 0; I < NumLength; I ++ )
{
BarWidth = Math.round( BarSpaceRate * BgWidth / ( ( NumLength * ( BarSpaceRate + 1 ) ) + 1 ) );
ArrayWidth[I] = BarWidth;
ArrayHeight[I] = (ArrayNum[I] == 0) ? 0 : Math.round( MaxHeight * ArrayNum[I] / MaxNum );
ArrayX[I] = I * ( (BarWidth / BarSpaceRate) + BarWidth ) + BgX + ( BarWidth / BarSpaceRate );
ArrayY[I] = BgY + BgHeight - ArrayHeight[I];
}
/* 计算背景底边高度=bar宽度/((BarSpaceRate+1)*BarSpaceRate*2) */
BgBottomHeight = Math.ceil( BarWidth/((BarSpaceRate+1)*BarSpaceRate) ) + 1;
/* 画背景 */
drawBackground("Bg", 1, BgFromColor, BgToColor, 80, 80, 1, 0x493E01, BgX, BgY, BgWidth, BgHeight);
/* 画出行标尺 */
drawRowLine("RowLine", 2, RowColLineColor, BgLineColor, RowHeightList, RowNumList);
/* 画底部黑边 */
drawBgBottom("BgBottom", 0, RowColLineColor, 100, BgX, BgY + 1 + BgHeight - BgBottomHeight, BgWidth-1, BgBottomHeight-1);
/* 画左侧黑边 */
drawBgBottom("BgBottom", 0, RowColLineColor, 100, BgX, BgY, BgBottomHeight-1, BgHeight - 1);
_root.createEmptyMovieClip("Bar", 8);
/* 画柱状图形 */
for( I = 0; I < NumLength; I ++ )
{
if ( ArrayNum[I] == Math.round(MaxNum) )
{
FontColor = MaxCartColor[0];
TopColor = MaxCartColor[1];
SideColor = MaxCartColor[2];
}
else if ( ArrayNum[I] == Math.round(MinNum) )
{
FontColor = MinCartColor[0];
TopColor = MinCartColor[1];
SideColor = MinCartColor[2];
}
else
{
FontColor = DefaultCartColor[0];
TopColor = DefaultCartColor[1];
SideColor = DefaultCartColor[2];
}
drawCart("Bar" add I, 300 + I, FontColor, TopColor, SideColor, 100, 0.5, 0x11414D, ArrayX[I], ArrayY[I], ArrayWidth[I], ArrayHeight[I], true, ArrayNum[I]);
}
/* 标记底部文字 */
for( I = 0; I < NumLength; I ++ )
{
LineX = ArrayX[I] + ( BarWidth * BarSpaceRate / (BarSpaceRate + 1) ) / 2;
LineY = BgY + BgHeight;
LineLength = 10;
drawColLine("ColLine" add I, I + 1000, 0x000000, ArrayRemark[I], LineX, LineY, LineLength);
}
with(_root.Bar)
{
Bar0.onPress = function()
{
this.startDrag();
}
Bar0.onRelease = function()
{
this.stopDrag();
}
}
/***************************** 以下是函数部分 *********************************/
/**
*
* 画出横向的横线和对应数值
*
*@author superspice
*@param McName 影片名称
*@param McDepth 影片深度
*@Param LineColor 线的颜色
*@param HeightList 每条横线高度的数组
*@param NumList 每条横线对应数值的数组
*
*/
function drawRowLine(McName, McDepth, LineColor, BgLineColor, HeightList, NumList)
{
_root.createEmptyMovieClip(McName, McDepth);
with (eval(McName)._name)
{
HeightLength = HeightList.length;
lineStyle( 0, LineColor, 100 );
for(I = 0; I < HeightLength; I ++)
{
if( ( BgTopMargin + BgHeight - HeightList[I] ) >= BgY)
{
moveTo(BgLeftMargin - 10, BgTopMargin + BgHeight - HeightList[I]);
lineTo(BgLeftMargin + BgWidth, BgTopMargin + BgHeight - HeightList[I]);
createTextField(McName add "Text" add I, McDepth + I, 0, BgTopMargin + BgHeight - HeightList[I] - 10, BgLeftMargin - 15, 20);
with (eval(McName add "Text" add I))
{
type = "dynamic";
_alpha = 100;
multiline = false;
wordWrap = false;
selectable = false;
text = NumList[I];
setTextFormat(RowTextFormat);
}
}
}
}
}
/**
*
* 画出列的线和文字
*
*@author superspice
*@param McName 影片名称
*@param McDepth 影片深度
*@Param LineColor 线的颜色
*@param TextValue 该线段对应的文字
*@param LineX 线段起始_x坐标
*@param LineY 线段起始_y坐标
*@param LineHeight 线段高度
*
*/
function drawColLine(McName, McDepth, LineColor, TextValue, LineX, LineY, LineLength)
{
_root.createEmptyMovieClip(McName, McDepth);
with (eval(McName)._name)
{
lineStyle(0, LineColor, 100);
moveTo(LineX, LineY);
lineTo(LineX, LineY + LineLength);
}
_root.createTextField(McName add "Text", McDepth+100, LineX - 30, LineY + LineLength, 60, 20);
with (eval(McName add "Text"))
{
type = "dynamic";
_alpha = 100;
multiline = false;
wordWrap = false;
selectable = false;
text = TextValue;
setTextFormat(ColTextFormat);
}
}
/**
*
* 画矩形立体柱状图
*
*@author superspice
*@param McName 影片名称
*@param McDepth 影片深度
*@Param FontColor 前表面图形颜色
*@param TopColor 上表面颜色
*@param SideColor 侧面颜色
*@param BgAlpha 图形的alpha值
*@param BorderValue 边框粗度
*@param BorderColor 边框颜色
*@param LocationX _x坐标
*@param LocationY _y坐标
*@param CartWidth 图形宽度
*@param CartHeight 图形高度
*@param BoolText 是否在图形的上面标记出数字
*@param TextValue 标记数字的字符串
*
*/
function drawCart(McName, McDepth, FontColor, TopColor, SideColor, BgAlpha, BorderValue, BorderColor, LocationX, LocationY, CartWidth, CartHeight, BoolText, TextValue)
{
trace(McName);
/* 将宽度变为原来的2/3 */
CartWidth = (2 * CartWidth) / 3;
/* 创建空影片 */
Bar.createEmptyMovieClip(McName, McDepth);
with(McName)
{
lineStyle( BorderValue, BorderColor, 100);
/* 绘制前面矩形 */
beginFill(FontColor, BgAlpha);
moveTo(LocationX, LocationY);
lineTo(LocationX + CartWidth, LocationY);
lineTo(LocationX + CartWidth, LocationY + CartHeight);
lineTo(LocationX, LocationY + CartHeight);
lineTo(LocationX, LocationY);
endFill();
/* 绘制上表面 */
beginFill(TopColor, BgAlpha);
moveTo(LocationX, LocationY);
lineTo(LocationX + (CartWidth / 2), LocationY - (CartWidth / 4));
lineTo(LocationX + (3 * CartWidth / 2), LocationY - (CartWidth / 4));
lineTo(LocationX + CartWidth, LocationY);
lineTo(LocationX, LocationY);
endFill();
/* 绘制侧表面 */
beginFill(SideColor, BgAlpha);
moveTo(LocationX + CartWidth, LocationY);
lineTo(LocationX + (3 * CartWidth / 2), LocationY - (CartWidth / 4));
lineTo(LocationX + (3 * CartWidth / 2), LocationY - (CartWidth / 4) + CartHeight);
lineTo(LocationX + CartWidth, LocationY + CartHeight);
lineTo(LocationX + CartWidth, LocationY);
endFill();
/* 如果需要标示数值 */
if(BoolText == true)
{
createTextField(McName add "Text", McDepth+100, LocationX - 10, LocationY - 20, 40, 20);
with (eval(McName add "Text"))
{
type = "dynamic";
_alpha = 100;
multiline = false;
wordWrap = false;
selectable = false;
text = TextValue;
setTextFormat(ColTextFormat);
}
}
}
}
/**
*
* 画背景渐变图
*
*@author superspice
*@param McName 影片名称
*@param McDepth 影片深度
*@Param FromColor 渐变色-前景色
*@param ToColor 渐变色-背景色
*@param FromAlpha 图形的alpha值
*@param ToAlpha 图形的alpha值
*@param BorderValue 边框粗度
*@param BorderColor 边框颜色
*@param LocationX _x坐标
*@param LocationY _y坐标
*@param BgWidth 图形宽度
*@param BgHeight 图形高度
*
*/
function drawBackground(McName, McDepth, FromColor, ToColor, FromAlpha, ToAlpha, BorderValue, BorderColor, LocationX, LocationY, BgWidth, BgHeight)
{
/* 创建空影片 */
_root.createEmptyMovieClip(McName, McDepth);
lineStyle( BorderValue, BorderColor, 100);
with (eval(McName)._name)
{
colors = [ FromColor, ToColor ];
alphas = [ FromAlpha, ToAlpha ];
ratios = [ 0, 0xFF ];
matrix = { matrixType:"box", x:100, y:100, w:200, h:200, r:(90/180)*Math.PI };
/* 画一个带边框的渐变背景 */
beginGradientFill( "linear", colors, alphas, ratios, matrix );
moveTo(LocationX, LocationY);
lineTo(LocationX + BgWidth, LocationY);
lineTo(LocationX + BgWidth, LocationY + BgHeight);
lineTo(LocationX, LocationY + BgHeight);
lineTo(LocationX, LocationY);
endFill();
/* 写出copyright信息 */
createTextField("CopyRight", 100, BgX + 5, BgY + 5, 300, 100);
with(CopyRight)
{
type = "dynamic";
_alpha = 10;
multiline = false;
wordWrap = false;
selectable = false;
text = CopyRightText;
setTextFormat(CrFormat);
}
}
}
/**
*
* 画背景图底部和侧边的黑边
*
*@author superspice
*@param McName 影片名称
*@param McDepth 影片深度
*@Param BgColor 背景色
*@param BgAlpha 背景alpha
*@param LocationX _x坐标
*@param LocationY _y坐标
*@param BgWidth 图形宽度
*@param BgHeight 图形高度
*
*/
function drawBgBottom(McName, McDepth, BgColor, BgAlpha, LocationX, LocationY, BgWidth, BgHeight)
{
/* 创建空影片 */
_root.createEmptyMovieClip(McName, McDepth);
with (McName)
{
lineStyle( "", BgColor, 100 );
beginFill(BgColor, BgAlpha);
moveTo(LocationX, LocationY);
lineTo(LocationX + BgWidth, LocationY);
lineTo(LocationX + BgWidth, LocationY + BgHeight);
lineTo(LocationX, LocationY + BgHeight);
lineTo(LocationX, LocationY);
endFill();
}
}