不依赖第三方库，原生 JavaScript 构建与众不同的甘特图

前端

2023-12-03 22:58:45

基于原生 JavaScript 和 Moment.js 构建甘特图

甘特图是一种可视化工具，用于展示项目进度和任务时间表。它通过横条图的形式来表示任务的持续时间和相互依赖关系。甘特图广泛应用于项目管理和任务管理中，可以帮助项目经理和团队成员轻松跟踪项目的进展情况，并及时发现潜在的风险和问题。

本教程将向您展示如何使用原生 JavaScript 和 Moment.js 库来构建一个独特的甘特图。我们将逐步引导您完成构建过程，并提供示例代码和详细说明。您将学习到如何：

使用 JavaScript 创建甘特图的基本结构
使用 Moment.js 处理日期和时间
添加任务和依赖关系
调整甘特图的外观和样式
使甘特图具有交互性

准备工作

在开始构建甘特图之前，您需要确保已经安装了以下软件和工具：

文本编辑器或代码编辑器
JavaScript 开发环境
Moment.js 库

您还可以下载本教程的示例代码，以便参考和修改。

创建甘特图的基本结构

首先，我们需要创建一个基本的 HTML 结构来容纳甘特图。您可以使用以下代码创建一个简单的 HTML 页面：

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="gantt"></div>

  <script src="script.js"></script>
</body>
</html>

在 <head> 部分，我们加载了样式表 style.css 和 JavaScript 脚本 script.js。<body> 部分包含了一个 div 元素，其 id 为 "gantt"。这个 div 元素将用于容纳甘特图。

使用 JavaScript 创建甘特图

接下来，我们需要使用 JavaScript 来创建甘特图。我们将使用 Moment.js 库来处理日期和时间。以下代码演示了如何使用 JavaScript 和 Moment.js 来创建甘特图：

// 导入 Moment.js 库
import moment from "moment";

// 定义任务数据
const tasks = [
  {
    id: 1,
    name: "任务 1",
    start: moment("2023-03-01"),
    end: moment("2023-03-15"),
  },
  {
    id: 2,
    name: "任务 2",
    start: moment("2023-03-10"),
    end: moment("2023-03-20"),
    dependencies: [1], // 依赖于任务 1
  },
  {
    id: 3,
    name: "任务 3",
    start: moment("2023-03-15"),
    end: moment("2023-03-25"),
    dependencies: [2], // 依赖于任务 2
  },
];

// 创建甘特图
const gantt = new Gantt("#gantt", tasks);

// 渲染甘特图
gantt.render();

在上面的代码中，我们首先导入 Moment.js 库。然后，我们定义了一个任务数组 tasks，其中包含了每个任务的 ID、名称、开始时间和结束时间。我们还定义了一个依赖关系数组，其中包含了每个任务的依赖项。

接下来，我们创建了一个 Gantt 类，并传入甘特图的容器元素和任务数据。然后，我们调用 render() 方法来渲染甘特图。

调整甘特图的外观和样式

您可以使用 CSS 来调整甘特图的外观和样式。以下是一些示例 CSS 代码：

#gantt {
  width: 100%;
  height: 500px;
}

.gantt-task {
  background-color: #008000;
  height: 20px;
  margin: 5px 0;
}

.gantt-task-name {
  color: #ffffff;
  font-size: 14px;
  padding: 5px;
}

.gantt-task-progress {
  background-color: #ff0000;
  height: 20px;
  width: 20%;
}

您可以根据自己的喜好调整 CSS 代码，以创建出您想要的甘特图样式。

使甘特图具有交互性

您可以使用 JavaScript 来使甘特图具有交互性。例如，您可以添加以下代码来使甘特图中的任务可拖动：

// 使甘特图中的任务可拖动
gantt.tasks.forEach((task) => {
  task.element.addEventListener("mousedown", (event) => {
    // 开始拖动任务
    gantt.dragging = true;
    gantt.dragOffset = event.clientX - task.element.offsetLeft;
  });
});

document.addEventListener("mousemove", (event) => {
  // 正在拖动任务
  if (gantt.dragging) {
    // 更新任务的开始时间和结束时间
    const newStart = moment(task.start).add(event.clientX - gantt.dragOffset, "milliseconds");
    const newEnd = moment(task.end).add(event.clientX - gantt.dragOffset, "milliseconds");
    task.update(newStart, newEnd);

    // 重新渲染甘特图
    gantt.render();
  }
});

document.addEventListener("mouseup", (event) => {
  // 停止拖动任务
  gantt.dragging = false;
});

在上面的代码中，我们首先为每个任务的元素添加了一个 mousedown 事件监听器。当用户按下鼠标左键时，我们将 gantt.dragging 变量设置为 true，并计算出鼠标相对于任务元素的偏移量。

接下来，我们为文档添加了一个 mousemove 事件监听器。当鼠标移动时，如果 gantt.dragging 为 true，则表示用户正在拖动任务。此时，我们将更新任务的开始时间和结束时间，并重新渲染甘特图。

最后，我们为文档添加了一个 mouseup 事件监听器。当用户松开鼠标左键时，我们将 gantt.dragging 变量设置为 false，以停止拖动任务。

总结

在本文中，我们向您展示了如何使用原生 JavaScript 和 Moment.js 库来构建一个独特的甘特图。您学习到了如何创建甘特图的基本结构、使用 Moment.js 处理日期和时间、添加任务和依赖关系、调整甘特图的外观和样式，以及使甘特图具有交互性。您可以根据自己的需要和喜好进一步扩展和修改甘特图。