使用canvas画个正方形(canvas绘制树形结构可视图形的实现)
类别:Web前端 浏览量:711
时间:2021-10-16 00:28:19 使用canvas画个正方形
canvas绘制树形结构可视图形的实现如下图,最近项目中需要这么个树形结构可视化数据图形,找了好多可视化插件,没有找到可用的,所以就自己画了一个,代码如下。
- 树形分支是后端接口返回数据渲染,可展示多条;
- 代码可拓展,可封装;
- 点击节点可查看备注;
<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); }) }) }
到此这篇关于canvas绘制树形结构可视图形的实现的文章就介绍到这了,更多相关canvas树形结构内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- canvas跟随鼠标绘制(如何在Canvas上的图形/图像绑定事件监听的实现)
- canvas绘制分辨率(通过canvas转换颜色为RGBA格式及性能问题的解决)
- canvas怎么压缩图片(使用canvas压缩图片大小的方法示例)
- 前端ui 滑动条(AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码)
- canvas怎么获取内容(详解canvas.toDataURL报错的解决方案全都在这了)
- js使用canvas(JavaScript canvas实现七彩时钟效果)
- canvas图片裁剪(使用canvas压缩图片上传的方法示例)
- html5canvas曲线图例子(html5利用canvas实现颜色容差抠图功能)
- canvas绘制图像文件方法(Canvas多边形绘制的实现方法)
- html5canvas案例(h5使用canvas画布实现手势解锁)
- canvas 中增加组件(如何在Canvas中添加事件的方法示例)
- 使用canvas的好坏(关于canvas绘制模糊问题的解决方法)
- canvas绘制动态线条(5分钟实现Canvas鼠标跟随动画背景)
- canvas画法教学(手把手教你实现一个canvas智绘画板的方法)
- canvas动态图(canvas绘制太极图的实现示例)
- canvas如何将一组数据生成柱子图(Canvas环形饼图与手势控制的实现代码)
- 金球奖只青睐那些会戴珠宝的女人(金球奖只青睐那些会戴珠宝的女人)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
热门推荐
- kubernetes最优pod数(详解kubernetes pod的编排和生命周期)
- thinkphp中view视图的作用(Thinkphp5.0框架视图view的模板布局用法分析)
- ASP.NET将Excel数据导入到数据库
- centos7怎样安装vnc(Ubuntu 20.04系统中安装vncserver的方法步骤)
- pandas 导入数据库(详解pandas的外部数据导入与常用方法)
- python 爬虫招聘(Python3获取拉勾网招聘信息的方法实例)
- php实例说明(PHP中Static静态关键字功能与用法实例分析)
- windows2003ftp配置(轻松架设Windows 2003用户隔离FTP站点的注意事项)
- php语法分析方法(PHP中localeconv函数的用法)
- mysql如何修改列的默认值(mysql查询的时候给字段赋默认值操作)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9