之前本人使用React + AntDesign 实现了一个简单的时序图,但是后来有了更复杂的需求,并且要求同时展示2000个任务的展示,这就涉及到了性能问题,本人先使用React+antd+ts实现了一个基本满足下面需求的demo,但是react的渲染机制造成了较大的性能问题,利用chrome自带的Performance,测试发现demo的首次渲染高达10s以上,并且后续的操作也会使整个页面非常卡。经过思索后决定使用原声js+css+html去实现,因为原声js下性能是最优的。下面先来说说新版本的需求:
效果图
图一:
图二:
实现难点
鼠标缩放,x轴的缩放方式
鼠标缩放产生时序图X轴的缩放。时序图的缩放,在这里提供三种思路:
三种思路的优缺点:
// 计算宽度百分比的函数 // endTime: 任务的结束时间 // startTime: 任务的开始时间 // maxTime: 所有任务结束时间最大的值 // minTime: 所有任务开始时间最小的值 // time: 所有任务开始时间与结束时间的排序 升序 // task_width: 任务的长度、水平连接线的长度、垂直连接线的left值 const widthFun = function (endTime, startTime, maxTime, minTime) { const task_width = (((Number (endTime) - Number (startTime)) / ((maxTime || time[time.length - 1]) - (minTime || time[0])) * (body_width - tree_box_dom.offsetWidth)) / dom.offsetWidth)*100; return task_width> 100 ? 100 : task_width; };
鼠标缩放,保持以鼠标为中心,往两边放大
先放推理过程图:
// 上图解释 // dom = 时序图的dom元素 // domL1, domeL2 = dom.scrollLeft; // domeL1表示前一次的dom.scrollLeft; // domeL2表示当前的dom.scrollLeft; // scale 表示当前的放大的比例 // scale1 表示上一次的放大比例 // tree_dom.offsetWidth表示左侧树的宽度 // clientX1 表示上一次的鼠标位置距离时序图左侧的距离 = e.clientX - tree_dom.offsetWidth // clientX2 表示当前鼠标位置距离时序图的距离 // 以鼠标为中心的缩放,公式为: domL2 = domeL1(scale/scale1) + clientX1(scale/scale1) - e.clientX + tree_dom.offsetWidth // 公式讲解: // 1. scale/scale1表示本次的缩放比例除以上一次的缩放比例,表示当前的缩放比例 // 左侧卷去的宽度在第二次缩放时也会跟着缩放,所以左侧的宽度需要乘以缩放比例 // 鼠标位置距离时序图左侧的宽度在缩放时也会跟着缩放,所以也要乘以缩放比例 // 最后面减去鼠标位置距离时序图左侧的实际距离就等于缩放时左侧卷去的长度 // 页面代码 time_box_parent.scrollLeft = (time_box_parent.scrollLeft + e.clientX - tree_box_dom.offsetWidth) * (scale_x / scale_x1) - e.clientX + tree_box_dom.offsetWidth;
使用连线表示任务之间的关系
方案:
优缺点:
实现思路:
用一个变量记录每个任务的层级深度,层级深都以当前任务的父任务为起点,就是说是从哪个任务产生的当前任务,同级的子任务进行累加操作。用累加的变量按照一定的比例获取垂直连线的高度以及水平连线的top值,水平连线的长度由任务的创建时间和开始时间决定。(使用上面的宽度百分比函数)
时间单位:天、时、分、秒
这个比较简单,实现思路:
因为本demo的时间4刻度是个刻度,判断最小时间戳与最大时间戳之间的差除以4,是否还有一天的时间(60 * 60 * 24,换算成秒),从大到小的降序获取时间单位。
总结
以上所述是小编给大家介绍的原生 JS+CSS+HTML 实现时序图的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
写给初用Nestj做项目的你(第二篇: 配置gitlab-runner操作gitlab) 如果不想自己搭...
工欲善其事,必先利其器! 就在不久之前,Java领域的开发神器 IntelliJ IDEA 终...
根据百度地图官方解释,在移动端 H5 页面中可监听下面这 4 个事件: touchstart, ...
对于网页制作者来说,最烦琐的事情可能就是给页面中的图片或文字加链接了。假如...
web前端开发中避免不了要在页面上显示很多文章,如何才能从文中,文末点击快捷的...
本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义,mask 译为遮罩。在 C...
前言 2021 年中国共产党将迎来建党 100 周年。百年来中国社会发生了沧桑巨变。从...
考虑以下两段代码: 复制代码 代码如下: urlset url lochttp://www.caixw.com/ar...
最近做项目,遇到一个问题,在手机上要实现视频的全屏播放功能。测试了很久,终...
链入式是把所有的 样式 放在一个或多个 外部样式表文件 中,这个文件是以 css 为...