• 初始化

    demo地址

    官网文档

    1. 引入依赖,安装依赖。

    2. 定义甘特图。

    3. 在页面上创建DIV容器。

    4. 对 dhtmlxGantt 进行config和template配置。

    5. 使用init方法在新创建的容器中初始化 dhtmlxGantt。

    6. 添加监听事件。

    7. 添加相应逻辑。

    import React, { Component } from 'react';
    import { gantt } from 'dhtmlx-gantt';
    import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
     
    export default class Gantt extends Component {
        componentDidMount() {
            const { tasks } = this.props;
            gantt.config.date_format="%m-%d-%Y"; // 可自行定义日期展示格式
            gantt.init(this.ganttContainer);
            gantt.parse(tasks);
        }
    
        render() {
           return (
               <div
                    ref={ (input) => { this.ganttContainer = input } }
                    style={ { width: '100%', height: '100%' } }
                ></div>
           );
        }
    }
    

    dhtmlx-gantt的基本使用

    数据加载

    dhtmlxGantt可以采用2种格式的数据:

    数据填充甘特图一般使用 parse 方法。

    甘特图的数据源是一个存储两种信息的对象:

    tasks -任务。

    links -任务的关联信息。

    tasks

    参数 说明 类型 默认值 必输
    id 任务id string
    text 任务文本 string
    type 任务类型(task,project,Milestones) string task
    parent 主任务id number|string
    progress 任务进度(0 - 1) number 0
    open 是否展开子任务 boolean false
    type 任务类型(task,project,Milestones) string task
    duration 任务持续时间 string 是|否
    start_date 任务开始时间 string 是|否
    end_date 任务结束时间 string 是|否

    持续,开始,结束时间,其中必需至少有2个参数。

    日期默认格式 %d-%m-%Y%H:%i,若想更改配置gantt.config.date_format="%Y-%m-%d";

    参数 说明 类型 默认值 必输
    id 任务id string|number
    type 关联类型( 0” -‘finish_to_start’。 “ 1” -‘start_to_start’。“ 2” -‘finish_to_finish’。“ 3” -‘start_to_finish’。) string
    target 目标任务id number
    source 开始任务id number

    配置(config)

      // 具体设置如何属性看需求
    gantt.config.scale_unit = "year"; //按年显示
    

    官网config文档

    模板定义(templates)

      // 具体如何设置模板看需求
     gantt.templates.task_text=function(start, end, task){
        return task.text
    };
    

    甘特图国际化(locale)

      // 调用相应方法
     gantt.locale = {
                date: {
                    month_full: [intl.get('demo.dhtmlxGantt.view.message.january').d("一月"), intl.get('demo.dhtmlxGantt.view.message.february').d("二月"), intl.get('demo.dhtmlxGantt.view.message.march').d("三月"), intl.get('demo.dhtmlxGantt.view.message.april').d("四月"), intl.get('demo.dhtmlxGantt.view.message.mayday').d("五月"), intl.get('demo.dhtmlxGantt.view.message.june').d("六月"), intl.get('demo.dhtmlxGantt.view.message.july').d("七月"), intl.get('demo.dhtmlxGantt.view.message.august').d("八月"), intl.get('demo.dhtmlxGantt.view.message.september').d("九月"), intl.get('demo.dhtmlxGantt.view.message.october').d("十月"), intl.get('demo.dhtmlxGantt.view.message.november').d("十一月"), intl.get('demo.dhtmlxGantt.view.message.december').d("十二月")],
                    ...
                },
                labels: {
                    dhx_cal_today_button: intl.get('demo.dhtmlxGantt.view.message.today').d("今天"),
                    ...
                }
            };
    

    甘特图方法(methods)

      // 调用相应方法
     gantt.createTask={...}
    

    甘特图缩放(zoom)

      // 初始化
     gantt.ext.zoom.init({
                levels: [
                    {
                        name: 'Days',
                        scale_height: 60,
                        min_column_width: 70,
                        scales: [
                            { unit: 'week', step: 1, format: 'Week #%W' },
                            { unit: 'day', step: 1, format: '%d %M' },
                        ],
                    },
                ],
                ...others,
            });
     // 应用初始化的相应数据
    gantt.ext.zoom.setLevel("Days");