项目管理工具dhtmlxGantt入门教程（二）：如何初始化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相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及 价。

甘特图控件交流群：764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：