jquery甘特图 demo

原创

mob64ca12e41d46 2024-08-08 16:27:57 ©著作权

文章标签 甘特图 jQuery HTML 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12e41d46的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 制作甘特图及旅行图的入门指南

甘特图是一种非常直观的项目管理工具，用于可视化项目的时间线和各项任务的进度。随着前端开发技术的不断进步，利用 jQuery 制作甘特图变得越来越简单。在本篇文章中，我们将通过一个简单的示例来介绍如何使用 jQuery 制作甘特图，并进一步展示旅行图（Journey Map），以帮助读者理解这一工具的实际应用。

一、什么是甘特图？

甘特图是1880年代由工程师亨利·甘特（Henry Gantt）提出的一种图示工具。它通过条形图的形式展示任务在时间线上的持续时间，能够清晰直观地反映项目的进度、任务间的依赖关系及资源分配情况。

二、使用 jQuery 制作甘特图

我们将利用 jQuery 和简单的 HTML/CSS 制作一个基本的甘特图。首先，你需要在你的项目中引入 jQuery。可以通过 CDN 加载：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>甘特图 Demo</title>
    <script src="
    <style>
        #gantt {
            position: relative;
            width: 80%;
            margin: 0 auto;
            border-top: 1px solid #000;
            border-left: 1px solid #000;
        }

        .task {
            position: absolute;
            height: 20px;
            background-color: #4CAF50;
            color: white;
            text-align: center;
            line-height: 20px;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    甘特图 Demo
    <div id="gantt"></div>

    <script>
        $(document).ready(function() {
            const tasks = [
                { name: "任务1", start: 1, duration: 3 },
                { name: "任务2", start: 3, duration: 5 },
                { name: "任务3", start: 6, duration: 2 }
            ];

            const ganttContainer = $('#gantt');
            tasks.forEach(task => {
                const taskElement = $('<div class="task"></div>');
                taskElement.text(task.name);
                taskElement.css({
                    left: task.start * 50 + 'px', // 每单位时间50px
                    width: task.duration * 50 + 'px'
                });
                ganttContainer.append(taskElement);
            });
        });
    </script>
</body>
</html>

在以上代码中，我们定义了一些基本的样式，并使用 jQuery 创建了一个含有三个任务的甘特图。每个任务通过任务名称和对应时间长度展示在图表中。

三、旅行图（Journey Map）

旅行图是一种用来描述用户在使用产品或服务过程中所经历的各个重要时刻、情感以及接触点的可视化工具。它帮助团队理解用户的需求和痛点，也为改进产品设计提供了依据。在这里，我们将通过 Mermaid 语法展示一个基础的旅行图。

journey
    title 用户在线购物旅程
    section 发现
      搜索产品: 5: 用户
      浏览产品列表: 4: 用户
    section 考虑
      阅读产品评论: 3: 用户
      添加产品到购物车: 4: 用户
    section 购买
      填写支付信息: 2: 用户
      确认订单: 3: 用户
    section 体验
      收到快递: 4: 用户
      使用产品: 5: 用户

在此示例中，我们使用了 Mermaid 的 journey 语法来展现在线购物的用户旅程。每个阶段的情感评分（1-5分）反映了用户在该节点的体验感受。