dhtmlxGantt 甘特图学习记录

pllpllpll0307

已于 2023-08-25 14:13:56 修改

阅读量308

点赞数

文章标签：甘特图学习

于 2023-08-25 11:29:02 首次发布

本文链接：https://blog.csdn.net/ssdpangdada/article/details/132490598

版权

最近用了highcharts的简单甘特图，发现不能做关联，于是改学了一下dhtmlxGantt，这个用起来还是很方便的，记录一下~

1、引用js

自己在网上找免费版下载，用体验版的话过期之后页面会一直提示错误，还是挺烦的=.=
文件位置：gantt/codebase/dhtmlxgantt.js

2、配置

dhtmlxGantt和其他的图表不一样的地方是要在初始化之前进行配置，
这里是我用到的部分，还有更多的大家自行探索

    gantt.clearAll(); //每次要清空一下，不然会有显示问题
    gantt.config.scale_unit = "month"; //按月显示
    gantt.config.date_scale = "%Y-%m-%d"; //设置时间刻度的格式（X轴） 多个尺度
    gantt.templates.tooltip_date_format = gantt.date.date_to_str("%Y-%m-%d %H:%M:%S")
    gantt.config.readonly = true; //只读，这样就不会显示添加那些按钮
    gantt.config.show_errors = false//不提示错误信息；我的父数据没有时间，不加这个配置页面会一直提示Invalid dates
    gantt.config.columns = [ //我需要在左边显示一列
        {
            name: 'text',
            label: '类型',
            width: 200,
        }
    ];
    gantt.plugins({
        tooltip: true, 
    });
	gantt.templates.tooltip_text = function (start, end, task) { //悬浮提示框数据格式，这里我是随便写的，格式大家根据需要自己配置就好
	    return '<b>阶段：</b> ' +
        task.taskSpecification +
        '<br/>' +
        '<b>开始时间：</b> ' +
        formatToDate(task.start_date) +
        '<br/>' +
        '<b>结束时间：</b> ' +
        formatToDate(task.end_date) +
        '<br/>' +
        '<b>持续时间：</b> ' +
        task.duration +
        '天'
    };

3、初始化及数据处理

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div id="gantt_here" style="height: 100%"></div>
<script th:inline="javascript">
//...此处省略gantt配置，如上2
    gantt.init("gantt_here");
    var tasks = {
        data: [], //图表数据
        links: [] //图表中要连接的数据
    };
     $.ajax({
        url: url,//自己获取数据的接口url
        success: function (data) {
            var categories = []; //我的左边column数据
            //数据遍历处理
            $.each(data, function (i, v) {
                //我的数据格式大概是[{type:xxx, id: x, name:xx, startDate: ...}...] 
                //不同数据type是会重复的因为主体是图表数据即id开始的部分
                var typeId = 0;
                if (!categories.includes(v.type)) {
                    categories.push(v.type)
                    typeId = categories.indexOf(v.type) + 1;
                    tasks.data.push({
                        id: typeId, 
                        text: v.type,  
                        render: 'split' //一行要展示多个的父数据要增加此设置
                    })
                }
                var data = { //处理图表数据，通过parentId与父数据对应
                    id: v.id, //要防止和parentId相同，这里我没做处理，大家可以按自己需要的格式处理一下
                    text: '名称：'+v.name,
                    progress: v.rate/100,
                    start_date: new Date(v.startDate),
                    end_date: new Date(v.endDate),
                    parentId: typeId
                }
                // 右边需要关联的数据，我单独有个关联字段
                if (v.relationid > 0) {
                    var link = {  //关联的数据格式如下
                        id: v.relationid ,
                        source: v.relationid ,
                        target: v.id,
                        type: '0'
                    }
                    tasks.links.push(link)
                }
                tasks.data.push(data)
            })
            gantt.parse(tasks); //渲染数据
        }
    });
</script>
</html>