这篇文章给大家带来dhtmlxGantt如何自定义时间的单位。
自定义时间单位
dhtmlxGantt 允许您定义自定义时间单位并在比例配置中为标签设置模板。
要定义自定义单位,您需要在Date 对象中定义 2 个函数:
Date gantt.date.<unit>_start(Date date);Date gantt.date.add_<unit>(Date date, Integer increment);
- 第一个函数应返回任何给定日期的开始时间单位(例如,2 月 14 日 -> 2 月 1 日的 month_start)。
- 第二个函数将日期增加任何给定的持续时间单位数(例如“日期减 2 天”)
示例 1
让我们创建一个“fiscal_year”单位并假设一个财政年度将在 1 月 31 日结束。这是指定新单位的方式:
var firstMonth = 1, firstDay = 1;gantt.date.fiscal_year_start = function(date){ var next = new Date(date); if(next.getMonth() < firstMonth || (next.getMonth() === firstMonth && next.getDate() < firstDay)){ next = gantt.date.add(next, -1, "year"); } next = gantt.date.year_start(next); next.setMonth(firstMonth); next.setDate(firstDay); return next;};gantt.date.add_fiscal_year = function(date, inc){ return gantt.date.add(date, inc, "year");};
然后在代码中使用它,如下所示:
var dateToStr = gantt.date.date_to_str("%Y");function fiscalYearLabel(date){ return dateToStr(gantt.date.fiscal_year_start(date));};gantt.config.scales = [ {unit:"year", step:1, format:"Calendar year %Y"}, {unit:"fiscal_year", step:1, format:fiscalYearLabel}, {unit:"month", step: 1, format: "%M %Y"}, {unit:"day", step: 1, format:"%d %M"}];
示例 2
您可以将每个“日”单元格划分为三个“小时”单元格,标签分别为 00、08、16。逻辑如下所示:
gantt.date.hour_custom_start = function (date) { return date;};gantt.date.add_hour_custom = function (date, inc) { // inc depends on the "step" const nextDate = new Date(date); if (nextDate.getHours() % 8 != 0) { // the hour value is not 0, 8 or 16 const diff = Math.abs(8 - nextDate.getHours()); return gantt.date.add(nextDate, diff * inc, "hour"); } return gantt.date.add(date, 8 * inc, "hour");};gantt.config.scales = [ { unit: "day", step: 1, date: "%d %F" }, { unit: "hour_custom", step: 1, date: "%H" },];gantt.config.date_grid = "%Y-%m-%d %H:%i"
让我们考虑一下甘特如何创建第一个“小时”单元格。从示例中可以看出,最早的任务从 07:00 开始。但是 7 不是 8 的倍数,因此甘特图遵循以下规则:
if (nextDate.getHours() % 8 != 0) { const diff = Math.abs(8 - nextDate.getHours()); // 8 - 7 = 1 return gantt.date.add(nextDate, diff * inc, "hour"); // 7 - 1 = 6}
- 甘特图计算 8:00 和 7:00 之间的时间间隔:diff = 08:00 – 07:00 = 1 小时
- 然后,甘特求时间间隔和增量的乘积:diff * inc = 1 小时 * (-1) = -1 小时,作为inc参数的值,甘特使用时间步长的负值 ( -1 )。
- 最后,甘特将接收到的值与最早任务的时间相加:07:00 + (- 1 小时) = 06:00,第一个单元格的值为06。
为了创建第二个“小时”单元格,甘特图遵循相同的逻辑,但使用正增量
- 差异 = 08:00 – 06:00 = 2 小时
- diff * inc = 2 小时 * 1 = 2 小时
- 06:00 + 2 小时 = 08:00 ,第二个单元格的值为08
在这个阶段,我们可以看到 8 是 8 的倍数,因此下一个单元格的值计算为08:00 + 8 hours = 16:00,其他单元格以此类推。
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理控件应用程序的所有需求,是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯,欢迎在线咨询或者私信我获取正版试用版及报价。
甘特图控件交流群:764148812 欢迎进群交流讨论
更多正版甘特图软件下载、购买、授权咨询,请点这里!
标签:
来源:慧都
声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!