//添加數組找到box_content ul li 對應的index

ct.lineTo($(".box_content ul li").eq(j).position().left+57,($(".box_header ul li").eq(index).position().top)+106+140);//中點
ct.lineTo($(".box_content ul li").eq(j).position().left+57,($(".box_header ul li").eq(index).position().top)+320);//中點
ct.strokeStyle = "#f95f5b";//線條顏色
ct.lineWidth = 2;//線條的寬度
ct.stroke();//繪制

}?
}
}

box_content_ct(index);
//console.log(($(".box_header ul li").eq(index).position().left) +155 );
}

//box_content ul li畫線
function box_content_ct(index){
if( box_content_arr.length<1){
return false;
}
var box_content_max = Math.max.apply(null, box_content_arr);//獲取數組最大值
var box_content_min = Math.min.apply(null, box_content_arr);//獲取數組最小值

var n1_left = $(".box_content ul li").eq(box_content_max).position().left+60;
var n2_left = $(".box_content ul li").eq(box_content_min).position().left+100;
var n3_left = $(".box_content ul li").eq(box_content_min).position().left+100;
var n4_left = $(".box_content ul li").eq(box_content_max).position().left+60;


var box_header_left = $(".box_header ul li").eq(index).position().left+203;
//alert(box_header_left);
//alert(arr+"--"+max+"--"+min+"--"+index);
//繪制弧形
if(index == 1){
if(box_content_min+1<5&&box_content_max>4){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();


ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<5 &&box_content_arr.length !=1){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>4 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<5){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>4){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>4){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
}else if(index == 0){
if(box_content_min+1<2&&box_content_max>1){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();

ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<2 &&box_content_arr.length !=1){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>1 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<2){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
}else if(index ==3){
if(box_content_min+1<11&&box_content_max>10){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();

ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<11 &&box_content_arr.length !=1){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>10 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<11){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>10){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>10){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}

}else if(index==2){
if(box_content_min+1<8&&box_content_max>7){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();

ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}
if(box_content_min+1<8 &&box_content_arr.length !=1){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>7 &&box_content_arr.length !=1){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_min+1<8){
ct.beginPath();?
ct.clearRect(n3_left-21-23,244,21,21);
ct.arc(n3_left-23,266,20,1*Math.PI,1.5*Math.PI,false);
ct.stroke();
}else if(box_content_min>7){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}else if(box_content_max>7){
ct.beginPath();
ct.clearRect(n4_left-23,244,21,21);
ct.arc(n4_left-23,266,20,1.5*Math.PI,2*Math.PI,false);
ct.stroke();
}

}
}



//點擊開始畫線
$(document).on("click",".box_header ul li",function(){
//alert($(this).index());
var index = $(this).index();
$(this).css("border","2px solid #f95f5b").siblings().css("border","2px solid #fff");

for(var i=0;i<dates.data.saiData[dates.data.saiData.length-1].children.length;i++){
if($(this).find("p").html() == dates.data.saiData[dates.data.saiData.length-1].children[i].name_en){
ctContent(radarLeftRight[dates.data.saiData[dates.data.saiData.length-1].children[i].name_en],index);
}

}
/*
if($(this).find("p").html() == "Constructability"){

ctContent(radarLeftRight.Constructability,index);


}else if($(this).find("p").html() == "Reusability"){

ctContent(radarLeftRight.Reusability,index);

}else if($(this).find("p").html() == "Modifiability"){

ctContent(radarLeftRight.Modifiability,index);

}else if($(this).find("p").html() == "Testability"){

ctContent(radarLeftRight.Testability,index);

}*/
})

//box_con_children ul li添加數據
$(".box_con_children ul li").each(function(e){
if(saiData.dates.children[e].metricDetail){
//$(this).css("height",(saiData.dates.children[e].metricDetail.length)*65);
}else{
$(this).css("height",70);
}

})
//box 高度根據數據動態變化
$(".box").css("height",$(".box_top").height()+$(".box_content").height()+$(".box_con_children").height()+400);

}

轉載于:https://www.cnblogs.com/duguangyan/p/7251194.html

總結

以上是生活随笔為你收集整理的华为项目Tree canvas画图2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。