来唠唠学了一个星期的甘特图吧

最新推荐文章于 2023-11-23 15:59:37 发布

zheshihuahua

最新推荐文章于 2023-11-23 15:59:37 发布

阅读量498

点赞数 1

分类专栏： gantt 甘特图文章标签：甘特图

本文链接：https://blog.csdn.net/zheshihuahua/article/details/127731908

版权

gantt 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

甘特图

3 篇文章 1 订阅

订阅专栏

本文介绍了如何使用dhtmlxGantt插件创建甘特图，包括安装插件、引入CSS和JS、设置容器、初始化甘特图、定义数据结构和关系，以及自定义日期格式和提示工具文本。示例代码详细展示了从数据到图表的整个过程，帮助读者快速理解和应用。

摘要由CSDN通过智能技术生成

官网地址：Gantt : Samples

人已麻，废话不多说直接说怎么用吧：

效果图：

首先安装dhtml gannt插件

npm install dhtmlx-gantt

引入CSS 和 JS

 <link rel="stylesheet" href="../../component/dhtmlxgantt.css" type="text/css"> //注意路径
    <script src="../../component/dhtmlxgantt.js"></script>   //路径

页面给个盒子，放甘特图用

  <div id="device_load" style='width:100%;'></div> //注意id名字可以自己取，官网是"gantt_here"

在新创建的容器中初始化dhtmlxGantt 初始化方法。作为参数，该方法采用将在其中显示甘特的HTML容器（或其ID）

 gantt.init("gantt_here");

