jsgantt.js

甘特图的制作的小教程

   // function that loads each Task Item and fills TaskList array with each task attributes.
   // You should be able to add items to the chart in realtime via javascript and issuing "g.Draw()" command.
   // Parameters:
   // pID: (required) is a unique ID used to identify each row for parent functions and for setting dom id for hiding/showing
   // pName: (required) is the task Label
   // pStart: (required) the task start date, can enter empty date ('') for groups
   // pEnd: (required) the task end date, can enter empty date ('') for groups
   // pColor: (required) the html color for this task; e.g. '00ff00'
   // pLink: (optional) any http link navigated to when task bar is clicked.
   // pMile: UNUSED - in future will represent a milestone
   // pRes: (optional) resource name
   // pComp: (required) completion percent
   // pGroup: (optional) indicates whether this is a group(parent) - 0=NOT Parent; 1=IS Parent
   // pParent: (required) identifies a parent pID, this causes this task to be a child of identified task
   // pOpen: UNUSED - in future can be initially set to close folder when chart is first drawn
var JSGantt; if (!JSGantt) JSGantt = {};
//function JSGantt() {}
JSGantt.isIE = function () {
	if(typeof document.all != 'undefined')
	return true;
	else
	return false;
	}
function Graphics(canvas)
{
	this.canvas = canvas;
	this.cache = new Array;
	this.shapes = new Object;
	this.nObject = 0;
	// defaults
	this.penColor = "black";
	this.zIndex = 0;
}
Graphics.prototype.createPlotElement = function(x,y,w,h) {
	// detect canvas
//	if ( !this.oCanvas )
//	{
		if ( (this.canvas == undefined) || (this.canvas == "") ) 
			this.oCanvas = document.body;
		else 
			this.oCanvas = document.getElementById(this.canvas);
//	}
	// retrieve DIV
	var oDiv;
//	if ( this.cache.length ) {
//		oDiv = this.cache.pop();
//	} else {
		oDiv = document.createElement('div');
		this.oCanvas.appendChild(oDiv);

		oDiv.style.position = "absolute";
		oDiv.style.margin = "0px";
		oDiv.style.padding = "0px";
		oDiv.style.overflow = "hidden";
		oDiv.style.border = "0px";
//	}

	// set attributes
	oDiv.style.zIndex = this.zIndex;
	oDiv.style.backgroundColor = this.penColor;
	
	oDiv.style.left = x;
	oDiv.style.top = y;
	oDiv.style.width = w + "px";
	oDiv.style.height = h + "px";

	oDiv.style.visibility = "visible";
	
	return oDiv;
}


Graphics.prototype.releasePlotElement = function(oDiv)
{
	oDiv.style.visibility = "hidden";
	this.cache.push(oDiv);
}
Graphics.prototype.addShape = function(shape)
{
	shape.oGraphics = this;
	shape.graphicsID = this.nObject;
	this.shapes[this.nObject] = shape;
	this.nObject++;
	shape.draw();
	return shape;
}
Graphics.prototype.removeShape = function(shape)
{
	if ( (shape instanceof Object) && 
		(shape.oGraphics == this) && 
		(this.shapes[shape.graphicsID] == shape) )
	{
		shape.undraw();
		this.shapes[shape.graphicsID] = undefined;
		shape.oGraphics = undefined;
	}
}

Graphics.prototype.clear = function()
{
	for ( var i in this.shapes )
		this.removeShape(this.shapes[i]);
}

//=============================================================================
// Point
Graphics.prototype.drawPoint = function(x,y)
{
	return this.addShape(new Point(x,y))
}
function Point(x,y)
{
	this.x = x;
	this.y = y;
}
Point.prototype.draw = function()
{
	this.oDiv = this.oGraphics.createPlotElement(this.x,this.y,1,1);
}
Point.prototype.undraw = function()
{
	this.oGraphics.releasePlotElement(this.oDiv);
	this.oDiv = undefined;
}
//=============================================================================
// Line
Graphics.prototype.drawLine = function(x1,y1,x2,y2)
{
	return this.addShape(new Line(x1,y1,x2,y2))
}
function Line(x1,y1,x2,y2)
{
	this.x1 = x1;
	this.y1 = y1;
	this.x2 = x2;
	this.y2 = y2;
}
Line.prototype.draw = function()
{
	this.plots = new Array;
	var dx = this.x2 - this.x1;
	var dy = this.y2 - this.y1;
	var x = this.x1;
	var y = this.y1;
	var n = Math.max(Math.abs(dx),Math.abs(dy));
	dx = dx / n;
	dy = dy / n;
	for ( i = 0; i <= n; i++ )
	{
		this.plots.push(this.oGraphics.createPlotElement(Math.round(x),Math.round(y),1,1));
		x += dx;
		y += dy;
	}
}

