提供3000多款全球软件/控件产品
针对软件研发的各个阶段提供专业培训与技术咨询
根据客户需求提供定制化的软件开发服务
全球知名设计软件,显著提升设计质量
打造以经营为中心,实现生产过程透明化管理
帮助企业合理产能分配,提高资源利用率
快速打造数字化生产线,实现全流程追溯
生产过程精准追溯,满足企业合规要求
以六西格玛为理论基础,实现产品质量全数字化管理
通过大屏电子看板,实现车间透明化管理
对设备进行全生命周期管理,提高设备综合利用率
实现设备数据的实时采集与监控
利用数字化技术提升油气勘探的效率和成功率
钻井计划优化、实时监控和风险评估
提供业务洞察与决策支持实现数据驱动决策
翻译|使用教程|编辑:秦林|2022-10-19 11:01:33.200|阅读 716 次
概述:这篇文章给大家带来dhtmlxGantt时间和范围设置的讲解。
# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>
相关链接:
这篇文章给大家带来dhtmlxGantt时间和范围设置的讲解。
要设置比例的单位,请使用相应比例对象中的unit属性:
可能的值是:“分钟”、“小时”、“天”、“周”、“季度”、“月”、“年”。
gantt.config.scales = [ {unit: "month", step: 1, format: "%F, %Y"}, {unit: "day", step: 1, format: "%j, %D"} ]; gantt.init("gantt_here");
默认范围设置
如果您没有明确指定日期范围,甘特图会使用加载任务的日期,并在比例尺中的第一个任务之前和最后一个任务之后添加偏移量。偏移量由时间刻度的设置定义。根据scale_offset_minimal值,它可以是通过scales选项的unit属性定义的时间单位,也可以是最小的时间刻度单位。
您可以使用getState方法以编程方式获取显示的日期范围。
var state = gantt.getState(); console.log(state.min_date); // -> Mon Jan 01 2018 00:00:00 console.log(state.max_date); // -> Tue Jan 01 2019 00:00:00
比例范围在甘特图渲染上重新计算。如果用户将任务移到显示的时间范围之外,则将显示任务行,但在完成重新绘制完成之前,条形元素将不可见。
为了自动调整比例,请使用fit_tasks配置。
gantt.config.fit_tasks = true; gantt.init("gantt_here");
明确设置日期范围
或者,您可以使用start_date和end_date配置选项明确设置日期范围:
gantt.config.start_date = new Date(2018, 02, 31); gantt.config.end_date = new Date(2018, 03, 09); gantt.init("gantt_here");
它们也可以在甘特图初始化调用中指定:
gantt.init("gantt_here", new Date(2018, 02, 31), new Date(2018, 03, 09));
如果同时指定了start_date和end_date选项,并且您创建了超出范围的任务,则该任务将从图表中消失。 要在图表中显示任务,请使用show_tasks_outside_timescale配置。
gantt.config.start_date = new Date(2019, 02, 31); gantt.config.end_date = new Date(2019, 03, 09); gantt.config.show_tasks_outside_timescale = true; gantt.init("gantt_here");
如果您不使用此配置,您可以扩展范围:
gantt.attachEvent("onLightboxSave", function(id, task, is_new){ var taskStart = task.start_date; var taskEnd = task.end_date; var scaleStart = gantt.config.start_date; var scaleEnd = gantt.config.end_date; // if the task is out of the range if(scaleStart > taskEnd || scaleEnd < taskStart ){ // update timescale range gantt.config.end_date=new Date(Math.max(taskEnd.valueOf(), scaleEnd.valueOf())); gantt.config.start_date=new Date(Math.min(taskStart.valueOf(),scaleStart.valueOf())); gantt.render(); } return true; });
或者向灯箱控件添加验证:
gantt.attachEvent("onLightboxSave", function(id, task, is_new){ var taskStart = task.start_date; var taskEnd = task.end_date; var scaleStart = gantt.config.start_date; var scaleEnd = gantt.config.end_date; // check if the task is out of the range if(scaleStart > taskEnd || scaleEnd < taskStart ){ gantt.message({ type:"warning", text:"Warning! The task is outside the date range!", expire:5000 }); return false; } return true; });
动态更改显示范围
有几种方法可以动态更改显示的范围:
您可以通过在每次重新绘制甘特图时更新start_date / end_date配置来重新计算比例范围:
gantt.attachEvent("onBeforeGanttRender", function(){ var range = gantt.getSubtaskDates(); var scaleUnit = gantt.getState().scale_unit; if(range.start_date && range.end_date){ gantt.config.start_date = gantt.calculateEndDate(range.start_date, -4, scaleUnit); gantt.config.end_date = gantt.calculateEndDate(range.end_date, 5, scaleUnit); } }); gantt.init("gantt_here");
gantt.config.fit_tasks = true; gantt.init("gantt_here");
如果同时指定了start_date和end_date选项,则需要使用上述选项之一才能使fit_tasks属性正常工作。
gantt.attachEvent("onTaskDrag", function(id, mode, task, original){ var state = gantt.getState(); var minDate = state.min_date, maxDate = state.max_date; var scaleStep=gantt.date.add(new Date(),state.scale_step,state.scale_unit)-new Date(); var showDate, repaint = false; if(mode == "resize" || mode == "move"){ if(Math.abs(task.start_date - minDate) < scaleStep){ showDate = task.start_date; repaint = true; }else if(Math.abs(task.end_date - maxDate) < scaleStep){ showDate = task.end_date; repaint = true; } if(repaint){ gantt.render(); gantt.showDate(showDate); } } });
显示明确日期范围之外的任务
为此,您需要将show_tasks_outside_timescale配置参数设置为true:
var data = { "tasks": [ {"id":1, "text":"Project #1", "start_date": "01-09-2018", "end_date": "02-09-2018"}, {"id":2, "text":"Project #2", "start_date": "01-09-2021", "end_date": "02-09-2021"}, {"id":3, "text":"Task #1", "start_date": "03-02-2020", "end_date": "05-02-2020"}, ], "links":[] }; gantt.config.show_tasks_outside_timescale = true; gantt.init("gantt_here", new Date(2020, 1, 1), new Date(2020, 2,1));
因此,id 为“1”和“2”的任务将在页面上显示为时间线区域中的空行,并在网格中显示指定的名称和开始日期。
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理控件应用程序的所有需求,是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯,欢迎在线咨询或者私信我获取正版试用版及报价。
甘特图控件交流群:764148812 欢迎进群交流讨论
本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn
本文探讨 SQL Server 中 NULL 和空值之间的区别,并讨论如何有效地处理它们。
Unity 是一款功能极其丰富的游戏引擎,允许开发人员将各种媒体集成到他们的项目中。但是,它缺少最令人兴奋的功能之一 - 将 Web 内容(例如 HTML、CSS 和 JavaScript)直接渲染到 3D 场景中的纹理上的能力。在本文中,我们将介绍如何使用 DotNetBrowser 在 Unity3D 中将 Web 内容渲染为纹理。
DevExpress v24.2帮助文档正式发布上线了,请按版本按需下载~
本教程将向您展示如何用MyEclipse构建一个Web项目,欢迎下载最新版IDE体验!
一个用于构建跨浏览器Web应用和移动应用的强大JavaScript UI库。
DHTMLX Scheduler一个类似于Google日历的强大JavaScript日程安排控件。
DHTMLX Gantt针对您的解决方案的交互式JavaScript / HTML5甘特图
服务电话
重庆/ 023-68661681
华东/ 13452821722
华南/ 18100878085
华北/ 17347785263
客户支持
技术支持咨询服务
服务热线:400-700-1020
邮箱:sales@pclwef.cn
关注我们
地址 : 重庆市九龙坡区火炬大道69号6幢