项目管理工具dhtmlxGantt入门教程（二）：如何初始化dhtmlxGantt（下）

反应示例

将 dhtmlxGantt 文件导入基于 React 的应用程序的示例：

import React, { Component } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
 
export default class Gantt extends Component {
  componentDidUpdate() {
    gantt.render();
  }
  componentDidMount() {
    gantt.init(this.ganttContainer);
    gantt.parse(this.props.tasks);
  }
 
  render() {
    return (
      <div
        ref={(input) => { this.ganttContainer = input }}
        style=width: '100%', height: '100%'
      ></div>
    );
  }
}

角度示例

将 dhtmlxGantt文件导入基于 Angular 的应用程序的示例：

import {Component,ElementRef,OnInit,ViewChild,ViewEncapsulation} from '@angular/core';
import {TaskService} from '../services/task.service';
import {LinkService} from '../services/link.service';
import {Task} from '../models/task';
import {Link} from '../models/link';
 

import { gantt, Gantt } from 'dhtmlx-gantt';
 
@Component({
    encapsulation: ViewEncapsulation.None,
    selector: 'gantt',
    styleUrls: ['./gantt.component.css'],
    providers: [TaskService, LinkService],
    template: `<div #gantt_here class='gantt-chart'></div>`,
})
export class GanttComponent implements OnInit {
    @ViewChild('gantt_here') ganttContainer: ElementRef;
 
    constructor(private taskService:TaskService, private linkService:LinkService){ }
 
    ngOnInit() {
        gantt.config.xml_date = '%Y-%m-%d %H:%i';
        gantt.init(this.ganttContainer.nativeElement);
        Promise.all([this.taskService.get(), this.linkService.get()])
            .then(([data, links]) => {
                gantt.parse({ data, links });
            });
    }
}

将文件包含到基于 RequireJS 的应用程序中

要将 dhtmlxGantt 文件包含到基于 RequireJS 的应用程序中，您需要遵循以下示例中显示的逻辑：

requirejs(["codebase/dhtmlxgantt"], function(dhx){
  var gantt = dhx.gantt;
  var Gantt = dhx.Gantt;// for Enterprise builds
 
  gantt.init("gantt_here");
  gantt.parse({
    data: [
      { id:1, text:"Project #2", start_date:"01-04-2018", 
        duration:18, progress:0.4, open:true },
      { id:2, text:"Task #1", start_date:"02-04-2018", 
        duration:8, progress:0.6, parent:1 },
      { id:3, text:"Task #2", start_date:"11-04-2018", 
        duration:8, progress:0.6, parent:1 }
    ],
    links: [
      { id:1, source:1, target:2, type:"1" },
      { id:2, source:2, target:3, type:"0" }
    ]
  });
});

dhtmlxGantt 库将返回一个带有字段的对象 gantt和 Gantt（在 Commercial、Enterprise 或 Ultimate 版本中）-甘特和甘特图对象此处 。

下面的示例演示了如何以 custom_tooltip_plugin.js 正确的方式设置：

requirejs.config({
  paths: {
    "dhtmlxgantt": "../../codebase/dhtmlxgantt",
    "ext/dhtmlxgantt_custom_tooltip": "../custom_tooltip_plugin"
  },
  shim: {
    "ext/dhtmlxgantt_custom_tooltip": ["dhtmlxgantt"]
  }
});
 
requirejs(["dhtmlxgantt"], 
function (dhx) {
  var gantt = dhx.gantt;
 
  var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
  var today = new Date(2018, 3, 5);
  gantt.addMarker({
    start_date: today,
    css: "today",
    text: "Today",
    title: "Today: " + date_to_str(today)
  });
 
  gantt.init("gantt_here");
  gantt.parse({
    data: [
      { id:1, text:"Project #2", start_date:"01-04-2018",
        duration:18, progress:0.4, open:true },
      { id:2, text:"Task #1", start_date:"02-04-2018", 
        duration:8, progress:0.6, parent:1 },
      { id:3, text:"Task #2", start_date:"11-04-2018", 
        duration:8, progress:0.6, parent:1 }
    ],
    links: [
      { id:1, source:1, target:2, type:"1" },
      { id:2, source:2, target:3, type:"0" }
    ]
  });
});

检查包内任何文件的模块名称是否指定为包 的“代码库”文件夹内的相对路径加上 文件名 ，例如：

核心库：

• “dhtmlxgantt”：“./vendor/dhtmlxgantt/dhtmlxgantt”

全屏模式

要在不同的浏览器中以全屏模式正确显示甘特图，请在页面上定义以下样式：

<style type="text/css" media="screen">
html, body{
        margin:0px;
        padding:0px;
        height:100%;
        overflow:hidden;
    }

</style>

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容，请锁定本套系列教程。