canvas 华为tree

//canvas画图
//tree_canvas();
function tree_canvas(){
//console.log("sdasd4------------------",saiData);
//box_content 内容添加

var box_content_arr = [];
var box_header_html = "";
var box_content_html = "";
var box_con_children_html ="";
var dates ={};
dates.data ={};
dates.data.saiData= saiData;
$(".tree_box_top").hide();
//默认第一个画线
//box_header 内容添加
//for(var i=0;i<saiData.dates.children.length;i++){
// box_header_html+="<li><h3>"+saiData.dates.children[i].score+"</h3><p>"+saiData.dates.children[i].name_en+"</p></li>";
//}
for(var i=0;i<dates.data.saiData[dates.data.saiData.length-1].children.length;i++){
$(".box_header ul li").eq(i).find("h3").html(dates.data.saiData[dates.data.saiData.length-1].children[i].score);
$(".box_header ul li").eq(i).find("p").html(dates.data.saiData[dates.data.saiData.length-1].children[i].name_en);
}

$(".box_header ul").append(box_header_html);
//box_content 内容添加
for(var i=0;i<saiData.dates.children.length;i++){
box_content_html += "<li><h3>"+saiData.dates.children[i].score+"</h3><p>"+saiData.dates.children[i].name_en+"</p></li>";
box_con_children_html+="<li></li>";
}
$(".box_content ul").html(box_content_html);
$(".box_con_children ul").html(box_con_children_html);

//box_con_children 内容添加
for(var i=0;i<saiData.dates.children.length;i++){
var span = "";
if(saiData.dates.children[i].metricDetail){
for(var j=0;j<saiData.dates.children[i].metricDetail.length;j++) {
span += "<span><h3>"+saiData.dates.children[i].metricDetail[j].defectNum+"</h3><p>"+saiData.dates.children[i].metricDetail[j].defectType+"</p></span><i></i>";
}
}
$(".box_con_children ul li").eq(i).append(span);
if($(".box_con_children ul li").eq(i).html()==""){
$(".box_con_children ul li").eq(i).css("opacity","0");
//$(".box_con_children ul li").eq(i).html("<span><h3>0.0</h3><p>no metricDetail</p></span><i></i>");
}
}
//宽度适配
$(".box_content").css("width",saiData.dates.children.length*100);
//$(".box_header").css("width",saiData.dates.children.length*1180/8);
$(".box_con_children").css("width",saiData.dates.children.length*100);
//canvas 开始画线
//console.log(dates);
var cs = document.getElementById("cs");//获取到canvas元素
cs.width = $(".tree_box").width();
cs.height= $(".tree_box").height();
if($(".box_content").width()>1180){
$("#cs").css("width",$(".box_content").width());
}else{
$("#cs").css("width","1180px");
}
var ct = cs.getContext("2d");//获取上下文的环境

//头部绘制
ctTop();
setTimeout(function(){
ctContent(radarLeftRight.Constructability,0);
$(".box_header ul li").eq(0).css("border","2px solid #f95f5b");
$(".c-main-left").css({"height":$(".c-main-right").height()});
},100);



function ctTop(){
if($(".box_content").width()>1180){
cs.width = $(".box_content").width();
}else{
cs.width =1180;
}
ct.beginPath(); //准备绘制
ct.moveTo($(".tree_box").width()/2,0); //起点
ct.lineTo($(".tree_box").width()/2,100);//中点
ct.lineTo(220,100);//中点
var circle = {
x : 180, //圆心的x轴坐标值
y : 120, //圆心的y轴坐标值
r : 20 //圆的半径
};
//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
ct.arc(circle.x,circle.y,circle.r,1.5*Math.PI,1*Math.PI,true);
ct.lineTo(160,160);//中点
ct.strokeStyle = "#fff";//线条颜色
ct.lineWidth = 2;//线条的宽度
ct.stroke();//绘制

ct.beginPath(); //准备绘制
ct.moveTo($(".tree_box").width()/2,0); //起点
ct.lineTo($(".tree_box").width()/2,100);//中点
ct.lineTo(448,100);//中点
ct.lineTo(448,160);//中点
ct.stroke();//绘制

ct.beginPath(); //准备绘制
ct.moveTo($(".tree_box").width()/2,0); //起点
ct.lineTo($(".tree_box").width()/2,100);//中点
ct.lineTo(736,100);//中点
ct.lineTo(736,160);//中点
ct.stroke();//绘制

ct.beginPath(); //准备绘制
ct.moveTo($(".tree_box").width()/2,0); //起点
ct.lineTo($(".tree_box").width()/2,100);//中点
ct.lineTo(912,100);//中点
var circle = {
x : 1002, //圆心的x轴坐标值
y : 120, //圆心的y轴坐标值
r : 20 //圆的半径
};
//沿着坐标点(100,100)为圆心、半径为50px的圆的顺时针方向绘制弧线
ct.arc(circle.x,circle.y,circle.r,-0.5*Math.PI,0*Math.PI,false);
ct.lineTo(1022,160);//中点
ct.strokeStyle = "#fff";//线条颜色
ct.lineWidth = 2;//线条的宽度
ct.stroke();//绘制
}
// .box_content 画线
function ctContent(data,index){
box_content_arr=[];
ct.clearRect(0,0,cs.width,$(".tree_box").height());

ctTop();
$(".box_content ul li").css("border","2px solid #fff");
$(".box_con_children ul li").css("border","2px solid #fff");
$(".box_con_children ul li").removeClass("box_con_children_active");
$(".box_con_children ul li").find("i").css("opacity","0");
for(var i=0;i<data.length;i++){
var name_en = data[i];
for(var j=0;j<$(".box_content ul li").length;j++){
var liHtml = $(".box_content ul li").eq(j).find("p").html();
if(name_en==liHtml){
box_content_arr.push(j);
//alert(1);

$(".box_content ul li").eq(j).css("border","2px solid #f95f5b");
$(".box_con_children ul li").eq(j).css("border","2px solid #f95f5b");
if(document.location.href.split("#")[1] == "/projectmanager"){
$(".box_con_children ul li").eq(j).addClass("box_con_children_active");
}
$(".box_con_children ul li").eq(j).find("i").css("opacity","1");
ct.beginPath(); //准备绘制
if(index==0){
ct.moveTo(($(".box_header ul li").eq(index).position().left) +160 ,($(".box_header ul li").eq(index).position().top+150)); //起点
ct.lineTo(($(".box_header ul li").eq(index).position().left) +160 ,($(".box_header ul li").eq(index).position().top)+246);//中点
}else if(index==1){
ct.moveTo(($(".box_header ul li").eq(index).position().left) +160 -6,($(".box_header ul li").eq(index).position().top+150)); //起点
ct.lineTo(($(".box_header ul li").eq(index).position().left) +160 -6,($(".box_header ul li").eq(index).position().top)+246);//中点
}else if(index==2){
ct.moveTo(($(".box_header ul li").eq(index).position().left) +160 -5 ,($(".box_header ul li").eq(index).position().top+150)); //起点
ct.lineTo(($(".box_header ul li").eq(index).position().left) +160 -5 ,($(".box_header ul li").eq(index).position().top)+246);//中点
}else if(index==3){
ct.moveTo(($(".box_header ul li").eq(index).position().left) +160 -4,($(".box_header ul li").eq(index).position().top+150)); //起点
ct.lineTo(($(".box_header ul li").eq(index).position().left) +160 -4,($(".box_header ul li").eq(index).position().top)+246);//中点
}