• 初始化

    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");