dhtmlxgantt甘特图(精确到分钟)

完整代码

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>Basic initialization</title>
	<link rel="stylesheet" href="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css" 
    type="text/css"> 
	<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>

	<style>
		html, body {
			height: 100%;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}
	</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
	var tasks = {
		data: [
			{
				id: 1, //任务id
				text: "Project #1", //任务名
				// start_date: "18-08-2020", //开始时间
				// progress: 0.6,//任务完成情况,进度
				// duration: 2,//任务时长,从start_date开始计算 
				// order: 10, 
				open: true,//默认是否打开
				type: 'project',// project为项目任务类型,绿色,默认为task为普通任务类型,蓝色
				// users: [2, 3]
			},{
				id: 2, text: "Task #1", render:"split",parent: 1
			},{
				id: 22, text: "Stage #1", start_date: "2020-08-18 03:28",end_date:"2020-08-18 04:30", 
				parent: 2
			},{
				id: 222, text: "Stage #2", start_date: "2020-08-18 05:28",end_date:"2020-08-18 06:30", 
				parent: 2
			},{
				id: 3, text: "Task #2", start_date: "2020-08-18 08:10",end_date:"2020-08-18 08:20", parent: 1//父任务ID
			}
		],
		// links: [
		// 	{id: 1, source: 1, target: 2, type: "1"},
		// 	{id: 2, source: 2, target: 3, type: "0"}
		// ]
	};
	gantt.config.date_format = "%Y-%m-%d %H:%i";//设置数据中的时间格式,对应start_date格式
	gantt.config.columns = [//设置列
		{name:"text",       label:"Task name",  width:"*", tree:true },
		{name:"start_date", label:"Start time", align:"center" },
	];
	gantt.plugins({
		tooltip: true,//鼠标划过任务是否显示明细
		// auto_scheduling: true,//根据任务之间的关系自动安排任务
		// multiselect: true, //为任务激活多任务选择
	});
	gantt.config.duration_unit = "minute";
	// gantt.templates.tooltip_date_format=function (date){
	// 	var formatFunc = gantt.date.date_to_str("%Y-%m-%d %H:%i");
	// 	return formatFunc(date);
	// };
	//自定义工具栏
	gantt.templates.tooltip_text = function (start, end, task) {
      return '<b>任务名称:</b> ' + task.text + '<br/><b>工作时间:</b> ' + new Date(start).getHours()+':'+new Date(start).getMinutes()+' - '+ new Date(end).getHours()+':'+new Date(end).getMinutes()
	}
	//监测到鼠标已经离开包裹着ghtml的div的解决方案
	// gantt.ext.tooltips.tooltipFor({
    //   selector: '.gantt_grid [' + gantt.config.task_attribute + ']',
    //   global: true
    // })
	gantt.config.start_date = new Date("2020-08-18 00:00");//时间刻度的开始时间
	gantt.config.end_date = new Date("2020-08-18 23:59");//时间刻度的结束时间
	gantt.config.scales = [
		{unit: "hour", step: 1, format: "%H:%i"} //时间刻度的显示单位
	];
	// gantt.attachEvent("onGanttReady", function(){
	// 	var tooltips = gantt.ext.tooltips;
	// 	tooltips.tooltip.setViewport(gantt.$task_data);
	// });
	
	// gantt.config.multiselect = false
	// gantt.config.multiselect_one_level = true; //在一个或任何级别内是否可以使用多任务选择
	gantt.config.readonly=true;//只读模式的甘特图
	gantt.init("gantt_here");
	gantt.parse(tasks);
</script>
</body>
</html>

效果图:
在这里插入图片描述

