javascript生成甘特图资源-CSDN文库

共1个文件

htm：1个

需积分: 27 115 浏览量 2008-12-23 13:29:28 上传评论 2 收藏 3KB ZIP 举报

JavaScript是一种广泛应用于网页和应用程序开发的脚本语言，它的灵活性和强大的功能使其成为实现动态交互的理想选择。在本文中，我们将深入探讨如何使用JavaScript来创建甘特图，这是一种用于项目管理，时间线展示和任务进度可视化图表。甘特图起源于20世纪初，由亨利·甘特发明，它通过条形图来表示项目任务的开始和结束日期，以及它们之间的依赖关系。在现代，尤其是在IT领域，甘特图被用于项目管理和软件开发中，帮助团队成员清晰地了解任务的状态和进度。要使用JavaScript生成甘特图，你需要了解以下几个核心概念： 1. **HTML结构**：你需要一个基本的HTML页面作为甘特图的容器。这通常包括一个`<div>`元素，用于在其中绘制甘特图。 2. **CSS样式**：为了使甘特图美观且易于理解，你需要编写CSS来控制条形图的样式，如颜色、宽度、边框等。同时，布局也很关键，确保每个任务条形都能正确对齐并适应不同长度的时间段。 3. **JavaScript库**：有很多开源的JavaScript库可以帮助快速构建甘特图，例如GanttChart.js、dhtmlxGantt或GanttProject。这些库提供了丰富的API和方法，可以方便地设置任务、时间戳、依赖关系等。 4. **数据格式**：甘特图的数据通常以JSON或其他结构化格式存储，包括任务ID、开始日期、结束日期、依赖关系等。你需要将这些数据转换为JavaScript可以理解的形式，并传递给甘特图库。 5. **绘制甘特图**：利用库提供的API，将数据渲染到HTML元素中。这通常涉及到计算任务条形的位置、长度，以及处理时间轴和刻度标记。 6. **交互性**：为了让甘特图具有交互性，你需要添加事件监听器，比如点击条形图时显示任务详情，或者拖动条形来调整任务的持续时间。 7. **动态更新**：在项目进行中，甘特图的数据可能会发生变化。为此，你需要提供一种方法来实时更新图表示例，反映最新的任务状态。在`GanttChart.htm`这个文件中，可能包含了使用特定JavaScript库创建的甘特图示例。文件打开后，你可以查看HTML和JavaScript代码，了解它是如何将数据转化为可视化图表的。通过分析和学习这个例子，你可以进一步掌握生成甘特图的技术，并将其应用到自己的项目中。使用JavaScript生成甘特图是一项涉及HTML、CSS和JavaScript编程技能的任务，同时也需要对项目管理和时间线表示有深入的理解。借助现有的库和工具，你可以轻松创建出功能强大的甘特图，为你的团队提供直观的项目进度视图。

资源推荐

资源详情

资源评论

收起资源包目录

JS GanttChart.zip （1个子文件）

