flash_actionscript_chart

一个纯粹的用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();

   }

}