html5实现树形结构,canvas绘制树形结构可视图形的实现

最新推荐文章于 2023-08-18 15:25:43 发布
最新推荐文章于 2023-08-18 15:25:43 发布
阅读量778 收藏 1
点赞数
文章标签： html5实现树形结构

如下图，最近项目中需要这么个树形结构可视化数据图形，找了好多可视化插件，没有找到可用的，所以就自己画了一个，代码如下。

树形分支是后端接口返回数据渲染，可展示多条；

代码可拓展，可封装；

点击节点可查看备注；

dab163c13ded671b76d6dc3f6939d59b.png

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

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

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树形结构内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

weixin_39790102
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html5实现树形结构,javascript+css简单实现树形结构列表
weixin_33295562的博客
06-04 1646
静态的树状结构下面是代码====================================================================================全国地区树形列表td{font-size:12px}div{font-family:宋体}div.tree_add{background:url(treeline_2.gif) no-repeatleft;p...
html5利用canvas绘画二级树形结构图的示例
12-13
上周需要做一个把页面左侧列表内容拖拽到右侧区域，并且绘制成关系树的功能。 看了设计图，第一反应是用canvas绘制关系线。 吭哧吭哧搞定这个功能后，发现用canvas绘图，有一个很严重的缺陷。那就是如果左侧关系特别多，需要绘制成百上千条时，而canvas画布的宽高在写dom的时候就已声明。关系很多的情况下，无法使用canvas。 不过还是记录一下研究成果。 下面是设计图： 做出效果如下： html、css代码就不贴了。 js主要用到了拖拽、canvas绘制。 function startDrag(ev) { ev.dataTransfer.setData("Text",ev.ta
h5移动端部门树展示
04-13
h5移动端树列表
vue3之H5实现树形结构排版
最新发布
kjhytfh的博客
08-18 753
最近接到一个需求：要求实现一个树形结构模板，且层级不确定，有多有少，使用vant组件库也没有现成组件，诶！还是自己手动实现一个吧。提示：以下是本篇文章正文内容，下面案例可供参考简单的一个树状结构就实现了，具体真正的的数据结构是什么样子的可自行处理数据再去渲染。
canvas动态画出视图树
12-09
动态添加/删除视图树节点
数据展示方式之树形展示+H5拖动效果
热门推荐
问白的博客
02-26 1万+
我们知道前端最重要的一部分就是如何将数据生动形象的展现给用户，数据展现的巧妙的话在加上H5的一些有意思的交互，说不定就会成为一个很有意思的页面了。常见的数据展示的方式如用表格可以展示很多数据，或者用z-tree展现上下级节点的数据，又或者用echart插件或者对d3对数据进行一些可视化处理，使得数据展现的更为直观丰富。今天来分享一下类似树结构的数据展示，是一颗倒立的树，根节点在最上面。这也是我以前...
canvas绘制树形结构可视图形的实现
12-28
如下图，最近项目中需要这么个树形结构可视化数据图形，找了好多可视化插件，没有找到可用的，所以就自己画了一个，代码如下。 树形分支是后端接口返回数据渲染，可展示多条； 代码可拓展，可封装； 点击节点可...
HTML5_canvas绘制动态树视图 类似结构图.rar
07-10
这个"HTML5_canvas绘制动态树视图 类似结构图.rar"压缩包包含了一个利用Canvas实现的动态树形视图示例，它能帮助我们理解如何用HTML5的Canvas API构建交互式的数据可视化应用。 在Canvas上绘制动态树视图，首先需要...
树形菜单节点图Canvas代码
06-24
接着，设计数据结构来存储树形结构。通常，我们可以用对象表示每个节点，包含属性如ID、文本、子节点数组等。例如： ```javascript var node = { id: 'node1', text: '节点1', children: [/* 其他节点对象 */] };...
Android实现无序树形结构图，类似思维导图和级联分层图(无序，随机位置)
09-18
总的来说，创建Android上的无序树形结构图是一项挑战，但通过SurfaceView和自定义的绘图策略，我们可以实现高度定制且性能良好的可视化效果。同时，合理地组织数据模型，优化绘图过程，以及添加交互功能，将使得这种...
HTML5 学习手笔二：canvas API 绘制树形图案A
weixin_33847182的博客
02-25 189
    上篇通过对canvas 画对角线，了解了一些canvas画图基本原理。现在可以利用HTML5 canvas API创建一个场景：带有长跑跑道的树林。 本篇大纲 用canvas API绘制树木的树冠 为树冠的边框架加粗并且填充树冠颜色 为树冠创造一个强大的树干 绘制跑道  用canvas API绘制树木的树冠 原理还是与上...
html5 可旋转的三维树形结构,利用HTML5实现勾股树植物生长动画特效
weixin_28920737的博客
06-04 470
特效描述：利用HTML5实现 勾股树 植物生长 动画特效。利用HTML5实现勾股树植物生长动画特效代码结构1. HTML代码const canvas = document.querySelector("#canvas");const context = canvas.getContext("2d", { alpha: false });let vw = canvas.width = window...
Canvas笔记——动态添加视图树
benhuo931115的博客
12-09 2643
Canvas笔记——动态添加视图树canvas标签<canvas></canvas>canvas本身并没有任何的绘图能力，所有的绘图工作都是通过js来实现的 最好在一开始的时候就设置canvas的宽高，若不设定浏览器会默认设置canvas大小为宽300，高100像素，建议直接在canvas标签的内部设置<canvas id="myCanvas" width="200" height="200"></
下拉菜单实现树状结构_HTML5的WebGL实现的3D和2D拓扑树
weixin_39884074的博客
12-01 269
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了，那么...
HTML&CSS中的树形结构图
Li5306的博客
05-29 6829
有两个维度影响树视图的布局: 行间距(等于文本的行高)和标记的半径。.tree{虽然我们通常使用相对单位来缩放基于文本大小的用户界面控件，但对于标记，这可能导致控件过小或过大，所以我们使用一个合理的固定大小。
html 树形结构_IT兄弟连 HTML5教程 HTML文件的主体结构
weixin_39744554的博客
12-01 518
每个页面都是一个独立的HTML文档，每个HTML文档的主体结构又都是相同的，而且在一个文档中这样的主体结构只能声明一次。可以简单的将HTML文档主体结构分为两部分，一部分是定义文档类型，HTML5中声明文档类型可比以前的版本简单多了，只需要15个字符就可以搞定。另一部分则是定义文档主体的结构框架标签，因为标签并不是任意排放的，需要有一定的嵌套规则。就像一颗树是从树根到树干、树枝、树叶这样的结构...
html5脑图_HTML5 D3.js 树形结构动画示范（可绘制脑图）
weixin_39765588的博客
12-22 748
JavaScript语言：JaveScriptBabelCoffeeScript确定$.get('/uploads/1811/realOntology.json').done(function(data) {jsonToD3(data);});// Helper functionsfunction jsonToD3(data) {// taken from:// http://bl.ocks.or...
canvas js 绘图插件_D3.js + Canvas 绘制组织结构图
weixin_39590868的博客
11-25 471
D3.js + Canvas 绘制组织结构图使用 D3.js 默认的 svg 渲染D3默认的树状图画图使用的是svg, 比如这个来自D3作者的例子:https://bl.ocks.org/mbostock/4339083使用svg有好有坏:- 好处是方便操作dom元素, 添加用户交互- 坏处是渲染效率不高, 在数据量较大时页面易掉帧, 卡顿在大多数数据量不是特别大情况下, 使用svg的好处是远远盖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值