flex 横向树状图优化

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" backgroundColor="#d6d4d4" backgroundGradientColors="[#FFFFFF, #FFFFFF]"> <mx:Canvas id="paper" x="30" y="24" width="1200" height="2600" themeColor="#8DC2E0" > <!-- <mx:Canvas id="LEV" name="LEV" x="20" y="17" width="120" height="120" borderStyle="inset"> <mx:Button x="0" y="74" label="关键词导出" width="116" height="20" color="#1B803A" click="exportQuery(event)"/> <mx:Text x="0" y="20" width="116" height="55" text="List PV:10000" fontSize="12" color="#C71B2B"/> <mx:Image id="LEV_pic" name="LEV_pic" x="94" y="44" width="22" height="22" click="expandRootTree(event)"> <mx:source>{IMAGE_OPEN_SOURCE}</mx:source> </mx:Image> <mx:Button x="0" y="94" label="Button" width="116" height="20" color="#128D1E" click="exportCategory(event)"/> <mx:Label x="0" y="0" text="Label" width="116" fontSize="14" fontWeight="bold" color="#362DF7"/> </mx:Canvas> --> </mx:Canvas> <mx:Script> <!--[CDATA[ import mx.controls.Label; import mx.controls.Text; import mx.controls.Button; import mx.controls.Image; import mx.containers.Canvas; import mx.collections.ArrayCollection; //面板的长宽 private var CANVAS_WIDTH:Number=130; private var CANVAS_HEIGHT:Number=130; //每个button的长宽 private var BUTTON_WIDTH:Number=101; private var BUTTON_HEIGHT:Number=20; //每个文本框的长宽 private var TEXT_WIDTH:Number=116; private var TEXT_HEIGHT:Number=65; //图片的长宽 private var IMAGE_WIDTH:Number=12; private var IMAGE_HEIGHT:Number=12; //Label的长宽 private var LABEL_WIDTH:Number=111; private var LABEL_HEIGHT:Number=28; //树状图开始位置 private var STARTPOINT_X:Number=80; private var STARTPOINT_Y:Number=20; //父节点与子节点的间隔 private var POINT_WIDTH:Number=200; //节点与相邻兄弟节点的间隔 private var POINT_HEIGHT:Number=140; [Bindable] private var IMAGE_OPEN_SOURCE:String="expend.gif"; //节点展开的图片 [Bindable] private var IMAGE_CLOSE_SOURCE:String="shrink.gif"; //节点关闭的图片 private function initApp():void { paper.graphics.clear(); test(); // ExternalInterface.addCallback("dataSourceFunc",createTreesMap); // ExternalInterface.call(Application.application.parameters.funcName); } //改进的横向树状图 public function createTreesMap(dataArr:Array, treeLength:int):void { var fieldName:String="LEV"; var treeArr:Array=new Array(); //二维数组，保存每个节点的id， id格式为LEV_1_2_3 var node_x:Array=new Array(); var node_y:Array=new Array(); var node_index:Array = new Array(); for (var k:int=0; k < dataArr.length; k++) { treeArr[k]=new Array(); node_x[k]=new Array(); node_y[k]=new Array(); node_index[k] = new Array(); } var nodeName:String="LEV"; var index:int=1; var isMatch:Boolean = true; for (var i:int=0; i < dataArr.length; i++) { isMatch = true; for (var j:int=0; j < treeLength; j++) // { var field:String="field" + (j + 1); if (i == 0) { if (j == 0) { treeArr[0][0]=nodeName + "_" + index; node_x[i][j]=STARTPOINT_X; node_y[i][j]=STARTPOINT_Y; createACanvas(treeArr[i][j], STARTPOINT_X, STARTPOINT_Y, dataArr[i][field]); node_index[i][j] = 1; }else{ treeArr[i][j] = treeArr[i][j - 1] + "_1"; node_x[i][j]=node_x[i][j - 1] + POINT_WIDTH; node_y[i][j]=STARTPOINT_Y; createACanvas(treeArr[i][j], node_x[i][j], node_y[i][j], dataArr[i][field]); node_index[i][j] = 1; } } else { if(dataArr[i][field] != dataArr[i-1][field] && isMatch == true){ for(var r:int = j; r < treeLength; r++) { var tmpfield:String="field" + (r + 1); if(r == j){ node_index[i][r] = node_index[i-1][r] + 1; treeArr[i][r] = (r == 0 ? "LEV" : treeArr[i - 1][r - 1]) + "_" + node_index[i][r]; }else{ node_index[i][r] = 1; treeArr[i][r] = treeArr[i][r - 1] + "_1"; } node_x[i][r]=node_x[i - 1][r]; node_y[i][r]=node_y[i - 1][r] + POINT_HEIGHT; createACanvas(treeArr[i][r], node_x[i][r], node_y[i][r], dataArr[i][tmpfield]); } for(var s:int = 0; s < j; s++){ node_index[i][s] = node_index[i-1][s]; node_x[i][s] = node_x[i - 1][s]; node_y[i][s] = node_y[i][j]; treeArr[i][s] = treeArr[i-1][s]; } isMatch = false; } } } } var tnode:String = "LEV"; for(var t:int = 1; t < treeLength; t++){ tnode = tnode + "_1"; var tmp:String = tnode + "_pic"; openTreeNode(tmp); } } //创建横向树状图 public function createTreeMap(dataArr:Array, treeLength:int):void { var fieldName:String="LEV"; var treeArr:Array=new Array(); //二维数组，保存每个节点的id， id格式为LEV_1_2_3 var node_x:Array=new Array(); var node_y:Array=new Array(); for (var k:int=0; k < dataArr.length; k++) { treeArr[k]=new Array(); node_x[k]=new Array(); node_y[k]=new Array(); } var nodeName:String="LEV"; for (var j:int=0; j < treeLength; j++) // { var field:String="field" + (j + 1); var index:int=1; var rate:int = 1; for (var i:int=0; i < dataArr.length; i++) { if (j == 0) { if (i == 0) { treeArr[0][0]=nodeName + "_" + index; createACanvas(treeArr[0][0], STARTPOINT_X, STARTPOINT_Y, dataArr[i][field]); node_x[i][j]=STARTPOINT_X; node_y[i][j]=STARTPOINT_Y; } else { if (dataArr[i][field] == dataArr[i - 1][field] && treeArr[i][j - 1] == treeArr[i-1][j-1]) { treeArr[i][0]=treeArr[i - 1][0]; node_x[i][j]=node_x[i - 1][j]; node_y[i][j]=node_y[i - 1][j]; } else { index++; rate++; treeArr[i][0]=nodeName + "_" + index; createACanvas(treeArr[i][0], STARTPOINT_X, STARTPOINT_Y + POINT_HEIGHT * (index - 1), dataArr[i][field]); node_x[i][j]=node_x[i - 1][j]; node_y[i][j]=node_y[i - 1][j] + POINT_HEIGHT; } } } else { if (i == 0) { treeArr[0][j]=treeArr[0][j - 1] + "_" + index; node_x[i][j]=STARTPOINT_X + j * POINT_WIDTH; node_y[i][j]=STARTPOINT_Y; createACanvas(treeArr[i][j], node_x[i][j], node_y[i][j], dataArr[i][field]); } else { if (dataArr[i][field] == dataArr[i - 1][field] && treeArr[i][j - 1] == treeArr[i-1][j-1] ) { treeArr[i][j]=treeArr[i - 1][j]; node_x[i][j]=node_x[i - 1][j]; node_y[i][j]=node_y[i - 1][j]; } else { index++; rate++; if(treeArr[i][j - 1] != treeArr[i-1][j-1]){ index = 1; } treeArr[i][j]=treeArr[i][j - 1] + "_" + index; node_x[i][j]=node_x[i - 1][j]; node_y[i][j]=node_y[i - 1][j] + POINT_HEIGHT; createACanvas(treeArr[i][j], node_x[i][j], node_y[i][j], dataArr[i][field]); } } } } } // for (var a:int=0; a < dataArr.length ; a++) // // { // for (var b:int=0; b < treeLength; b++) // { // trace(treeArr[a][b] + " " + node_x[a][b] + " " + node_y[a][b] + "/n"); // } // } } public function test():void { var stockDataAC:Array=new Array( {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:343256|Cookie变化率:13.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "SEOList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "SEOList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "SEOList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "SEOList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "SEOList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "gongyingList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "SEOList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "SEOList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "SEOList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "SEOList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "SEOList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "SEOList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "SEOList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "SEOList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "SEOList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "SEOList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}, {field1: "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field2: "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field3: "SEOList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%", field4: "BDList|LPV:400|LPVRate:10.2%|Cookie:3432|Cookie变化率:3.34%"}); var len:int = 4; // createTreeMap(stockDataAC, len); createTreesMap(stockDataAC, len); } /* public function test():void { createACanvas("LEV_1", 286, 17, "BD-265|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_2", 286, 19 + 130, "BDList|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_3", 286, 19 + 130 * 2, "供应List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_4", 286, 19 + 130 * 3, "服装List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_5", 286, 19 + 130 * 4, "小商品List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_6", 286, 19 + 130 * 5, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_7", 286, 19 + 130 * 6, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_8", 286, 19 + 130 * 7, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_9", 286, 19 + 130 * 8, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_10", 286, 19 + 130 * 9, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_11", 286, 19 + 130 * 10, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_12", 286, 19 + 130 * 11, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_1", 486, 17, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_2", 486, 19 + 130, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_3", 486, 19 + 130 * 2, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_4", 486, 19 + 130 * 3, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_5", 486, 19 + 130 * 4, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_6", 486, 19 + 130 * 5, "List|LPV:100|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_2_1", 486, 17, "List|LPV:200|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_2_2", 486, 19 + 130, "List|LPV:200|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_2_3", 486, 19 + 130 * 2, "List|LPV:200|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_2_4", 486, 19 + 130 * 3, "List|LPV:200|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_2_5", 486, 19 + 130 * 4, "List|LPV:200|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_2_6", 486, 19 + 130 * 5, "List|LPV:200|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_3_1", 486, 17, "List|LPV:300|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_3_2", 486, 19 + 130, "List|LPV:300|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_3_3", 486, 19 + 130 * 2, "List|LPV:300|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_3_4", 486, 19 + 130 * 3, "List|LPV:300|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_3_5", 486, 19 + 130 * 4, "List|LPV:300|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_3_6", 486, 19 + 130 * 5, "List|LPV:300|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_1_1", 686, 17, "List|LPV:400|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_1_2", 686, 19 + 130, "List|LPV:400|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_1_3", 686, 19 + 130 * 2, "List|LPV:400|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_1_4", 686, 19 + 130 * 3, "List|LPV:400|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_1_5", 686, 19 + 130 * 4, "List|LPV:400|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); createACanvas("LEV_1_1_6", 686, 19 + 130 * 5, "List|LPV:400|LPVRate:10.2%|Cookie:3432|CookieRate:3.34%"); } */ //展开关闭节点 public function expandRootTree(e:MouseEvent):void { var t:Object=e.currentTarget; var name:String=e.currentTarget.name; //var target:DisplayObject = paper.getChildByName(name.substr(0,3)); trace(name); //paper.graphics.clear(); if (name.substr(0, 3) == "LEV") { var prefix:String=name.substr(0, name.lastIndexOf("_") == -1 ? name.length : name.lastIndexOf("_")); var target:DisplayObject=paper.getChildByName(prefix); // for (var j:int=1; j <= paper.getChildren().length; j++) // { // var brother:String=name.substr(0, name.substr(0, name.lastIndexOf("_")).lastIndexOf("_") == -1 ? 0 : name.substr(0, name.lastIndexOf("_")).lastIndexOf("_")) + "_" + j; // if (brother != prefix) // { // var varCanvas:DisplayObject=paper.getChildByName(brother); // if (varCanvas != null) // { // var tImage:Image=Image(Canvas(varCanvas).getChildByName(brother + "_pic")); // if (tImage != null) // { // tImage.source=IMAGE_OPEN_SOURCE; // } // expandTreeNode(varCanvas); // } // } // } var tparentCanvas:DisplayObject = Canvas(target).getChildByName(name.substr(0, name.length - 4) + "_in"); var tparentImage:Image=Image(Canvas(tparentCanvas).getChildByName(name)); for (var i:int=1; i <= paper.getChildren().length; i++) { var child:String=prefix + "_" + i; var canvas:DisplayObject=paper.getChildByName(child); if (canvas != null) { var tCanvas:DisplayObject = Canvas(canvas).getChildByName(child + "_in"); var varImage:Image=Image(Canvas(tCanvas).getChildByName(child + "_pic")); canvas.visible=canvas.visible == true ? false : true; if (canvas.visible == true) { tparentImage.source = IMAGE_CLOSE_SOURCE; varImage.source=IMAGE_OPEN_SOURCE ; doDraw(target, canvas, 0xb7b4b4); } else { tparentImage.source = IMAGE_OPEN_SOURCE; varImage.source=IMAGE_CLOSE_SOURCE; doDraw(target, canvas, 0xFFFFFF); } if (canvas.visible == false) { closeTreeNode(canvas); } } } } } public function openTreeNode(name:String):void { if (name.substr(0, 3) == "LEV") { var prefix:String=name.substr(0, name.lastIndexOf("_") == -1 ? name.length : name.lastIndexOf("_")); var target:DisplayObject=paper.getChildByName(prefix); var tparentCanvas:DisplayObject = Canvas(target).getChildByName(name.substr(0, name.length - 4) + "_in"); var tparentImage:Image=Image(Canvas(tparentCanvas).getChildByName(name)); for (var i:int=1; i <= paper.getChildren().length; i++) { var child:String=prefix + "_" + i; var canvas:DisplayObject=paper.getChildByName(child); if (canvas != null) { var tCanvas:DisplayObject = Canvas(canvas).getChildByName(child + "_in"); var varImage:Image=Image(Canvas(tCanvas).getChildByName(child + "_pic")); canvas.visible=canvas.visible == true ? false : true; if (canvas.visible == true) { tparentImage.source = IMAGE_CLOSE_SOURCE; varImage.source=IMAGE_OPEN_SOURCE ; doDraw(target, canvas, 0xb7b4b4); } else { tparentImage.source = IMAGE_OPEN_SOURCE; varImage.source=IMAGE_CLOSE_SOURCE; doDraw(target, canvas, 0xFFFFFF); } if (canvas.visible == false) { closeTreeNode(canvas); } } } } } //递归关闭子节点 public function closeTreeNode(canvas:DisplayObject):void { if (canvas != null) { var parent:String=canvas.name; for (var i:int=1; i <= paper.getChildren().length; i++) { var child:String=parent + "_" + i; var childCanvas:DisplayObject=paper.getChildByName(child); if (childCanvas != null) { var tCanvas:DisplayObject = Canvas(childCanvas).getChildByName(child+"_in"); var varImage:Image=Image(Canvas(tCanvas).getChildByName(child + "_pic")); varImage.source=IMAGE_OPEN_SOURCE; childCanvas.visible=false; if (childCanvas.visible == true) { doDraw(canvas, childCanvas, 0x333300); } else { doDraw(canvas, childCanvas, 0xFFFFFF); } closeTreeNode(childCanvas); } } } } //创建一个节点， private function createACanvas(id:String, x:Number, y:Number, content:String):void { var arr:Array=content.split('|', 5); var canvas:Canvas=new Canvas(); canvas.id=id + "_in"; canvas.name=id + "_in"; canvas.x=3; canvas.y=3; //canvas.setActualSize(CANVAS_WIDTH, CANVAS_HEIGHT); canvas.width=CANVAS_WIDTH; canvas.height=CANVAS_HEIGHT; canvas.setStyle("borderStyle", "solid"); canvas.setStyle("borderColor","0xb7b4b4"); canvas.setStyle("cornerRadius", "10"); canvas.setStyle("dropShadowEnabled", "true"); canvas.setStyle("dropShadowColor", "#6e7274"); // canvas.setStyle("styleName","gradient"); // var button1:Button=new Button(); // button1.id=id + "_button_category"; // button1.name=id + "_button_category"; // button1.x=0; // button1.y=94; // button1.addEventListener(MouseEvent.CLICK, exportCategory); // // button1.setActualSize(BUTTON_WIDTH,BUTTON_HEIGHT); // button1.width=BUTTON_WIDTH; // button1.height=BUTTON_HEIGHT; // button1.setStyle("color", "#1B803A"); // button1.label="类目list下载"; // canvas.addChild(button1); var button:Button=new Button(); button.id=id + "_button_keyword"; button.name=id + "_button_keyword"; button.x=12; button.y=99; button.addEventListener(MouseEvent.CLICK, exportQuery); // button.setActualSize(BUTTON_WIDTH,BUTTON_HEIGHT); button.width=BUTTON_WIDTH; button.height=BUTTON_HEIGHT; button.setStyle("color", "#393a3a"); button.setStyle("cornerRadius","10"); button.setStyle("fontSize", "9"); var textKey:Text=new Text(); textKey.name=id + "_text"; textKey.id=id + "_text"; textKey.x=0; textKey.y=33; // text.setActualSize(TEXT_WIDTH,TEXT_HEIGHT); textKey.width=TEXT_WIDTH * 3 / 5 + 10; textKey.height=TEXT_HEIGHT; textKey.setStyle("fontSize", "10"); textKey.setStyle("color", "#4b4e50"); textKey.setStyle("textAlign", "right"); var textValue:Text=new Text(); textValue.name=id + "_text"; textValue.id=id + "_text"; textValue.x=TEXT_WIDTH * 3 / 5 + 5; textValue.y=33; // text.setActualSize(TEXT_WIDTH,TEXT_HEIGHT); textValue.width=TEXT_WIDTH * 2 / 5 + 3 ; textValue.height=TEXT_HEIGHT; textValue.setStyle("fontSize", "10"); textValue.setStyle("color", "#129838"); var title:Label=new Label(); title.name=id + "_label"; title.id=id + "_label"; title.x=10; title.y=5; title.width=LABEL_WIDTH; title.height=LABEL_HEIGHT; title.setStyle("fontSize", "12"); title.setStyle("fontWeight", "bold"); title.setStyle("color", "#000000"); canvas.graphics.lineStyle(1, 0xc7cccf, 1); canvas.graphics.moveTo(title.x, title.height - 2); canvas.graphics.lineTo(title.x + title.width - 1, title.height - 2); button.label="Query list下载"; title.text=arr[0]; //text.text=arr[1] + "/n" + arr[2] + "/n" + arr[3] + "/n" + arr[4]; for(var k:int = 1; k < arr.length; k++) { var a:Array = arr[k].toString().split(":"); textKey.text = textKey.text + a[0] + ":/n"; textValue.text = textValue.text + a[1] + "/n"; } var image:Image=new Image(); image.id=id + "_pic"; image.name=id + "_pic"; image.x=105; image.y=8; image.width=IMAGE_WIDTH; image.height=IMAGE_HEIGHT; image.source=IMAGE_OPEN_SOURCE; image.name=id + "_pic"; image.addEventListener(MouseEvent.CLICK, expandRootTree); canvas.addChild(button); canvas.addChild(title); canvas.addChild(textKey); canvas.addChild(textValue); canvas.addChild(image); var outcanvas:Canvas=new Canvas(); outcanvas.id=id; outcanvas.name=id; outcanvas.x=x ; outcanvas.y=y ; outcanvas.width=CANVAS_WIDTH + 6; outcanvas.height=CANVAS_HEIGHT + 6; outcanvas.setStyle("styleName","gradient"); outcanvas.visible = false; outcanvas.addChild(canvas); if(id.lastIndexOf("_") == 3){ outcanvas.visible = true; } paper.addChild(outcanvas); } //关键词导出 private function exportQuery(event:Event):void { var button:Button=Button(event.currentTarget); var len:int=String("_button_keyword").length; var textName:String=button.name.substr(0, button.name.length - len) + "_text"; var text:Text=Text(button.parent.getChildByName(textName)); ExternalInterface.call("exportQueryXLS", text.text); } //类目导出 private function exportCategory(event:Event):void { var button:Button=Button(event.currentTarget); var len:int=String("_button_category").length; var textName:String=button.name.substr(0, button.name.length - len) + "_text"; var text:Text=Text(button.parent.getChildByName(textName)); ExternalInterface.call("exportCategoryXLS", text.text); } private function hiddenTarget(source:Sprite, target:Sprite):void { source.visible=false; target.visible=false; } //两个节点之间画直线 private function doDraw(source:DisplayObject, target:DisplayObject, color:int):void { // source.visible = true; // target.visible = true; var radius:Number=10; var sourceCenter:Point=new Point(source.x + source.width, source.y + source.height / 2); var targetCenter:Point=new Point(target.x, target.y + target.height / 2); var sin:Number=(sourceCenter.y - targetCenter.y) / (Math.sqrt(Math.pow(sourceCenter.x - targetCenter.x, 2) + Math.pow(sourceCenter.y - targetCenter.y, 2))); var radian:Number=Math.asin(sin); var degree:Number=radian * 180 / Math.PI; if (source.x < target.x) { if (degree == 0) { degree=180; } if (degree > 0) { degree=180 - degree; } if (degree < 0) { degree=180 + degree * -1; } } degree+=90; radian=degree * Math.PI / 180; var offsetX:Number=0; var offsetY:Number=0; var sourcePointA:Point=new Point(sourceCenter.x + offsetX, sourceCenter.y + offsetY); var sourcePointB:Point=new Point(sourceCenter.x - offsetX, sourceCenter.y - offsetY); var targetPointA:Point=new Point(targetCenter.x + offsetX, targetCenter.y + offsetY); var targetPointB:Point=new Point(targetCenter.x - offsetX, targetCenter.y - offsetY); paper.graphics.lineStyle(1, color, 100); //paper.graphics.lineStyle(1,0x333300,100); var midx:Number=(source.x + source.width + target.x) / 2; var midy:Number=(source.y + target.y) / 2; // var name:String = source.name; // name = name.substr(name.lastIndexOf("_") + 1, name.length); // var step:int = int(name) * 5; // midx = target.x - 10 - step; // midx = target.x - 10 - offset; paper.graphics.moveTo(sourcePointA.x, sourcePointA.y); paper.graphics.lineTo(midx, sourcePointA.y); paper.graphics.moveTo(midx, sourcePointA.y); paper.graphics.lineTo(midx, targetPointA.y); paper.graphics.moveTo(midx, targetPointA.y); paper.graphics.lineTo(targetPointA.x, targetPointA.y); paper.graphics.moveTo(targetPointA.x - 5, targetPointA.y - 5); paper.graphics.lineTo(targetPointA.x, targetPointA.y); paper.graphics.moveTo(targetPointA.x - 5, targetPointA.y + 5); paper.graphics.lineTo(targetPointA.x, targetPointA.y); } ]]--> </mx:Script> <mx:Style> .gradient { border-style: solid; border-thickness: 0; border-skin: ClassReference("GradientBorder"); fill-colors: #FFFFFF,#eef1f2; corner-radius: 10; } </mx:Style> </mx:Application>