甘特图
初始版本（兼容IE，FF，不兼容谷歌浏览器）<%@ page language="C#" autoeventwireup="true" codefile="Default.aspx.cs" inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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; //要展示的div
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' id='df'><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;
//-----begin--- span1
_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()); //设置to日期
_minDate.setFullYear(_taskList[0].getFrom().getFullYear(), _taskList[0].getFrom().getMonth(), _taskList[0].getFrom().getDate()); //设置from日期
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());
}
//-----end-----span1 获取整个列表中最大的日期和最小的日期
//---- Fix _maxDate value for better displaying-----
// Add at least 5 days
if (_maxDate.getMonth() == 11) //December 12月
{
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))//toDate 与 fromDate 比较
{
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); //24 * 60 * 60 * 1000 =86 400 000一天的微秒数 每个起始的任务的日期-最小的开始日期
_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>";
//27应该是<td> -- width=(27 * _dateDiff - 1 + 100) 100是要显示Resource的内容
}
_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-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;
}
</style>
<body>
<h3>
Diagram</h3>
<div style="position: relative" class="Gantt" id="GanttChart">
</div>
<span id="txt1"></span>
</body>
<script type="text/javascript">
var g = new Gantt(document.all.GanttChart);
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', '<b>Sample task 1 1</b>', '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', '<i>Sample task 3<i>', 'Dathq', 50));
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', '<b>Sample task 1 1</b>', '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', '<i>Sample task 3<i>', 'Dathq', 50));
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', '<b>Sample task 1 1</b>', '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', '<i>Sample task 3<i>', 'Dathq', 50));
g.AddTaskDetail(new Task('2/11/2008', '2/19/2008', '<b>Sample task 1 1</b>', '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', '<i>Sample task 3<i>', 'Dathq', 50));
g.Draw();
document.getElementById("txt1").InnerTEXT = document.getElementById("GanttChart").innerHTML;
</script>
</html>
本人在长沙, 有工作可以加我QQ4658276
浙公网安备 33010602011771号