如何在dhtmlxgantt图表中设置日期、年份等行的自动高度



我在dhtmlx甘特图中有一些自定义日期、月份等行。我想为每一行设置固定高度。我的意思是,如果我也添加或删除行,那么高度不应该取决于父行的高度。它应该是恒定的。例如,若我还添加了10行,则每一行的高度应该是恒定的,但它会不断减小以适应父行的高度。这是下面的代码

HTML/JAVASCRIPT

<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' type='text/css' href='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.css'>
<script src='http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js'></script>
<style>
.gantt_custom_button {
background-color: rgb(206, 206, 206);
position: absolute;
right: -10px;
top: 5px;
width: 20px;
height: 26px;
border-radius: 0;
}
</style>

</head>
<div id='gantt_here' style='width:100%; height:500px;'></div>
<body>
<script>
var task1 = {
'data': [{
'id': 1,
'text': 'Project #1',
'start_date': '01-04-2019',
'duration': 2,
'order': 10,
'progress': 0.4,
'open': true
},
{
'id': 2,
'text': 'Task #1',
'start_date': '02-04-2019',
'duration': 1,
'order': 10,
'progress': 0.6,
'parent': 1
},
{
'id': 3,
'text': 'Task #2',
'start_date': '03-04-2019',
'duration': 2,
'order': 20,
'progress': 0.6,
'parent': 1
},
{
'id': 4,
'text': 'Task #3',
'start_date': '05-04-2019',
'duration': 1,
'order': 10,
'progress': 0.6,
'parent': 1
}
],
'links': [{
'id': 1,
'source': 1,
'target': 2,
'type': '1'
},
{
'id': 2,
'source': 2,
'target': 3,
'type': '0'
},
{
'id': 3,
'source': 3,
'target': 4,
'type': '0'
},
{
'id': 4,
'source': 2,
'target': 5,
'type': '2'
}
]
};


gantt.config['scales'] = [{
unit: 'day',
step: 1,
format: '%d %M'
},
{unit: "year", step: 1, format: "%Y"},
{unit: "month", step: 1, format: "%M"},
{unit: "month", step: 1, format: "%M"},
{unit: "month", step: 1, format: "%M"}
//{unit: "month", step: 3, format: monthScaleTemplate},
];
gantt.config.scale_height = 100; 


gantt.init('gantt_here');
gantt.parse(task1);
</script>
</html>

通常,无论图表中的任务数量如何,任务行高度都不会改变。还有内置的功能可以动态更改高度。

你可以在代码片段中看到它是如何工作的:

http://snippet.dhtmlx.com/5/664877d50

如果这对你没有帮助,请在上面的片段中添加你的配置,并确保在那里重现这个问题。然后,单击Share按钮并向我发送链接。或者给我发一个准备好的演示,里面有所有必要的Javascript和CSS文件,这样我就可以在本地重现这个问题。

最新更新