项目管理软件dhtmlxGantt配置教程(十):如何设置时间和范围

1、时间单位

要设置比例的单位,请使用相应比例对象中的unit属性:

可能的值是:“分钟”、“小时”、“天”、“周”、“季度”、“月”、“年”。

gantt.config.scales = [
    {unit: "month", step: 1, format: "%F, %Y"},
    {unit: "day", step: 1, format: "%j, %D"}
];
 
gantt.init("gantt_here");

2、范围

默认范围设置

如果您没有明确指定日期范围,甘特图会使用加载任务的日期,并在比例尺中的第一个任务之前和最后一个任务之后添加偏移量。偏移量由时间刻度的设置定义。根据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

比例范围在甘特图渲染上重新计算。如果用户将任务移

dhtmlxGantt是一个强大的JavaScript甘特图库,广泛应用于项目管理软件中。本文将介绍如何调整dhtmlxGantt中的网格行大小,以提高用户体验界面美观度。 ### 调整网格行大小的步骤 1. **引入dhtmlxGantt库**: 首先,确保你已经引入了dhtmlxGantt的CSSJS文件。 ```html <link rel="stylesheet" href="dhtmlxgantt.css" type="text/css"> <script src="dhtmlxgantt.js"></script> ``` 2. **初始化甘特图**: 在HTML中添加一个容器用于初始化甘特图。 ```html <div id="gantt_here" style="width:100%; height:100%;"></div> ``` 然后在JavaScript中初始化甘特图。 ```javascript gantt.init("gantt_here"); ``` 3. **调整行高**: 使用`gantt.config.row_height`属性来设置网格行的高度。默认值通常是28像素。 ```javascript gantt.config.row_height = 40; // 设置行高为40像素 gantt.init("gantt_here"); gantt.parse(demo_tasks); // 解析任务数据 ``` 4. **调整列宽**: 你也可以通过设置列的宽度来调整网格的布局。 ```javascript gantt.config.scale_unit = "month"; gantt.config.date_scale = "%F, %Y"; gantt.config.scale_height = 60; gantt.config.min_column_width = 50; gantt.init("gantt_here"); gantt.parse(demo_tasks); ``` ### 完整示例 以下是一个完整的示例,展示了如何调整dhtmlxGantt中的网格行大小: ```html <!DOCTYPE html> <html> <head> <title>dhtmlxGantt调整网格行大小示例</title> <link rel="stylesheet" href="dhtmlxgantt.css" type="text/css"> <script src="dhtmlxgantt.js"></script> <script> gantt.config.row_height = 40; // 设置行高为40像素 gantt.config.scale_unit = "month"; gantt.config.date_scale = "%F, %Y"; gantt.config.scale_height = 60; gantt.config.min_column_width = 50; gantt.init("gantt_here"); gantt.parse({ data: [ {id: 1, text: "任务 1", start_date: "2023-01-01", duration: 5}, {id: 2, text: "任务 2", start_date: "2023-01-06", duration: 7} ], links: [] }); </script> </head> <body> <div id="gantt_here" style="width:100%; height:100%;"></div> </body> </html> ``` ###
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值