反应示例

将 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相关内容，请锁定本套系列教程。