甘特图里面的数据结构

  var data = [
                      { id: "10cz1t", text: "P220901-044", type: "project", progress: 0.88, open: true, parent: 0 },
                            { id: "11cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },


                            { id: "12cz1t", text: "备膜", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },

                            { id: "121cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 05:00", parent: "12cz1t", progress: 0, open: true },

                            { id: "13cz1t", text: "挤压加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
                            { id: "131cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 02:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "132cz1t", text: "Stage #2", start_date: "2022-11-03 04:00", end_date: "2022-11-03 05:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "133cz1t", text: "Stage #3", start_date: "2022-11-03 07:00", end_date: "2022-11-03 08:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "134cz1t", text: "Stage #4", start_date: "2022-11-03 10:00", end_date: "2022-11-03 11:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "135cz1t", text: "Stage #5", start_date: "2022-11-03 13:00", end_date: "2022-11-03 14:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "136cz1t", text: "Stage #6", start_date: "2022-11-03 16:00", end_date: "2022-11-03 17:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "137cz1t", text: "Stage #7", start_date: "2022-11-03 19:00", end_date: "2022-11-03 20:00", parent: "13cz1t", progress: 0, open: true },

                            { id: "24cz1t", text: "时效加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
                            { id: "241cz1t", text: "Stage #1", start_date: "2022-11-03 05:00", end_date: "2022-11-03 06:00", parent: "24cz1t", progress: 0, open: true },
                            { id: "242cz1t", text: "Stage #2", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "24cz1t", progress: 0, open: true },
                            { id: "243cz1t", text: "Stage #3", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "24cz1t", progress: 0, open: true },
                            { id: "244cz1t", text: "Stage #4", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "24cz1t", progress: 0, open: true },


                            { id: "25cz1t", text: "氧化包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
                            { id: "251cz1t", text: "Stage #1", start_date: "2022-11-03 06:00", end_date: "2022-11-03 07:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "252cz1t", text: "Stage #2", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "253cz1t", text: "Stage #3", start_date: "2022-11-03 12:00", end_date: "2022-11-03 13:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "254cz1t", text: "Stage #4", start_date: "2022-11-03 14:00", end_date: "2022-11-03 15:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "255cz1t", text: "Stage #5", start_date: "2022-11-03 18:00", end_date: "2022-11-03 19:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "256cz1t", text: "Stage #6", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "257cz1t", text: "Stage #7", start_date: "2022-11-03 22:00", end_date: "2022-11-03 23:30", parent: "25cz1t", progress: 0, open: true },


                            { id: "29cz1t", text: "测试包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
                            { id: "291cz1t", text: "Stage #5", start_date: "2022-11-03 15:00", end_date: "2022-11-03 16:00", parent: "29cz1t", progress: 0, open: true },
                            { id: "292cz1t", text: "Stage #6", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "29cz1t", progress: 0, open: true },


                            { id: "28cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },
                            // ,start_date: "2022-11-03 01:00",end_date: "2022-11-03 03:00"
                            { id: "281cz1t", text: "备膜", start_date: "2022-11-03 01:00", end_date: "2022-11-03 03:00", parent: "28cz1t", progress: 0, open: true },
                            { id: "281cz1t1", text: "备膜1", start_date: "2022-11-03 02:30", end_date: "2022-11-03 05:30", parent: "28cz1t", progress: 0, open: true },
                            { id: "281cz1t2", text: "备膜2", start_date: "2022-11-03 06:50", end_date: "2022-11-03 07:50", parent: "28cz1t", progress: 0, open: true },

                            { id: "282cz1t", text: "挤压加工", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "28cz1t", progress: 0.5, open: true },
                            { id: "283cz1t", text: "时效加工", start_date: "2022-11-03 010:00", end_date: "2022-11-03 11:00", parent: "28cz1t", progress: 0, open: true },
                            { id: "284cz1t", text: "氧化包装", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "28cz1t", progress: 0, open: true },


                        ];
                        var datalist = new Array();
                        $.each(data, function (i, item) {

                            var model = new Object();
                            model.id = item.id;
                            model.text = item.text;
                            if (item.type != null) {
                                model.type = item.type;
                            }

                            model.progress = item.progress;
                            model.open = item.open;
                            model.start_date = new Date(item.start_date);
                            model.end_date = new Date(item.end_date);
                            model.parent = item.parent;
                            if (item.render != null) {
                                model.render = item.render;
                            }

                            datalist.push(model);
                         
                        });

                        // 数据之间的关系
                        var links = [
                            //  {id: "1", source: "10", target: "11", type: "1"},
                            //  {id: "2", source: "11", target: "12", type: "1"},
                            //  {id: "3", source: "10", target: "28", type: "1"},
                            //
                            // {id: "4", source: "12", target: "131", type: "1"},
                            // source:连接谁 ; target:和谁连 ; (里面写data里面的id)

                            { id: "5c", source: "131cz1t", target: "241cz1t", type: "0" },
                            { id: "6c", source: "132cz1t", target: "241cz1t", type: "0" },


                            { id: "7c", source: "133cz1t", target: "242cz1t", type: "0" },
                            { id: "8c", source: "134cz1t", target: "242cz1t", type: "0" },


                            { id: "9c", source: "135cz1t", target: "243cz1t", type: "0" },
                            { id: "10c", source: "136cz1t", target: "243cz1t", type: "0" },
                            { id: "11c", source: "137cz1t", target: "244cz1t", type: "0" },



                            { id: "14c", source: "241cz1t", target: "253cz1t", type: "0", color: "green" },
                            { id: "13c", source: "241cz1t", target: "252cz1t", type: "0", color: "green" },
                            { id: "12c", source: "241cz1t", target: "251cz1t", type: "0", color: "green" },

                            { id: "16c", source: "242cz1t", target: "254cz1t", type: "0", color: "green" },
                            { id: "15c", source: "242cz1t", target: "253cz1t", type: "0", color: "green" },


                            { id: "19c", source: "243cz1t", target: "257cz1t", type: "0", color: "green" },
                            { id: "18c", source: "243cz1t", target: "256cz1t", type: "0", color: "green" },
                            { id: "17c", source: "243cz1t", target: "255cz1t", type: "0", color: "green" },


                            { id: "21c", source: "254cz1t", target: "292cz1t", type: "0", color: "blue" },
                            { id: "20c", source: "254cz1t", target: "291cz1t", type: "0", color: "blue" },

                                
                            { id: "22c", source: "28cz1t", target: "281cz1t", type: "0", color: "red" },
                            { id: "23c", source: "281cz1t", target: "281cz1t1", type: "0", color: "red" },
                            { id: "24c", source: "281cz1t", target: "281cz1t2", type: "0", color: "red" },
                         

                            { id: "25c", source: "281cz1t", target: "282cz1t", type: "0", color: "hotpink" },
                            { id: "26c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },
                            { id: "27c", source: "281cz1t", target: "283cz1t", type: "0", color: "hotpink" },
                            { id: "28c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },

                        


                        ]

左侧列

 gantt.config.reorder_grid_columns = true;
            gantt.config.columns = [{
                name: "text",
                label: "任务名",
                width: 200,
                align: "center",
                tree: true,
                resize: true
            }, {
                name: "start_date",
                label: "开始日期",
                width: 100,
                align: "center",
                resize: true
            }, {
                name: "duration",
                label: "持续时间",
                width: 100,
                align: "center",
                resize: true

            }];

解析

 gantt.parse({
  data: datalist,
 links: links
 });

日期调整

 gantt.config.date_format = "%Y-%m-%d";
            gantt.config.scales = [
                { unit: "year", step: 1, format: "%Y" },
                { unit: "day", step: 1, date: "%m-%d" },
                { unit: "hour", step: 1, format: "%H:%i" }
            ];

提示工具的自定义文本


 gantt.templates.tooltip_text = function (start, end, task) {
 return "<b>订单:</b> " + task.text + "<br/><b>开始时间:</b> " + gantt.templates.tooltip_date_format(start) + "<br/><b>结束时间:</b> " + gantt.templates.tooltip_date_format(end);
            };

其实挺简单的，多看看官网能解决大部分的需求！

全部代码放在下一篇了。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。