日韩亚洲国产成人,日韩视频中文字幕,欧美日韩免费看

如何為一個Web應用創建甘特圖？用DHTMLX真的超簡單！（一）

翻譯|使用教程|編輯：龔雪|2023-07-27 11:50:18.707|閱讀 182 次

概述：本文將為大家介紹如何用DHTMLX組件創建JavaScript甘特圖，歡迎下載工具體驗！

dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。甘特圖仍然是項目管理應用程序中最需要的工具之一，DHTMLX Gantt組件提供了能提升研發甘特圖功能所需的重要工具。

在這篇文章中，您將學習如何添加一個基本的JavaScript甘特圖到一個Web應用中，并使用純JS/HTML/CSS和配置一些常見的功能來管理項目。

下載和安裝DHTMLX Gantt

前提條件：首先有必要創建一個簡單的HTML頁面，您的甘特圖項目將被放置在其中。

在本教程中，我們將解釋如何通過腳本標記將Gantt組件添加到Web頁面中，這樣就不需要任何構建工具或配置來運行示例。請注意，Gantt也可以作為ES6模塊導入，稍后我們將討論它。

開始使用Gantt最簡單的方法是在服務器上啟用一個開源版本：

<link rel="stylesheet" type="text/css" >
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>

您也可以下載DHTMLX Gantt并在本地使用它。

DHTMLX Gantt正式版下載

在下載了首選的Gantt版本后，通過將下載的包解壓縮到項目的一個文件夾中來安裝Gantt，并在HTML文檔中添加JS和CSS文件的鏈接：

<head>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>

Gantt初始化

在執行這一重要步驟之前，您必須在頁面上創建div容器，初始化Gantt時需要這個容器。

<body>
<div id="gantt_here" style='width:100vw; height:100vh;'></div>
</body>

現在您應該使用init方法來初始化div容器中的Gantt，該方法以容器的ID作為參數。

<script>
window.addEventListener("DOMContentLoaded", function () {
gantt.init("gantt_here");
});
</script>

此時您已經可以開始使用JavaScript甘特圖了，但是為了更清晰，讓我們添加一些項目數據。

添加甘特圖數據

初始化完成后，可以直接在HTML文檔或JS文件中添加甘特圖數據，這些數據將用作構建甘特圖的基礎。在我們的示例中，為每個項目添加兩個項目和兩個嵌入式任務：

規劃社會研究：1)選擇研究問題2)制定研究設計
進行社會研究：1)數據收集2)結果分析

在這里，您還可以指定項目和相關任務的開始/結束日期、執行順序和進度。

gantt.parse ({
"data": [
{ "id": "10", "text": "Social Research Planning", "start_date": "01-04-2023", "duration": 5, "order": 10, "progress": 0.4, "open": true },
{ "id": "1", "text": "Choosing Research Problems", "start_date": "01-04-2023", "duration": 2, "order": 10, "progress": 0.6, "parent": "10", "priority": "high" },
{ "id": "2", "text": "Formulating Research Design", "start_date": "03-04-2023", "duration": 3, "order": 20, "progress": 0.6, "parent": "10", "priority": "high" },
{ "id": "20", "text": "Conducting Research", "start_date": "06-04-2023", "duration": 5, "order": 10, "progress": 0.4, "type": "project", "open": true },
{ "id": "3", "text": "Data Collection", "start_date": "06-04-2023", "duration": 2, "order": 10, "progress": 0.6, "parent": "20", "priority": "low" },
{ "id": "4", "text": "Results Analysis", "start_date": "08-04-2023", "duration": 3, "order": 20, "progress": 0.6, "parent": "20", "priority": "medium" }
],
"links": [
{ "id": 1, "source": 1, "target": 2, "type": "0" },
{ "id": 2, "source": 2, "target": 3, "type": "0" },
{ "id": 3, "source": 3, "target": 4, "type": "0" },
{ "id": 4, "source": 2, "target": 5, "type": "0" }
]
})