一款强大的纯JavaScript甘特图组件：jsGantt-Improved

最新推荐文章于 2025-04-25 12:54:42 发布

郁俪晟Gertrude

最新推荐文章于 2025-04-25 12:54:42 发布

阅读量967

点赞数 22

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00325/article/details/142803776

一款强大的纯JavaScript甘特图组件：jsGantt-Improved

jsgantt-improved Javascript Gantt: fully featured gantt chart component built entirely with JS and CSS. No images or external libs required. 项目地址: https://gitcode.com/gh_mirrors/js/jsgantt-improved

项目介绍

jsGantt-Improved 是一款功能齐全的甘特图组件，完全基于JavaScript、CSS和AJAX构建。它轻量级且无需外部库或额外图像，能够轻松集成到您的项目中。无论是简单的任务管理还是复杂的项目规划，jsGantt-Improved 都能为您提供强大的支持。

项目技术分析

jsGantt-Improved 的核心技术栈包括：

JavaScript: 作为主要编程语言，负责甘特图的逻辑处理和动态渲染。
CSS: 用于样式设计和布局，确保甘特图在不同设备上都能保持良好的视觉效果。
AJAX: 支持动态加载任务数据，提升用户体验。

此外，jsGantt-Improved 还支持多种前端框架的集成，包括Angular、React和Vue，以及.NET后端框架。这使得它能够无缝融入各种技术栈，满足不同开发者的需求。

项目及技术应用场景

jsGantt-Improved 适用于多种应用场景：

项目管理: 帮助项目经理和团队成员可视化项目进度，管理任务和资源。
任务调度: 在生产环境中，用于调度任务和监控任务执行情况。
资源管理: 帮助企业优化资源配置，提高资源利用率。
计划与执行对比: 支持计划与实际执行情况的对比，帮助团队及时调整策略。

项目特点

jsGantt-Improved 具有以下显著特点：

轻量级: 无需外部库或图像，减少项目依赖，提升加载速度。
多功能: 支持任务、任务组、依赖关系、任务完成度、资源管理、成本计算等多种功能。
国际化: 支持多种语言，满足全球用户的需求。
动态加载: 支持从JSON和XML文件动态加载任务数据，方便数据管理。
易于集成: 提供多种集成方式，包括直接引入文件、npm安装以及与主流前端框架的集成。

如何开始使用

您可以通过以下方式快速开始使用 jsGantt-Improved：

直接引入文件: 将 jsgantt.js 和 jsgantt.css 文件引入您的项目。
npm安装: 使用 npm install jsgantt-improved 命令安装，并通过 import {JSGantt} from 'jsgantt-improved'; 引入。
框架集成: 对于Angular、React和Vue，分别使用 ng-gantt、react-jsgantt 和 vue-jsgantt 组件。

示例代码

以下是一个简单的示例代码，展示如何使用 jsGantt-Improved 创建一个甘特图：

<link href="jsgantt.css" rel="stylesheet" type="text/css"/>
<script src="jsgantt.js" type="text/javascript"></script>

<div style="position:relative" class="gantt" id="GanttChartDIV"></div>

<script>
var g = new JSGantt.GanttChart(document.getElementById('GanttChartDIV'), 'day');

g.setOptions({
  vCaptionType: 'Complete',
  vQuarterColWidth: 36,
  vDateTaskDisplayFormat: 'day dd month yyyy',
  vDayMajorDateDisplayFormat: 'mon yyyy - Week ww',
  vWeekMinorDateDisplayFormat: 'dd mon',
  vLang: 'en',
  vShowTaskInfoLink: 1,
  vShowEndWeekDate: 0,
  vAdditionalHeaders: {
      category: {
        title: 'Category'
      },
      sector: {
        title: 'Sector'
      }
    },
  vUseSingleCell: 10000,
  vFormatArr: ['Day', 'Week', 'Month', 'Quarter'],
});

JSGantt.parseJSON('./fixes/data.json', g);

g.AddTaskItemObject({
  pID: 1,
  pName: "Define Chart <strong>API</strong>",
  pStart: "2017-02-25",
  pEnd: "2017-03-17",
  pPlanStart: "2017-04-01",
  pPlanEnd: "2017-04-15 12:00",
  pClass: "ggroupblack",
  pLink: "",
  pMile: 0,
  pRes: "Brian",
  pComp: 0,
  pGroup: 0,
  pParent: 0,
  pOpen: 1,
  pDepend: "",
  pCaption: "",
  pCost: 1000,
  pNotes: "Some Notes text",
  category: "My Category",
  sector: "Finance"
});

g.Draw();
</script>