GanttChart.htm 10KB

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 1</title> </head> <script> /* --------- SICON GANTT CHART ----------------------------------------------------------- * AUTHOR : Dathq - ICT Service Engineering Jsc, - dathq@ise.com.vn * LICENSE : Free * DESCRIPTION : Create a new task item with these info * - from: start date (format: mm/dd/dddd) * - to: deadline of task (format: mm/dd/dddd) * - task: name of the task, what has to be solved (not includes ') * - resource: who have to solve this task (not includes ') * - progress: how is it going? (format: integer value from 0 to 100, not includes %) *----------------------------------------------------------------------------------------*/ function Task(from, to, task, resource, progress) { var _from = new Date(); var _to = new Date(); var _task = task; var _resource = resource; var _progress = progress; var dvArr = from.split('/'); _from.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1, parseInt(dvArr[1], 10)); dvArr = to.split('/'); _to.setFullYear(parseInt(dvArr[2], 10), parseInt(dvArr[0], 10) - 1, parseInt(dvArr[1], 10)); this.getFrom = function(){ return _from}; this.getTo = function(){ return _to}; this.getTask = function(){ return _task}; this.getResource = function(){ return _resource}; this.getProgress = function(){ return _progress}; } function Gantt(gDiv) { var _GanttDiv = gDiv; var _taskList = new Array(); this.AddTaskDetail = function(value) { _taskList.push(value); } this.Draw = function() { var _offSet = 0; var _dateDiff = 0; var _currentDate = new Date(); var _maxDate = new Date(); var _minDate = new Date(); var _dTemp = new Date(); var _firstRowStr = "<table border=1 style='border-collapse:collapse'><tr><td rowspan='2' width='200px' style='width:200px;'><div class='GTaskTitle' style='width:200px;'>Task</div></td>"; var _thirdRow = ""; var _gStr = ""; var _colSpan = 0; var counter = 0; _currentDate.setFullYear(_currentDate.getFullYear(), _currentDate.getMonth(), _currentDate.getDate()); if(_taskList.length > 0) { _maxDate.setFullYear(_taskList[0].getTo().getFullYear(), _taskList[0].getTo().getMonth(), _taskList[0].getTo().getDate()); _minDate.setFullYear(_taskList[0].getFrom().getFullYear(), _taskList[0].getFrom().getMonth(), _taskList[0].getFrom().getDate()); for(i = 0; i < _taskList.length; i++) { if(Date.parse(_taskList[i].getFrom()) < Date.parse(_minDate)) _minDate.setFullYear(_taskList[i].getFrom().getFullYear(), _taskList[i].getFrom().getMonth(), _taskList[i].getFrom().getDate()); if(Date.parse(_taskList[i].getTo()) > Date.parse(_maxDate)) _maxDate.setFullYear(_taskList[i].getTo().getFullYear(), _taskList[i].getTo().getMonth(), _taskList[i].getTo().getDate()); } //---- Fix _maxDate value for better displaying----- // Add at least 5 days if(_maxDate.getMonth() == 11) //December { if(_maxDate.getDay() + 5 > getDaysInMonth(_maxDate.getMonth() + 1, _maxDate.getFullYear())) _maxDate.setFullYear(_maxDate.getFullYear() + 1, 1, 5); //The fifth day of next month will be used else _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth(), _maxDate.getDate() + 5); //The fifth day of next month will be used } else { if(_maxDate.getDay() + 5 > getDaysInMonth(_maxDate.getMonth() + 1, _maxDate.getFullYear())) _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth() + 1, 5); //The fifth day of next month will be used else _maxDate.setFullYear(_maxDate.getFullYear(), _maxDate.getMonth(), _maxDate.getDate() + 5); //The fifth day of next month will be used } //-------------------------------------------------- _gStr = ""; _gStr += "</tr><tr>"; _thirdRow = "<tr><td> </td>"; _dTemp.setFullYear(_minDate.getFullYear(), _minDate.getMonth(), _minDate.getDate()); while(Date.parse(_dTemp) <= Date.parse(_maxDate)) { if(_dTemp.getDay() % 6 == 0) //Weekend { _gStr += "<td class='GWeekend'><div style='width:24px;'>" + _dTemp.getDate() + "</div></td>"; if(Date.parse(_dTemp) == Date.parse(_currentDate)) _thirdRow += "<td id='GC_" + (counter++) + "' class='GToDay' style='height:" + (_taskList.length * 21) + "'> </td>"; else _thirdRow += "<td id='GC_" + (counter++) + "' class='GWeekend' style='height:" + (_taskList.length * 21) + "'> </td>"; } else { _gStr += "<td class='GDay'><div style='width:24px;'>" + _dTemp.getDate() + "</div></td>"; if(Date.parse(_dTemp) == Date.parse(_currentDate)) _thirdRow += "<td id='GC_" + (counter++) + "' class='GToDay' style='height:" + (_taskList.length * 21) + "'> </td>"; else _thirdRow += "<td id='GC_" + (counter++) + "' class='GDay'> </td>"; } if(_dTemp.getDate() < getDaysInMonth(_dTemp.getMonth() + 1, _dTemp.getFullYear())) { if(Date.parse(_dTemp) == Date.parse(_maxDate)) { _firstRowStr += "<td class='GMonth' colspan='" + (_colSpan + 1) + "'>T" + (_dTemp.getMonth() + 1) + "/" + _dTemp.getFullYear() + "</td>"; } _dTemp.setDate(_dTemp.getDate() + 1); _colSpan++; } else { _firstRowStr += "<td class='GMonth' colspan='" + (_colSpan + 1) + "'>T" + (_dTemp.getMonth() + 1) + "/" + _dTemp.getFullYear() + "</td>"; _colSpan = 0; if(_dTemp.getMonth() == 11) //December { _dTemp.setFullYear(_dTemp.getFullYear() + 1, 0, 1); } else { _dTemp.setFullYear(_dTemp.getFullYear(), _dTemp.getMonth() + 1, 1); } } } _thirdRow += "</tr>"; _gStr += "</tr>" + _thirdRow; _gStr += "</table>"; _gStr = _firstRowStr + _gStr; for(i = 0; i < _taskList.length; i++) { _offSet = (Date.parse(_taskList[i].getFrom()) - Date.parse(_minDate)) / (24 * 60 * 60 * 1000); _dateDiff = (Date.parse(_taskList[i].getTo()) - Date.parse(_taskList[i].getFrom())) / (24 * 60 * 60 * 1000) + 1; _gStr += "<div style='position:absolute; top:" + (20 * (i + 2)) + "; left:" + (_offSet * 27 + 204) + "; width:" + (27 * _dateDiff - 1 + 100) + "'><div title='" + _taskList[i].getTask() + "' class='GTask' style='float:left; width:" + (27 * _dateDiff - 1) + "px;'>" + getProgressDiv(_taskList[i].getProgress()) + "</div><div style='float:left; padding-left:3'>" + _taskList[i].getResource() + "</div></div>"; _gStr += "<div style='position:absolute; top:" + (20 * (i + 2) + 1) + "; left:5px'>" + _taskList[i].getTask() + "</div>"; } _GanttDiv.innerHTML = _gStr; } } } function getProgressDiv(progress) { return "<div class='GProgress' style='width:" + progress + "%; overflow:hidden'></div>" } // GET NUMBER OF DAYS IN MONTH function getDaysInMonth(month, year) { var days; switch(month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: days = 31; break; case 4: case 6: case 9: case 11: days = 30; break; case 2: if (((year% 4)==0) && ((year% 100)!=0) || ((year% 400)==0)) days = 29; else days = 28; break; } return (days); } /*----- END OF MY CODE FOR Gantt CHART GENERATOR -----*/ </script> <style> /*----- SICON GANTT CHART STYLE CLASSES -------------------------- * DESCRIPTION : Theses class is required for SIcon Gantt Chart * NOTE : Should change the color, the text style only *----------------------------------------------------------------*/ .Gantt { font-f

评论收藏

内容反馈