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

川长思鸟来 2023-09-23 17:50 122阅读 0赞

反应示例  
  
[dhtmlxGantt最新下载（qun:764148812）![icon-default.png?t=M85B][icon-default.png_t_M85B]https://www.evget.com/product/4213/download][dhtmlxGantt_qun_764148812_icon-default.png_t_M85B_icon-default.png_t_M85B_https_www.evget.com_product_4213_download] 将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_qun_764148812_icon-default.png_t_M85B_icon-default.png_t_M85B_https_www.evget.com_product_4213_download]应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎加入我们社群（文章前端）

[icon-default.png_t_M85B]: https://csdnimg.cn/release/blog_editor_html/release2.2.0/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=M85B
[dhtmlxGantt_qun_764148812_icon-default.png_t_M85B_icon-default.png_t_M85B_https_www.evget.com_product_4213_download]: https://www.evget.com/product/4213/download
[Gantt]: https://www.evget.com/product/4213/license