JavaScript实现甘特图 - SIcon Gantt Chart
简介
笔者在开发一个基于Web的应用程序提供对人物和项目事件的管理。项目需要一个甘特图控件可视化表示任务列表，笔者尝试寻找自由可用的解决方案（因为不想增加开销）。笔者找到了一些例子，不过并不满意。于是，决定创建一个自己的甘特图控件。此次是笔者工作的最初成果。这个SIcon的最初版本只做了几个小时，所以仍会有些问题。尽管如此，笔者还是希望与各位分享，希望能帮助大家。
SICon现在支持FireFox浏览器！
背景
掌握和使用这个示例需要Jscript和CSS知识。
使用代码
代码并不是很复杂，所以我在这里将展示全部：
/* --------- SICON GANTT CHART -----------------------------------------------------------
* AUTHOR : Dathq - ICT Service Engineering Jsc, - [email]dathq@ise.com.vn[/email]
* 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 = "Task";
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 += "";
_thirdRow = " ";
_dTemp.setFullYear(_minDate.getFullYear(), _minDate.getMonth(), _minDate.getDate());
while(Date.parse(_dTemp) <= Date.parse(_maxDate))
{
if(_dTemp.getDay() % 6 == 0) //Weekend
{
_gStr += "" + _dTemp.getDate() + "";
if(Date.parse(_dTemp) == Date.parse(_currentDate))
_thirdRow += " ";
else
_thirdRow += " ";
}
else
{
_gStr += "" + _dTemp.getDate() + "";
if(Date.parse(_dTemp) == Date.parse(_currentDate))
_thirdRow += " ";
else
_thirdRow += " ";
}
if(_dTemp.getDate() < getDaysInMonth(_dTemp.getMonth() + 1, _dTemp.getFullYear()))
{
if(Date.parse(_dTemp) == Date.parse(_maxDate))
{
_firstRowStr += "T" + (_dTemp.getMonth() + 1) + "/" + _dTemp.getFullYear() + "";
}
_dTemp.setDate(_dTemp.getDate() + 1);
_colSpan++;
}
else
{
_firstRowStr += "T" + (_dTemp.getMonth() + 1) + "/" + _dTemp.getFullYear() + "";
_colSpan = 0;
if(_dTemp.getMonth() == 11) //December
{
_dTemp.setFullYear(_dTemp.getFullYear() + 1, 0, 1);
}
else
{
_dTemp.setFullYear(_dTemp.getFullYear(), _dTemp.getMonth() + 1, 1);
}
}
}
_thirdRow += "";
_gStr += "" + _thirdRow;
_gStr += "";
_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 += "" + getProgressDiv(_taskList[i].getProgress()) + "" + _taskList[i].getResource() + "";
_gStr += "" + _taskList[i].getTask() + "";
}
_GanttDiv.innerHTML = _gStr;
}
}
}
function getProgressDiv(progress)
{
return ""
}
// 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 -----*/[/code]如何使用这段脚本
在你的HTML, ASCX, ASPX或PHP文档的Body部分，把下面几行代码拷贝到你想表示甘特图的地方。[code]<body>
<h3>Diagram</h3>
<div style="position:relative" class="Gantt" id="GanttChart"></div>
</body>
<script>
var g = new Gantt(document.all.GanttChart);
g.AddTaskDetail(new Task('2/11/2008', '2/12/2008',
'<b>Sample task 1 1</b>', 'Dathq', 50));
g.AddTaskDetail(new Task('2/16/2008', '2/19/2008',
' Sample task 1.1', 'Dathq, Thanhdd', 30));
g.AddTaskDetail(new Task('2/12/2008', '3/4/2008', 'Sample task 2', 'Hanhnd', 60));
g.AddTaskDetail(new Task('2/11/2008', '2/16/2008', 'Sample task 3', 'Dathq', 50));
g.Draw();
</script>[/code]使用var g = new Gantt(document.all.GanttChart);语句指定你要显示的甘特图到命名为"GanttChart"的DIV元素（你可以在body中看到它）。
g.AddTaskDetail()方法添加任务到任务列表。你可以使用AJAX或任何你喜欢的方式来生成这些命令以添加任务的集合。
使用g.Draw()来渲染基于追加到甘特图对象的任务列表的甘特图。
如何改变组件外观
这里笔者定义了一些类用来自定义甘特图的样式，为此提供了全部代码。你可以定义更多的类并且更轻易地改变甘特图控件的外观。
通 过改变样式表，并且在代码中添加属性到任务对象，你可以为你自己创建更加智能的甘特图。例如：为任务条设置不同的颜色，漂亮的背景图片，更好的图标提示等 等。
/*----- 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-family:tahoma, arial, verdana;
font-size:11px;
}
.GTaskTitle
{
font-family:tahoma, arial, verdana;
font-size:11px;
font-weight:bold;
}
.GMonth
{
padding-left:5px;
font-family:tahoma, arial, verdana;
font-size:11px;
font-weight:bold;
}
.GToday
{
background-color: #FDFDE0;
}
.GWeekend
{
font-family:tahoma, arial, verdana;
font-size:11px;
background-color:#F5F5F5;
text-align:center;
}
.GDay
{
font-family:tahoma, arial, verdana;
font-size:11px;
text-align:center;
}
.GTask
{
border-top:1px solid #CACACA;
border-bottom:1px solid #CACACA;
height:14px;
background-color:yellow;
}
.GProgress
{
background-color:black;
height:2px;
overflow: hidden;
margin-top:5px;
}
图表
var g = new Gantt(document.all.GanttChart);
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', 'Sample task 1 1', 'Dathq', 50));
g.AddTaskDetail(new Task('2/16/2008', '2/19/2008', ' Sample task 1.1', 'Dathq, Thanhdo', 30));
g.AddTaskDetail(new Task('2/12/2008', '3/2/2008', 'Sample task 2', 'Hanhnd', 60));
g.AddTaskDetail(new Task('2/11/2008', '2/16/2008', 'Sample task 3', 'Dathq', 50));
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', 'Sample task 1 1', 'Dathq', 50));
g.AddTaskDetail(new Task('2/16/2008', '2/19/2008', ' Sample task 1.1', 'Dathq, Thanhdo', 30));
g.AddTaskDetail(new Task('2/12/2008', '3/2/2008', 'Sample task 2', 'Hanhnd', 60));
g.AddTaskDetail(new Task('2/11/2008', '2/16/2008', 'Sample task 3', 'Dathq', 50));
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', 'Sample task 1 1', 'Dathq', 50));
g.AddTaskDetail(new Task('2/16/2008', '2/19/2008', ' Sample task 1.1', 'Dathq, Thanhdo', 30));
g.AddTaskDetail(new Task('2/12/2008', '3/2/2008', 'Sample task 2', 'Hanhnd', 60));
g.AddTaskDetail(new Task('2/11/2008', '2/16/2008', 'Sample task 3', 'Dathq', 50));
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', 'Sample task 1 1', 'Dathq', 50));
g.AddTaskDetail(new Task('2/16/2008', '2/19/2008', ' Sample task 1.1', 'Dathq, Thanhdo', 30));
g.AddTaskDetail(new Task('2/12/2008', '3/2/2008', 'Sample task 2', 'Hanhnd', 60));
g.AddTaskDetail(new Task('5/11/2008', '5/16/2008', 'Sample task 3', 'Dathq', 50));
g.Draw(); [/code]
csharper -