如何从 DHTMLX 甘特图中获取开始绘制日期和结束绘制日期

Question

我正在使用 DHTMLX 甘特图，这里我需要从甘特图中获取开始绘制日期和结束绘制日期。例如，图表中的开始日期是 2019 年 3 月 31 日，结束日期是 2019 年 4 月 7 日，我想要这个日期而不是从 JSON 中获取。实际上，我想在开始日期和结束日期上再增加几天，这就是我需要它的原因。这是下面的代码。

HTML

<!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'
            }
            ]
        };
        //console.log(task1.data)
        task1.data.forEach(function (val, index) {
            console.log(val.start_date);
            //gantt.config.start_date = gantt.date.add(new Date(val.start_date), -2, 'month');
            //  gantt.config.end_date = gantt.date.add(new Date(val.start_date), 2, 'month');
        })
        //  gantt.config.start_date = gantt.date.add(new Date(2019, 02, 31), -1, 'month');
        //  gantt.config.end_date = gantt.date.add(new Date(2019, 03, 8), 1, 'month');;
        gantt.config['scales'] = [{
            unit: 'day',
            step: 1,
            format: '%d %M'
        },
        { unit: "year", step: 1, format: "%Y" },
        { unit: "month", step: 1, format: "%M" }
        ];
        gantt.config.scale_height = 100;


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

</html>

Answer 1

如果您想要甘特图中的开始日期和结束日期，有一个名为 getState() 的 API。

gantt.getState().min_date 将为您提供任务在图表中显示的日期，gantt.getState().max_date 将为您提供任务在图表中显示的日期。如果你想要一个在开始日期或结束日期之前或之后的日期，你可以通过这个gantt.date.add(new Date(gantt.getState().max_date), -1, 'day')add/subtract根据你需要的天数。这是工作示例：

<!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'
            }
            ]
        };
        //console.log(task1.data)
        task1.data.forEach(function (val, index) {
            // console.log(val.start_date);
            //gantt.config.start_date = gantt.date.add(new Date(val.start_date), -2, 'month');
            //  gantt.config.end_date = gantt.date.add(new Date(val.start_date), 2, 'month');
        })
        //  gantt.config.start_date = gantt.date.add(new Date(2019, 02, 31), -1, 'month');
        //  gantt.config.end_date = gantt.date.add(new Date(2019, 03, 8), 1, 'month');;
        gantt.config['scales'] = [{
            unit: 'day',
            step: 1,
            format: '%d %M'
        },
        { unit: "year", step: 1, format: "%Y" },
        { unit: "month", step: 1, format: "%M" }
        ];
        gantt.config.scale_height = 100;


        gantt.init('gantt_here');
        gantt.parse(task1);

        console.log(gantt.getState().min_date);
        console.log(gantt.getState().max_date);

        console.log("Your custom date");
        console.log(gantt.date.add(new Date(gantt.getState().min_date), 1, 'day'));
        console.log(gantt.date.add(new Date(gantt.getState().max_date), -1, 'day'));

    </script>

</html>

如何从 DHTMLX 甘特图中获取开始绘制日期和结束绘制日期

How to get starting plotted date and ending plotted date from DHTMLX Gantt chart

javascript

dhtmlx

HTML