Line.prototype.undraw = function()
{
	while ( this.plots.length )
		this.oGraphics.releasePlotElement(this.plots.pop());
	this.plots = undefined;
}
JSGantt.TaskItem = function(pID, pName, pStart, pEnd, pColor, pLink, pMile, pRes, pComp, pGroup, pParent, pOpen, pDepend)
   {
      var vID    = pID;
      var vName  = pName;
      var vStart = new Date();	
      var vEnd   = new Date();
      var vColor = pColor;
      var vLink  = pLink;
      var vMile  = pMile;
      var vRes   = pRes;
      var vComp  = pComp;
      var vGroup = pGroup;
      var vParent = pParent;
      var vOpen   = pOpen;
      var vDepend = pDepend;
      var vLevel = 0;
      var vNumKid = 0;
      var vShow  = 1;
      var x1, y1, x2, y2;
      if (vGroup != 1)
      {  
         var vDateParts = pStart.split('/');
         vStart.setFullYear(parseInt(vDateParts[2], 10), parseInt(vDateParts[0], 10) - 1, parseInt(vDateParts[1], 10));
         vDateParts = pEnd.split('/'); 
         vEnd.setFullYear(parseInt(vDateParts[2], 10), parseInt(vDateParts[0], 10) - 1, parseInt(vDateParts[1], 10));		
      }
      this.getID       = function(){ return vID };
      this.getName     = function(){ return vName };
      this.getStart    = function(){ return vStart};
      this.getEnd      = function(){ return vEnd  };
      this.getColor    = function(){ return vColor};
      this.getLink     = function(){ return vLink };
      this.getMile     = function(){ return vMile };
      this.getDepend     = function(){ return vDepend };
      this.getResource = function(){ if(vRes) return vRes; else return '&nbsp';  };
      this.getCompVal  = function(){ if(vComp) return vComp; else return 0; };
      this.getCompStr  = function(){ if(vComp) return vComp+'%'; else return ''; };
      this.getDuration = function(vFormat){ 
        if (vMile) return '-';
		if(vFormat == 'day') {
          tmpDays =  Math.ceil((this.getEnd() - this.getStart()) /  (24 * 60 * 60 * 1000) + 1);
               if(tmpDays == 1) return (tmpDays + ' Day'); else return(tmpDays + ' Days'); 
        }
        if(vFormat == 'week') {
          tmpWeeks =  ((this.getEnd() - this.getStart()) /  (24 * 60 * 60 * 1000) + 1)/7;
               if(tmpWeeks == 1) return ('1 Week'); else return(tmpWeeks.toFixed(1) + ' Weeks'); 
        }
        if(vFormat == 'month') {
          tmpMonths =  ((this.getEnd() - this.getStart()) /  (24 * 60 * 60 * 1000) + 1)/30;
               if(tmpMonths == 1) return ('1 Month'); else return(tmpMonths.toFixed(1) + ' Months'); 
        }
      };
      this.getParent   = function(){ return vParent };
      this.getGroup    = function(){ return vGroup };
      this.getOpen     = function(){ return vOpen };
      this.getLevel    = function(){ return vLevel };
      this.getNumKids  = function(){ return vNumKid };
      this.getStartX   = function(){ return x1 };
      this.getStartY   = function(){ return y1 };
      this.getEndX     = function(){ return x2 };
      this.getEndY     = function(){ return y2 };
      this.setDepend   = function(pDepend){ vDepend = pDepend;};
      this.setStart    = function(pStart){ vStart = pStart;};
      this.setEnd      = function(pEnd)  { vEnd   = pEnd;  };
      this.setLevel    = function(pLevel){ vLevel = pLevel;};
      this.setNumKid   = function(pNumKid){ vNumKid = pNumKid;};
      this.setCompVal  = function(pCompVal){ vComp = pCompVal;};
      this.setStartX   = function(pX) {x1 = pX; };
      this.setStartY   = function(pY) {y1 = pY; };
      this.setEndX     = function(pX) {x2 = pX; };
      this.setEndY     = function(pY) {y2 = pY; };
  }
  // function that loads the main gantt chart properties and functions
  // pDiv: (required) this is a DIV object created in HTML
  // pStart: UNUSED - future use to force minimum chart date
  // pEnd: UNUSED - future use to force maximum chart date
  // pWidth: UNUSED - future use to force chart width and cause objects to scale to fit within that width
  // pShowRes: UNUSED - future use to turn on/off display of resource names
  // pShowDur: UNUSED - future use to turn on/off display of task durations
  // pFormat: (required) - used to indicate whether chart should be drawn in "day", "week", or "month" format
JSGantt.GanttChart =  function(pGanttVar, pDiv, pStart, pEnd, pWidth, pShowRes, pShowDur, pFormat)
  {
      var vGanttVar = pGanttVar;	  
      var vDiv      = pDiv;
      var vStart    = new Date();	
      var vEnd      = new Date();
      var vColWidth    = pWidth;
      var vShowres  = pShowRes;
      var vShowDur  = pShowDur;
      var vFormat   = pFormat;
      var vNumUnits  = 0;
      var gr = new Graphics('rightside');
      var vTaskList = new Array();		
      var month=new Array(12);
          month[0]="January";
          month[1]="February";
          month[2]="March";
          month[3]="April";
          month[4]="May";
          month[5]="June";
          month[6]="July";
          month[7]="August";
          month[8]="September";
          month[9]="October";
          month[10]="November";
          month[11]="December";
	this.CalcTaskXY = function () 
  {
        var vList = this.getList();
        var vTaskDiv;
        var vParDiv;
        var vLeft, vTop, vHeight, vWidth;
        for(i = 0; i < vList.length; i++)
        {