|
简单方法实现复杂的图表
效果:
代码如下:
//这个数组的最前一位和最后一位,在这里的作用只起到占位的作用
dataTable = []; dataTable.push(["1851-1860", 8, 5, 5, 1, 0, 19]); dataTable.push(["1861-1870", 8, 6, 1, 0, 0, 15]); dataTable.push(["1871-1880", 7, 6, 7, 0, 0, 20]); dataTable.push(["1881-1890", 8, 9, 4, 1, 0, 22]); dataTable.push(["1891-1900", 8, 5, 5, 3, 0, 21]); dataTable.push(["1901-1910", 10, 4, 4, 0, 0, 18]); dataTable.push(["1911-1920", 10, 4, 4, 3, 0, 21]); dataTable.push(["1921-1930", 5, 3, 3, 2, 0, 13]); dataTable.push(["1931-1940", 4, 7, 6, 1, 1, 19]); dataTable.push(["1941-1950", 8, 6, 9, 1, 0, 24]); dataTable.push(["1951-1960", 8, 1, 5, 3, 0, 17]); dataTable.push(["1961-1970", 3, 5, 4, 1, 1, 14]); dataTable.push(["1971-1980", 6, 2, 4, 0, 0, 12]); dataTable.push(["1981-1990", 9, 1, 4, 1, 0, 15]); dataTable.push(["1991-2000", 3, 6, 4, 0, 1, 14]); dataTable.push(["2001-2005", 7, 2, 3, 3, 1, 9]);
//这个函数把数组中的每一个元素中的第n个元素存在一个临时的数组,返回这个数组
get2dArrayValues = function (handle, n) { temp = []; for (var i = 0; i<handle.length; i++) { temp.push(handle[n]); } return temp; };
//重点讲一下这个函数
drawGraph = function (handle, values, max, grpWidth, grpHeight, Style, xoffset, yoffset) {
//这两句确定了每个数据点应该相隔多远
var xincrement = grpWidth/values.length; var yincrement = grpHeight/max;
//为图表创建占位符,依据xoffset, yoffset移动它.重复利用handle变量名,指向createEmptyMovieClip方法创建的子电影剪辑
handle = handle.createEmptyMovieClip("graphline"+getTimer(), handle.getNextHighestDepth()); handle._x = xoffset; handle._y = yoffset;
//定义beginFill样式,开始点
handle.lineStyle(0, 0xFFFFFF, 4); handle.moveTo(0, grpHeight); handle.beginFill(Style[0], Style[1]);
//绘制第一根线条,它的值是变化的,保持把这个lineTo与下面的lineTo值隔离开,x是0,y稍微复杂一点
handle.lineTo(0, grpHeight-(values[0]*yincrement));
//有了上面的起始位置,那么接下来只要遍历余下的值就可以了
for (var i = 1; i<values.length; i++) { handle.lineTo((i*xincrement), grpHeight-(values*yincrement)); }
//数组是以0位开始的,所以这里要减1
handle.lineTo((values.length-1)*xincrement, grpHeight);
//封闭形状
handle.lineTo(0, grpHeight); handle.endFill(); };
//建立一个MC
myGraph = this.createEmptyMovieClip("graphHolder", 0);
//调用函数后返回的值赋予F1
var F1:Array = get2dArrayValues(dataTable, 1);
//调用函数,求出每个点的位置
drawGraph(myGraph, F1, 12, 800, 200, [0x3C4B6C, 5], 22);
//以下同上
var F2:Array = get2dArrayValues(dataTable, 2); drawGraph(myGraph, F2, 12, 800, 200, [0x3C4B6C, 25], 22); var F3:Array = get2dArrayValues(dataTable, 3); drawGraph(myGraph, F3, 12, 800, 200, [0x3C4B6C, 45], 22); var F4:Array = get2dArrayValues(dataTable, 4); drawGraph(myGraph, F4, 12, 800, 200, [0x3C4B6C, 65], 22); var F5:Array = get2dArrayValues(dataTable, 5); drawGraph(myGraph, F5, 12, 800, 200, [0x000000, 85], 22);
|