Dhtmlx Gantt甘特图初学习---行高设置

最新推荐文章于 2026-06-30 10:23:22 发布

原创最新推荐文章于 2026-06-30 10:23:22 发布 · 4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

本文分享了使用DhtmlxGantt控件进行甘特图开发的经验，详细介绍了如何通过CSS和JavaScript自定义行高的过程，包括初始化配置、节点获取及高度调整的代码示例。

Dhtmlx Gantt甘特图初学习—行高设置

由于boss要求使用Dhtmlx Gantt控件开发甘特图，所以下载研究了一下。
现在boss要求甘特图不同行实现自定义的行高，而该控件API中未找到相关实现，所以本人使用css修改，未完全成功。各位大牛可以看看我使用的方法，提些建议。

官网下载相关文件

初始化甘特图

@{
    ViewBag.Title = "Home Page";
}
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link href="~/gantt/codebase/dhtmlxgantt.css" rel="stylesheet" />
    <script src="~/gantt/codebase/dhtmlxgantt.js"></script>
    <script src="~/gantt/codebase/locale/locale_cn.js"></script>
</head>
<body>
    <div id="gantt_here" style='width:1000px; height:600px;'></div>
</body>
</html>
<script type="text/javascript">
    var tasks = {
        data: [
            { id: 1, text: "项目 #1", start_date: "2016-05-01", duration: 11, progress: 0.6, open: true },
            { id: 2, text: "项目 #2", start_date: "2016-05-01", duration: 11, progress: 1, open: true }
        ]
    };
    //设置行高 100
    gantt.config.row_height = 100;
    gantt.init("gantt_here");
    gantt.parse(tasks);
</script>

效果如下（具体教程可见官网）：
在这里插入图片描述

下面加上个人写的样式修改代码：

@{
    ViewBag.Title = "Home Page";
}
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <link href="~/gantt/codebase/dhtmlxgantt.css" rel="stylesheet" />
    <script src="~/gantt/codebase/dhtmlxgantt.js"></script>
    <script src="~/gantt/codebase/locale/locale_cn.js"></script>
</head>
<body>
    <div id="gantt_here" style='width:1000px; height:600px;'></div>
</body>
</html>
<script type="text/javascript">
    var tasks = {
        data: [
            { id: 1, text: "项目 #1", start_date: "2016-05-01", duration: 11, progress: 0.6, open: true },
            { id: 2, text: "项目 #2", start_date: "2016-05-01", duration: 11, progress: 1, open: true }
        ]
    };
    gantt.config.order_branch = true;

    // 设置行高100
    gantt.config.row_height = 100;
    gantt.init("gantt_here");
    gantt.parse(tasks);

    // 获得左侧Grid Area节点
    var es1 = document.getElementsByClassName("gantt_row gantt_row_task");
    // 获得右侧Scales节点
    var es2 = document.getElementsByClassName("gantt_task_row");
    var es3 = document.getElementsByClassName("gantt_task_line");

    keepHeight(es1[0], es2[0], es3[0], 50);

    // 保持行高一致 参数：同行节点以及要设置的行高
    function keepHeight(e1, e2, e3, height) {
        e1.style.height = height + "px";
        e1.style.lineHeight = height + "px";
        e2.style.height = height + "px";
        e2.style.lineHeight = height + "px";
        e3.style.height = (height - 4) + "px";
        e3.style.lineHeight = height-4 + "px";
    }
</script>

效果如下：
在这里插入图片描述