溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文小編為大家詳細介紹“html5中如何繪制樹形結構的圖形”，內容詳細，步驟清晰，細節處理妥當，希望這篇“html5中如何繪制樹形結構的圖形”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
代碼如下：
<canvas id="canvas" width="750" height="800"></canvas>const canvas_options={
canvasWidth: 750,
canvasHeight: 800,
chartZone: [70,70,750,570], //坐標繪制區域
yAxisLabel: ['0%','10%','20%','30%','40%','50%','60%','70%','80%','90%','100%'],//y軸坐標text
yAxisLabelWidth: 70,//y軸最大寬度
yAxisLabelMax: 100,//y軸最大值
middleLine: 410, //中間線
pillarWidth: 10,//柱子寬度
distanceBetween: 50,//柱狀圖繪制區域距離兩邊間隙
pillar: [120,70,700,750],//柱狀圖繪制區域
mainTrunkHeight: 90,//底部開始主干高度
dialogWidth: 300,//彈窗寬度
dialogLineHeight: 30,//彈窗高度
dialogDrawLineMax: 4,
}
const nodeClick = [];
var chooseNode = null;
const datalist={
showDataInfo: {
city:[
{
name: '項目1',
status: 1, //狀態：0已完成 1進行中
node: [
{ value: 10, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
{ value: 20, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
]
},
{
name: '項目2',
status: 0, //狀態：0已完成 1進行中
node: [
{ value: 10, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
{ value: 50, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
{ value: 100, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
]
},
{
name: '項目3',
status: 1, //狀態：0已完成 1進行中
node: [
{ value: 20, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
{ value: 30, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
{ value: 40, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
]
},
{
name: '項目4',
status: 1, //狀態：0已完成 1進行中
node: [
{ value: 20, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
{ value: 30, date: '2020-03-12 15:50:02', content: '用于組織信息和操作，通常也作為詳細信息的入口。' },
]
},
]
}
}
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
ctx.save();
drawYLabel(canvas_options,ctx); //繪制y軸坐標
drawStartButton(ctx,canvas_options);
drawData(ctx,datalist.showDataInfo,canvas_options);
canvas.addEventListener("click",event=>{
//清除之前的彈窗
if(chooseNode!=null){
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
drawYLabel(canvas_options,ctx); //繪制y軸坐標
drawStartButton(ctx,canvas_options);
drawData(ctx,datalist.showDataInfo,canvas_options);
chooseNode = null
}
//判斷點擊節點
let rect = canvas.getBoundingClientRect();
let zoom = rect.width/canvas_options.canvasWidth;
let x = (event.clientX/zoom - rect.left/zoom).toFixed(2);
let y = (event.clientY/zoom - rect.top/zoom).toFixed(2);
for(var t=0;t<nodeClick.length;t++){
ctx.beginPath();
ctx.arc(nodeClick[t].x,nodeClick[t].y,15,0,Math.PI*2,true);
if(ctx.isPointInPath(x, y)){
textPrewrap(ctx,`備注描述：${nodeClick[t].date}`,nodeClick[t].x+20,nodeClick[t].y+20,canvas_options.dialogWidth-40);
ctx.restore();
chooseNode=t
break;
}else{
chooseNode=null
}
}
});
//content：需要繪制的文本內容; drawX：繪制文本的x坐標; drawY：繪制文本的y坐標;
//lineMaxWidth：每行文本的最大寬度
function textPrewrap(ctx,content,drawX, drawY, lineMaxWidth){
var drawTxt=''; //當前繪制的內容
var drawLine = 1;//第幾行開始繪制
var drawIndex=0;//當前繪制內容的索引
//判斷內容是夠可以一行繪制完畢
if(ctx.measureText(content).width<=lineMaxWidth){
drawDialog(ctx,canvas_options.dialogWidth,canvas_options.dialogLineHeight,drawX,drawY);
ctx.fillText(content.substring(drawIndex,i),drawX.drawY);
}else{
for(var i=0;i<content.length;i++){
drawTxt += content[i];
if(ctx.measureText(drawTxt).width>=lineMaxWidth){
drawDialog(ctx,canvas_options.dialogWidth,canvas_options.dialogLineHeight,drawX,drawY);
ctx.fillText(content.substring(drawIndex,i+1),drawX,drawY);
drawIndex = i+1;
drawLine+=1;
//drawY+=lineHeight;
drawTxt='';
}else{
//內容繪制完畢，但是剩下的內容寬度不到lineMaxWidth
if(i===content.length-1){
drawDialog(ctx,canvas_options.dialogWidth,canvas_options.dialogLineHeight,drawX,drawY);
ctx.fillText(content.substring(drawIndex,i+1),drawX,drawY)
}
}
}
}
}
function drawDialog(ctx,width,height,x,y){
ctx.beginPath();
ctx.fillStyle="rgba(0,0,0,0.8)";
ctx.fillRect(x,y,width,height);
ctx.font="22px ''";
ctx.fillStyle="#fff";
ctx.textAlign = 'left';
ctx.textBaseline="top";
}
//繪制y軸坐標
function drawYLabel(options,ctx){
let labels = options.yAxisLabel;
let yLength = (options.chartZone[3]-options.chartZone[1])*0.98;
let gap = yLength/(labels.length-1);
labels.forEach((item,index)=>{
//繪制圓角背景
//this.radiusButton(ctx,0,options.chartZone[3]-index*gap-13,50,24,8,"#313947");
//繪制坐標文字
ctx.beginPath();
ctx.fillStyle="#878787";
ctx.font="18px ''";
ctx.textAlign="center";
ctx.fillText(item,25,options.chartZone[3]-index*gap+5);
//繪制輔助線
ctx.beginPath();
ctx.strokeStyle="#eaeaea";
ctx.strokeWidth=2;
ctx.moveTo(options.chartZone[0],options.chartZone[3]-index*gap);
ctx.lineTo(options.chartZone[2],options.chartZone[3]-index*gap);
ctx.stroke();
})
}
//繪制開始按鈕
function drawStartButton(ctx,options){
//繪制按鈕圖形
this.radiusButton(ctx,options.middleLine-(160/2),options.canvasHeight-50,160,50,8,'#F4C63D');
ctx.fillStyle="#fff";
ctx.font="24px ''";
ctx.textAlign="center";
ctx.fillText('開始',options.middleLine,options.canvasHeight-15);
//繪制狀態
ctx.beginPath();
ctx.fillStyle="#333";
ctx.font="24px ''";
ctx.textAlign = "left";
ctx.fillText("已完成",0,options.canvasHeight-100);
ctx.fillText("進行中",0,options.canvasHeight-50);
//繪制紅色按鈕
ctx.beginPath();
ctx.fillStyle="#d35453";
ctx.arc(options.chartZone[0]+30,options.canvasHeight-100-7,8,0,2 * Math.PI,true);
ctx.fill();
ctx.beginPath();
ctx.strokeStyle="#d35453";
ctx.arc(options.chartZone[0]+30,options.canvasHeight-100-7,14,0,2 * Math.PI,true);
ctx.stroke();
//繪制藍色按鈕
ctx.beginPath();
ctx.fillStyle="#24b99a";
ctx.arc(options.chartZone[0]+30,options.canvasHeight-50-8,8,0,2 * Math.PI,true);
ctx.fill();
ctx.beginPath();
ctx.strokeStyle="#24b99a";
ctx.arc(options.chartZone[0]+30,options.canvasHeight-50-8,14,0,2 * Math.PI,true);
ctx.stroke();
}
//封裝繪制圓角矩形函數
function radiusButton(ctx,x,y,width,height,radius,color_back){
ctx.beginPath();
ctx.fillStyle= color_back
ctx.moveTo(x,y+radius);
ctx.lineTo(x,y+height-radius);
ctx.quadraticCurveTo(x,y+height,x+radius,y+height);
ctx.lineTo(x+width-radius,y+height);
ctx.quadraticCurveTo(x+width,y+height,x+width,y+height-radius);
ctx.lineTo(x+width,y+radius);
ctx.quadraticCurveTo(x+width,y,x+width-radius,y);
ctx.lineTo(x+radius,y);
ctx.quadraticCurveTo(x,y,x,y+radius);
ctx.fill()
}
//繪制數據
function drawData(ctx,data,options){
//const paths=[];
let number = data.city.length;
//繪制矩形
data.city.forEach((item,index)=>{
let indexVal = number==1?1:index;
let numberVal = number==1?2:number-1
let x0 = options.chartZone[0]+options.distanceBetween+(options.chartZone[2]-options.chartZone[0]-options.distanceBetween*2)/numberVal*indexVal;
let value = item.node[item.node.length-1].value;
let height = (value/options.yAxisLabelMax*(options.chartZone[3]-options.chartZone[0])*0.98).toFixed(2);
let y0=options.chartZone[3] - height;
//柱狀圖底部
ctx.beginPath();
ctx.fillStyle= '#eee';
ctx.fillRect(x0-5,80,options.pillarWidth,options.chartZone[3]-80);
//貝塞爾曲線
ctx.beginPath();
ctx.strokeStyle = item.status==0?"#d35453":'#24b99a';
ctx.lineWidth=options.pillarWidth;
ctx.moveTo(options.middleLine,options.pillar[3]); //貝塞爾曲線起始點
ctx.lineTo(options.middleLine,options.canvasHeight-50-options.mainTrunkHeight); //貝塞爾曲線中間豎線
ctx.quadraticCurveTo(x0,options.canvasHeight-50-options.mainTrunkHeight,x0,options.chartZone[3]);
//繪制柱狀圖進度
ctx.lineTo(x0,y0);
ctx.stroke();
//繪制文字
ctx.font="28px ''";
ctx.textAlign='center';
ctx.fillStyle="#333";
ctx.fillText(item.name,x0,options.chartZone[1]-20);
//繪制節點
item.node.forEach((node_item,node_index)=>{
let y1= options.chartZone[3] - (node_item.value/options.yAxisLabelMax*(options.chartZone[3]-options.chartZone[0])*0.98).toFixed(2);
ctx.beginPath();
ctx.arc(x0,y1,15,0,Math.PI*2,true);
ctx.fillStyle="rgba(108,212,148,1)";
ctx.fill();
ctx.beginPath();
ctx.arc(x0,y1,9,0,Math.PI*2,true);
ctx.fillStyle="rgba(255,255,255,0.8)";
ctx.fill();
const pointInfo={
x:x0,
y:y1,
date: node_item.data,
content: node_item.content,
value: node_item.value
};
nodeClick.push(pointInfo);
})
})
}讀到這里，這篇“html5中如何繪制樹形結構的圖形”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