<think>好的,我现在需要帮助用户解决在dhtmlx-gantt中设置时间轴列宽的问题。首先,我得回想一下dhtmlx-gantt的文档和相关配置选项。用户提到的配置方法或API,可能涉及时间轴的调整,比如列宽或者时间刻度的显示。 我记得dhtmlx-gantt的时间轴配置主要在gantt.config对象中,特别是与时间轴相关的属性。例如,gantt.config.scale_unit和gantt.config.step用来定义时间轴的单位和步长。但用户的问题是关于列宽的设置,可能需要调整每个时间单元的宽度。 接下来,我需要确认是否有直接的配置项来调整列宽。查阅dhtmlx的文档,可能会找到scale_unit配置中的unit属性,其中可以设置每个单元的宽度。例如,unit: "day", step: 1, format: "%d %M",这时候可能有一个width参数或者类似的东西。或者是否在scale配置中使用min_column_width这样的选项? 另外,用户提供的参考引用中,有一个关于设置任务日期格式的示例,其中使用了gantt.config.task_date,这可能与时间轴显示有关联,但不确定是否直接影响列宽。另一个引用是关于duration_unit和work_time的设置,这可能影响时间轴的计算方式,但同样不直接涉及列宽。 可能还需要考虑时间轴的结构,比如是否使用CSS来调整列宽。例如,通过修改时间轴单元格的样式,或者覆盖默认的CSS类。例如,检查是否有类似.gantt_grid_scale的类,可以设置min-width属性来控制列宽。 如果官方文档中没有直接设置列宽的配置项,可能需要通过组合调整时间单位和步长来间接影响列宽。例如,将时间单位设置为较大的单位(如周),同时调整步长,这样每个列的宽度可能会变宽。或者,如果时间单位太小导致列太窄,可以调整scale_unit的配置,比如增加每个unit的步长,或者改变时间轴的密度。 另外,用户可能需要动态调整列宽,这时候可能需要调用API方法或者监听事件来重新渲染时间轴。例如,在配置修改后调用gantt.render()或gantt.refresh()来应用新的列宽设置。 总结可能的解决方案: 1. 使用scale_unit配置中的min_column_width属性(如果存在)直接设置最小列宽。 2. 调整时间单位和步长,间接影响列宽。 3. 通过CSS覆盖默认样式,设置时间轴列的宽度。 现在需要验证这些方法是否可行。例如,查阅dhtmlx-gantt的官方文档,寻找scale配置中的相关选项。根据记忆,dhtmlx-gantt的scale配置允许设置不同的时间单位,每个单位可以定义自己的格式、步长和列宽。例如,在scale_unit中,每个单元可能有min_column_width参数。 假设文档中提到,可以通过在scale_unit中设置每个时间单元的min_column_width来控制最小宽度。例如: gantt.config.scale_unit = [ {unit: "day", step: 1, format: "%d %M", min_column_width: 50}, {unit: "month", step: 1, format: "%F %Y"} ]; 这样的话,设置min_column_width为50像素可能有效。如果这个参数存在,那么用户只需要调整这个值即可。 另外,如果用户需要更灵活的宽度控制,可能需要结合CSS。例如,找到时间轴列对应的CSS类,如.gantt_grid_scale_cell,设置min-width或width属性。 但需要注意,如果通过CSS设置,可能需要使用!important来覆盖默认样式,或者确保CSS加载顺序正确。 最后,建议用户参考官方文档中的Scale Configuration部分,确认具体的配置参数,并提供示例代码。同时,提醒用户可能需要根据实际时间单位和布局进行调整,或者结合CSS来实现更精确的控制。</think>在dhtmlx-gantt中设置时间轴列宽可通过以下两种方式实现: ### 1. 通过 `min_column_width` 配置 在时间轴单位配置中使用`min_column_width`参数直接定义最小列宽(单位为像素): ```javascript gantt.config.scale_unit = [ { unit: "day", step: 1, format: "%d %M", min_column_width: 50 // 设置最小列宽为50像素 }, { unit: "month", step: 1, format: "%F %Y" } ]; gantt.init("gantt_here"); ``` ### 2. 通过CSS覆盖样式 直接修改时间轴列的CSS样式(需注意优先级): ```css .gantt_grid_scale_cell { min-width: 100px !important; /* 强制设置列宽 */ } ``` ### 注意事项 - 列宽过小可能导致时间轴显示不全,需根据时间单位调整数值 - 动态修改配置后需调用`gantt.render()`刷新视图[^1] - 复杂场景建议结合`scale_unit.step`调整时间密度[^2] 相关问题
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值