原生态 JS+CSS+HTML 完成时钟频率图的方式

2021-02-22 18:29 jianzhan

以前自己应用React + AntDesign 完成了1个简易的时钟频率图，可是后来有了更繁杂的要求，而且规定另外展现2000个每日任务的展现，这就涉及到到了特性难题，自己先应用React+antd+ts完成了1个基础考虑下面要求的demo，可是react的3D渲染体制导致了较大的特性难题，运用chrome自带的Performance，检测发现demo的初次3D渲染高达10s以上，而且后续的实际操作也会使全部网页页面十分卡。历经思考后决策应用原声js+css+html去完成，由于原声js下特性是最佳的。下面先来讲说新版本号的要求：

  • 左边以树形构造展现每日任务，可折叠
  • 右边展现每日任务运作所耗時间的长度
  • 必须用线条连接每日任务之间的关联
  • 右边可放缩查询详尽的每日任务情况
  • 放缩时图型维持以电脑鼠标为管理中心向两边成1定占比变大，变大时里边的文本叙述不会受到危害
  • 图型放缩时表明每日任务耗时的時间和座标必须追随图象变大的占比开展相应转变
  • 电脑鼠标在时钟频率图上挪动时出現1根线条提醒当今的時间和信息内容

实际效果图

图1：


 

图2：

完成难点

电脑鼠标放缩，x轴的放缩方法

电脑鼠标放缩造成时钟频率图X轴的放缩。时钟频率图的放缩，在这里出示3种思路：

  1. 做数据信息截取，依照1定的优化算法截取前后左右的数据信息，随后再次3D渲染全部网页页面
  2. 运用css3的scaleX对时钟频率图的dom做放缩
  3. 具体更改时钟频率图dom的width，里边的每日任务运作的长度，联接线条的长度，每日任务运作预计必须的时长都以百分比显示信息。

3种思路的优缺陷：

  1. 优势：不必须去实际操作dom的css特性，之间再次3D渲染，较为便捷。缺陷：针对应用dom重绘，消耗特性比较严重，很多每日任务3D渲染时特性很慢。
  2. 优势：只需更改dom的css，载入快，较步骤。缺陷：测算不便，应用过scaleX的小伙子伴会发现当我X轴变大时竖直联接线会变宽，字体样式会横向拉伸，都必须去反方向变小。
  3. 优势：载入快，很顺畅，1次测算好元素所占宽度的占百分比，后边的实际操作都不必须去测算。缺陷：应用百分比测算会有1定偏差，变大到1定水平会看的出来。（综合性考虑到，自己选用的是第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;
  };

电脑鼠标放缩，维持以电脑鼠标为管理中心，往两侧变大

先放逻辑推理全过程图：

// 上图解释
// dom = 时钟频率图的dom元素
// domL1, domeL2 = dom.scrollLeft;
// domeL1表明前1次的dom.scrollLeft;
// domeL2表明当今的dom.scrollLeft;
// scale 表明当今的变大的占比
// scale1 表明上1次的变大占比
// tree_dom.offsetWidth表明左边树的宽度
// clientX1 表明上1次的电脑鼠标部位间距时钟频率图左边的间距 = e.clientX - tree_dom.offsetWidth
// clientX2 表明当今电脑鼠标部位间距时钟频率图的间距

// 以电脑鼠标为管理中心的放缩，公式为：
domL2 = domeL1(scale/scale1) + clientX1(scale/scale1) - e.clientX + tree_dom.offsetWidth
// 公式解读：
// 1. scale/scale1表明本次的放缩占比除以上1次的放缩占比，表明当今的放缩占比
// 左边卷去的宽度在第2次放缩时也会跟随放缩，因此左边的宽度必须乘以放缩占比
// 电脑鼠标部位间距时钟频率图左边的宽度在放缩时也会跟随放缩，因此也要乘以放缩占比
// 最终面减去电脑鼠标部位间距时钟频率图左边的具体间距就等于放缩时左边卷去的长度

// 网页页面编码
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. 优势：不容易提升过剩的标识，对3D渲染有益。缺陷：父每日任务造成了好几个子每日任务，不太好加上伪类及设定伪类的高宽比及宽度。
  2. 优势：便捷，要是测算子每日任务距父每日任务的高宽比便可。缺陷：每日任务过量时照片会十分多，很危害特性
  3. 优势：独立操纵每一个元素的高宽比及部位，可控性性高，可加上意见反馈色。缺陷：加上了较多的元素，对3D渲染造成危害（自己应用的是第3种，这是1个笨方式，有更好方式的巨头，能够出示提议，多谢）

完成思路：

用1个自变量纪录每一个每日任务的等级深层，等级深都以当今每日任务的父每日任务为起始点，便是说是从哪一个每日任务造成确当前男友务，同级的子每日任务开展累加实际操作。用累加的自变量依照1定的占比获得竖直连线的高宽比和水平连线的top值，水平连线的长度由每日任务的建立時间和刚开始時间决策。（应用上面的宽度百分比涵数）

時间企业：天、时、分、秒

这个较为简易，完成思路：

由于本demo的時间4刻度是个刻度，分辨最少時间戳与最大時间戳之间的差除以4，是不是也有1天的時间（60 * 60 * 24,换算成秒），从大到小的降序获得時间企业。

总结

以上所述是网编给大伙儿详细介绍的原生态 JS+CSS+HTML 完成时钟频率图的方式,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！
假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！

为您推荐