官方网站建设报价,联通物联网服务运营平台,手机网速慢怎么办,营销型网站建设 课程基于JS简单甘特图
基于JS简单甘特图
先来看一下效果吧#xff0c;这里的需求是从早上的5点为开始时间#xff0c;到第二天到凌晨5点
前期准备
其实网上有很多甘特图的实现方式#xff0c;但是他们都只能具象到天#xff0c;不能具体到某个时间点#xff0c;而且每一个…基于JS简单甘特图
基于JS简单甘特图
先来看一下效果吧这里的需求是从早上的5点为开始时间到第二天到凌晨5点
前期准备
其实网上有很多甘特图的实现方式但是他们都只能具象到天不能具体到某个时间点而且每一个具体的时间段中的描述是不能自定义的所以准备自己写一下了。
实现逻辑 我们可以先模拟一些demo数据这里面最为主要的数据为每个时间点我们要实现上面的效果需要对每个时间点进行拆分。 var demoData: [{ carNum: 川A09384,innerData: [{start: 2019/1/21 6:23,end: 2019/1/21 7:45,value: A站点,bg: green},{start: 2019/1/21 12:23,end: 2019/1/21 16:45,value: B站点,bg: yellow},{start: 2019/1/21 20:00,end: 2019/1/21 23:25,value: C站点,bg: blue}]},{ carNum: 川A04384,innerData: [{start: 2019/1/21 5:23,end: 2019/1/21 6:05,value: A站点,bg: blue},{start: 2019/1/21 10:23,end: 2019/1/21 13:45,value: B站点,bg: green},{start: 2019/1/21 21:00,end: 2019/1/22 3:35,value: C站点,bg: yellow},]}]首先创建时间 // 创建时间
createHours: function(){var startHour 5;var endHour 11;var html ;for (let i startHour; i 24; i) {html div${i 10 ? 0${i} : i}:00/div}for (let i 0; i endHour; i) {html div${i 10 ? 0${i} : i}:00/div}document.getElementById(hour).innerHTML html;
},根据数据绘制甘特图 我们将 1H 60px这样去定宽即 1px 1M 绘制第一个时间段 start:‘2019/1/21 6:23’; end: ‘2019/1/21 7:45’; var start new Date(2019/1/21 6:23),end new Date(2019/1/21 7:45),start_h start.getHours(), // 开始时间start_m start.getMinutes(), // 开始分钟 end_h end.getHours(), // 结束时间end_m end.getMinutes(), // 结束分钟left_offset 0;_left_offset 0;width ;// 获取时间段甘特图的开始位置我们从5点开始,所以-5left_offset (start_h - 5) * 60 start_m;// 获取每一段甘特图的宽度// 先计算出结束时间的位置然后在减去开始时间的左边距width ((end_h - 5) * 60 end_m) - left_offset;// 使用现有的左边距减去前一个时间的左边距_left_offset left_offset - allLeft;// 因为存在多个时间段所以在绘制下一个时间断时left_offset// 使用allLeft存储上一个时间断距离左边的距离。allLeft left_offset width;// 将其添加到DOM中html span stylewidth:${width}px;margin-left:${_left_offset}px;${innerData[i].value}/span;首先需要找到时间段中开始时间的开始位置 计算出时间的width遵循1px 1M的规则。 在设置margin-left时记得减去上一个时间段甘特图的margin-left重点。 没绘制一条后存储其margin-left方便下一个时间段使用。
关于跨天怎么计算 当我们的时间段是属于跨天的怎么计算他的开始和结束位置以及他的宽度呢直接贴代码了哈 createData: function() {
var data this.demoData;
var today new Date().getDate(); // 今天的日期
for (let m 0; m data.length; m) {var innerData data[m].innerData;var html ;var allLeft 0;for (let i 0; i innerData.length; i) {var start new Date(innerData[i].start),end new Date(innerData[i].end),start_d start.getDate(),end_d end.getDate(),start_h start.getHours(),start_m start.getMinutes(),end_h end.getHours(),end_m end.getMinutes(),left_offset 0;_left_offset 0;width ;if (start_d (today 1)) {left_offset ((23 - 5) * 60) ((start_h 1) * 60) start_m;_left_offset left_offset - allLeft;width (((23 (end_h 1)) - 5) * 60 end_m) - left_offset;} else if (end_d (today 1)) {left_offset ((start_h - 5) * 60) start_m;_left_offset left_offset - allLeft;width (((24 end_h) - 5) * 60 end_m) - left_offset;} else {left_offset (start_h - 5) * 60 start_m;_left_offset left_offset - allLeft;width ((end_h - 5) * 60 end_m) - left_offset;}allLeft left_offset width;html span stylewidth:${width}px;margin-left:${_left_offset}px;background:${innerData[i].bg}${innerData[i].value}/span;}document.getElementById(container).innerHTML div classgantt-item ${html}/div;
}
}这个地方就不详细解说了有什么不懂的地方欢迎大家留言。代码很简洁主要用于实现一个比较简单的甘特图。不需要下载什么插件之类的。 这里把代码贴出来哈大家可以一起交流或许你有更好的实现方式呢。 htmlheadtitle测试demo/titlestyle typetext/css#container {width: 100%;overflow: scroll;height: calc(100vh - 0px);width: 1900px;}.carNum {float:left;width:100px;text-align: center;}#hour {width: 1800px;overflow: scroll;}#hour div{width: 60px;float: left;border-left: 1px solid #ddd;background: #ccc;text-align: center;box-sizing: border-box;}.gantt-item {width: 1800px;}.gantt-item:hover{background:rgba(0,0,0,.1);}.gantt-item span {height: 20px;;display: inline-block;margin: 5px 0px;font-size: 12px;text-align: center;color:#fff;background:green;}.nowTime {border: 1px solid green;display: inline-block;height: 500px;height: calc(100vh - 0px);position: absolute;top: 0px;}/style/headbodydiv idcontainerdiv classcarNumdiv stylebackground:#ccc;车牌号/divdiv styleline-height:30px;川A09384/divdiv styleline-height:30px;川A09384/divdiv styleline-height:30px;川A09384/div/divdiv idhour stylefloat:righ/div/div/bodyscript typetext/javascriptvar gantt {demoData: [{ innerData: [{start: 2019/1/21 6:23,end: 2019/1/21 7:45,value: A站点,bg: green},{start: 2019/1/21 12:23,end: 2019/1/21 16:45,value: B站点,bg: yellow},{start: 2019/1/21 20:00,end: 2019/1/21 23:25,value: C站点,bg: blue}]},{ innerData: [{start: 2019/1/21 5:23,end: 2019/1/21 6:05,value: A站点,bg: blue},{start: 2019/1/21 10:23,end: 2019/1/21 13:45,value: B站点,bg: green},{start: 2019/1/21 21:00,end: 2019/1/22 3:35,value: C站点,bg: yellow},]},{ innerData: [{start: 2019/1/21 8:23,end: 2019/1/21 10:05,value: A站点,bg: blue},{start: 2019/1/21 13:23,end: 2019/1/21 14:45,value: B站点,bg: green},{start: 2019/1/21 22:00,end: 2019/1/22 3:35,value: C站点,bg: red},{start: 2019/1/22 4:00,end: 2019/1/22 7:35,value: D站点,bg: green},]},],// 初始化init: function() {this.showNowTime();this.createHours();this.createData();},// 创建时间createHours: function(){var startHour 5;var endHour 11;var html ;for (let i startHour; i 24; i) {html div${i 10 ? 0${i} : i}:00/div}for (let i 0; i endHour; i) {html div${i 10 ? 0${i} : i}:00/div}document.getElementById(hour).innerHTML html;},// 当前时间线showNowTime: function() {var date new Date();var h date.getHours(),m date.getMinutes();var offset (h - 5) * 60 m;var html div classnowTime stylemargin-left:${offset}px/div;document.getElementById(container).innerHTML div classgantt-item${html}/div;},createData: function() {var data this.demoData;var today new Date().getDate(); // 今天的日期for (let m 0; m data.length; m) {var innerData data[m].innerData;var html ;var allLeft 0;for (let i 0; i innerData.length; i) {var start new Date(innerData[i].start),end new Date(innerData[i].end),start_d start.getDate(),end_d end.getDate(),start_h start.getHours(),start_m start.getMinutes(),end_h end.getHours(),end_m end.getMinutes(),left_offset 0;_left_offset 0;width ;if (start_d (today 1)) {left_offset ((23 - 5) * 60) ((start_h 1) * 60) start_m;_left_offset left_offset - allLeft;width (((23 (end_h 1)) - 5) * 60 end_m) - left_offset;} else if (end_d (today 1)) {left_offset ((start_h - 5) * 60) start_m;_left_offset left_offset - allLeft;width (((24 end_h) - 5) * 60 end_m) - left_offset;} else {left_offset (start_h - 5) * 60 start_m;_left_offset left_offset - allLeft;width ((end_h - 5) * 60 end_m) - left_offset;}allLeft left_offset width;html span stylewidth:${width}px;margin-left:${_left_offset}px;${innerData[i].value}/span;}document.getElementById(container).innerHTML div classgantt-item ${html}/div;}}}gantt.init();/script
/html
