在使用 dhtmlxGantt 构建应用时,第一步就是在页面上设置并渲染 Gantt 图表。
本指南介绍了如何使用纯 JavaScript 和 HTML 初始化 dhtmlxGantt。如需了解如何与前端框架集成,请参考以下指南:
![]() |
![]() |
![]() |
![]() |
Angular | React | Svelte | Vue.js |
在页面上显示一个简单的 Gantt 图表需要三个步骤:
<!DOCTYPE html>
<html>
<head>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
<div id="gantt_here" style='width:1000px; height:400px;'></div>
<script type="text/javascript"> gantt.init("gantt_here");
</script>
</body>
</html>
Related sample: Basic initialization
根据你所构建的应用类型,有多种方式可以将 Gantt 源文件添加到项目中:
要使用 dhtmlxGantt,需要在页面中添加两个文件:
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
我们来看一下 dhtmlxGantt 包的结构,了解这些文件的位置。
dhtmlxGantt 包中的主要文件夹和文件包括:
使用以下命令导入文件:
import { gantt } from 'dhtmlx-gantt';
对于 Commercial、Enterprise 或 Ultimate 版本,使用:
import { gantt, Gantt } from 'dhtmlx-gantt';
如果你的项目使用 Vite,需要在 vite.config.js 文件中添加如下设置,以确保 Gantt 被正确引入:
vite.config.js
optimizeDeps: {
include: [
'dhtmlx-gantt',
]
}
如果你在 Svelte 应用中使用 Gantt,在生产环境构建时,需要在 vite.config.js 文件中添加如下内容。请将 gantt_8.0.6_evaluation 替换为你的 Gantt 文件夹路径:
vite.config.js
build: {
commonjsOptions: {
include: [
"node_modules",
"gantt_8.0.6_evaluation/codebase/dhtmlxgantt.js"
]
},
}
在基于 RequireJS 的应用中添加 dhtmlxGantt 文件,参考如下模式:
requirejs(["codebase/dhtmlxgantt"], function(dhx){
var gantt = dhx.gantt;
var Gantt = dhx.Gantt; // 适用于 Enterprise 版本
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 版本)——它们分别对应于 此处描述的 gantt 和 Gantt 对象。
在 RequireJS 中使用 Gantt 及自定义扩展时,请确保为 RequireJS 指定 shim
配置,并将扩展的依赖直接设置为 Gantt。
下面是配置自定义扩展文件 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" }
]
});
});
请确保包内任意文件的模块名指定为 codebase 文件夹内的相对路径 加上 文件名,例如:
核心库:
为确保 Gantt 图表在不同浏览器下以全屏模式正确显示,请在页面中添加如下样式:
<style type="text/css" media="screen"> html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
Back to top