原生 JS+CSS+HTML 实现时序图的方法


Posted in HTML / CSS onJuly 31, 2019

之前本人使用React + AntDesign 实现了一个简单的时序图,但是后来有了更复杂的需求,并且要求同时展示2000个任务的展示,这就涉及到了性能问题,本人先使用React+antd+ts实现了一个基本满足下面需求的demo,但是react的渲染机制造成了较大的性能问题,利用chrome自带的Performance,测试发现demo的首次渲染高达10s以上,并且后续的操作也会使整个页面非常卡。经过思索后决定使用原声js+css+html去实现,因为原声js下性能是最优的。下面先来说说新版本的需求:

  • 左侧以树形结构展示任务,可折叠
  • 右侧展示任务运行所耗时间的长度
  • 需要用线条链接任务之间的关系
  • 右侧可缩放查看详细的任务状态
  • 缩放时图形保持以鼠标为中心向两端成一定比例放大,放大时里面的文字描述不受影响
  • 图形缩放时表示任务耗时的时间以及坐标需要跟随图像放大的比例进行相应变化
  • 鼠标在时序图上移动时出现一根线条提示当前的时间以及信息

效果图

图一:

原生 JS+CSS+HTML 实现时序图的方法
 

图二:

原生 JS+CSS+HTML 实现时序图的方法

实现难点

鼠标缩放,x轴的缩放方式

鼠标缩放产生时序图X轴的缩放。时序图的缩放,在这里提供三种思路:

  1. 做数据截取,按照一定的算法截取前后的数据,然后重新渲染整个页面
  2. 利用css3的scaleX对时序图的dom做缩放
  3. 实际改变时序图dom的width,里面的任务运行的长度,连接线条的长度,任务运行预计需要的时长都以百分比显示。

三种思路的优缺点:

  1. 优点:不需要去操作dom的css属性,之间重新渲染,比较方便。缺点:对于使用dom重绘,耗费性能严重,大量任务渲染时性能很慢。
  2. 优点:只需改变dom的css,加载快,较流程。缺点:计算麻烦,使用过scaleX的小伙伴会发现当我X轴放大时垂直连接线会变宽,字体会横向拉伸,都需要去反向缩小。
  3. 优点:加载快,很流畅,一次计算好元素所占宽度的占百分比,后面的操作都不需要去计算。缺点:使用百分比计算会有一定误差,放大到一定程度会看的出来。(综合考虑,本人采用的是第三种)
// 计算宽度百分比的函数
// 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;
  };

鼠标缩放,保持以鼠标为中心,往两边放大

先放推理过程图:

原生 JS+CSS+HTML 实现时序图的方法

// 上图解释
// 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;

使用连线表示任务之间的关系

方案:

  1. 采用的时css3 + js + html5,用伪元素绘制。
  2. 用dom包裹直角图片,设置其位置及高度。
  3. 用标签绘制
     

优缺点:

  1. 优点:不会增加多余的标签,对渲染有利。缺点:父任务产生了多个子任务,不好添加伪类及设置伪类的高度及宽度。
  2. 优点:方便,只要计算子任务距父任务的高度即可。缺点:任务过多时图片会非常多,很影响性能
  3. 优点:单独控制每个元素的高度及位置,可控性高,可添加反馈色。缺点:添加了较多的元素,对渲染产生影响(本人使用的是第三种,这是一个笨方法,有更好方法的大佬,可以提供建议,多谢)

实现思路:

用一个变量记录每个任务的层级深度,层级深都以当前任务的父任务为起点,就是说是从哪个任务产生的当前任务,同级的子任务进行累加操作。用累加的变量按照一定的比例获取垂直连线的高度以及水平连线的top值,水平连线的长度由任务的创建时间和开始时间决定。(使用上面的宽度百分比函数)

时间单位:天、时、分、秒

这个比较简单,实现思路:

因为本demo的时间4刻度是个刻度,判断最小时间戳与最大时间戳之间的差除以4,是否还有一天的时间(60 * 60 * 24,换算成秒),从大到小的降序获取时间单位。

总结

以上所述是小编给大家介绍的原生 JS+CSS+HTML 实现时序图的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
CSS3颜色值RGBA与渐变色使用介绍
Mar 06 HTML / CSS
HTML5使用Audio标签实现歌词同步的效果
Mar 17 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
input元素的url类型和email类型简介
Jul 11 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
HTML5本地数据库基础操作详解
Apr 26 HTML / CSS
H5新属性audio音频和video视频的控制详解(推荐)
Dec 09 HTML / CSS
Canvas图片分割效果的实现
Jul 29 #HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 #HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 #HTML / CSS
利用 Canvas实现绘画一个未闭合的带进度条的圆环
Jul 26 #HTML / CSS
使用Html5多媒体实现微信语音功能
Jul 26 #HTML / CSS
使用canvas来完成线性渐变和径向渐变的功能的方法示例
Jul 25 #HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
Jul 22 #HTML / CSS
You might like
用ODBC的分页显示
2006/10/09 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
php读取csv文件并输出的方法
2015/03/14 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
js设置组合快捷键/tabindex功能的方法
2013/11/21 Javascript
js实现动态改变字体大小代码
2014/01/02 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
详解vue axios二次封装
2018/07/22 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
简单了解JavaScript作用域
2020/07/31 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python 读文件,然后转化为矩阵的实例
2018/04/23 Python
python matlibplot绘制3D图形
2018/07/02 Python
python实现京东秒杀功能
2018/07/30 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
梅尔频率倒谱系数(mfcc)及Python实现
2019/06/18 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
vscode 配置 python3开发环境的方法
2019/09/19 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
英国豪华针织品牌John Smedley的在线销售商:The Outlet by John Smedley
2018/04/08 全球购物
static全局变量与普通的全局变量有什么区别?static局部变量和普通局部变量有什么区别?static函数与普通函数有什么区别?
2015/02/22 面试题
品恩科技软件测试面试题
2014/10/26 面试题
应届毕业生的个人自我鉴定
2013/10/24 职场文书
大四学生毕业自荐信
2013/11/07 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
2015年考研复习计划
2015/01/19 职场文书
简历自我评价模板
2015/03/11 职场文书
学前班教学反思
2016/02/24 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
pandas中DataFrame检测重复值的实现
2021/05/26 Python