网站:http://dhtmlx.com/docs/products/dhtmlxGantt/
<script src=“gant/dhtmlxgrntt.js” type="text/javascript" chartset="utf-8"></script>
<link rel="stylesheet" href="gant/skins/dhtmlxgantt_terrace.css" type="text/css" media="screen" title="no title" charset="utf-8">
<!DOCTYPE html> | |
<head> | |
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> | |
<title>DHTMLX Gantt Chart - Basic Demo</title> | |
<meta name="description" content="A basic demo of dhtmlxGantt, an interactive Gantt chart for visualization of project schedule."/> | |
<meta name="keywords" content="javascript, gantt chart, gantt, charting, library, ajax, ui, project, task, milestone, management, visualization, demo"/> | |
<script src="gantt/dhtmlxgantt.js?v=2.1" type="text/javascript" charset="utf-8"></script> | |
<link rel="stylesheet" href="gantt/skins/dhtmlxgantt_terrace.css?v=2.0" type="text/css" media="screen" title="no title" charset="utf-8"> | |
<style type="text/css" media="screen"> | |
html, body{ | |
margin:0px; | |
padding:0px; | |
height:100%; | |
overflow:hidden; | |
} | |
.weekend{ background: #f4f7f4 !important;} | |
.gantt_selected .weekend{ | |
background:#FFF3A1 !important; | |
} | |
</style> | |
</head> | |
<body onresize="modSampleHeight()"> | |
<!--[if lte IE 7]> | |
<style type="text/css">div{display:none;}</style> | |
<h4 style='text-align:center; font-family:Arial; margin-top:50px;'>Unfortunately dhtmlxGantt 2.0 doesn't support IE6 and IE7 browsers.<br>Please open these demos in different browser or in IE8+.</h3> | |
<![endif]--> | |
<script> | |
function modSampleHeight(){ | |
var headHeight = 100; | |
var sch = document.getElementById("gantt_here"); | |
sch.style.height = (parseInt(document.body.offsetHeight)-headHeight)+"px"; | |
var contbox = document.getElementById("contbox"); | |
contbox.style.width = (parseInt(document.body.offsetWidth)-300)+"px"; | |
gantt.setSizes(); | |
} | |
</script> | |
<div style="height:95px;background-color:#3D3D3D;border-bottom:5px solid #828282; overflow:hidden;"> | |
<a style="float:left;margin:22px 0 0 25px;" href="03_hours.html"><img border="0" src="images/btn-left.gif"></a> | |
<div id="contbox" style="float:left;color:white;margin:22px 75px 0 75px; overflow:hidden;font: 17px Arial,Helvetica;color:white"> | |
<div style="border-right:5px solid #2D8EB6;color:#2D8EB6;width:175px;height:50px;float:left;text-align:right;padding-right:25px;">Basic Gantt Chart</div> | |
<div style="font-size:12px;padding-left:225px;max-width:500px;">This is a basic Gantt chart demo that displays tasks schedule in weeks and days.</div> | |
<div style="font-size:12px;padding-left:225px;margin-top:5px;color:#949292;max-width:500px;"> | |
You can drag-and-drop and resize the task bars to change the start/end time and duration of the tasks. Also, you can double-click on the task bar or on corresponding grid row to call a lightbox with form to edit the task details. Click on “+” sign to create a new child task.</div> | |
</div> | |
<a style="float:right;margin:22px 25px 0 0;" href="02_features.html"><img border="0" src="images/btn-right.gif"></a> | |
</div> | |
<div id="gantt_here" style='width:100%; height:100%;'></div> | |
<script type="text/javascript"> | |
var demo_tasks = { | |
data:[ | |
{"id":1, "text":"Office itinerancy", "type":gantt.config.types.project, "order":"10", progress: 0.4, open: false}, | |
{"id":2, "text":"Office facing", "type":gantt.config.types.project, "start_date":"02-04-2013", "duration":"8", "order":"10", progress: 0.6, "parent":"1", open: true}, | |
{"id":3, "text":"Furniture installation", "type":gantt.config.types.project, "start_date":"11-04-2013", "duration":"8", "order":"20", "parent":"1", progress: 0.6, open: true}, | |
{"id":4, "text":"The employee relocation", "type":gantt.config.types.project, "start_date":"13-04-2013", "duration":"6", "order":"30", "parent":"1", progress: 0.5, open: true}, | |
{"id":5, "text":"Interior office", "start_date":"02-04-2013", "duration":"7", "order":"3", "parent":"2", progress: 0.6, open: true}, | |
{"id":6, "text":"Air conditioners check", "start_date":"03-04-2013", "duration":"7", "order":"3", "parent":"2", progress: 0.6, open: true}, | |
{"id":7, "text":"Workplaces preparation", "start_date":"11-04-2013", "duration":"8", "order":"3", "parent":"3", progress: 0.6, open: true}, | |
{"id":8, "text":"Preparing workplaces", "start_date":"14-04-2013", "duration":"5", "order":"3", "parent":"4", progress: 0.5, open: true}, | |
{"id":9, "text":"Workplaces importation", "start_date":"14-04-2013", "duration":"4", "order":"3", "parent":"4", progress: 0.5, open: true}, | |
{"id":10, "text":"Workplaces exportation", "start_date":"14-04-2013", "duration":"3", "order":"3", "parent":"4", progress: 0.5, open: true}, | |
{"id":11, "text":"Product launch", "type":gantt.config.types.project, "order":"5", progress: 0.6, open: true}, | |
{"id":12, "text":"Perform Initial testing", "start_date":"03-04-2013", "duration":"5", "order":"3", "parent":"11", progress: 1, open: true}, | |
{"id":13, "text":"Development", "type":gantt.config.types.project, "start_date":"02-04-2013", "duration":"7", "order":"3", "parent":"11", progress: 0.5, open: true}, | |
{"id":14, "text":"Analysis", "start_date":"02-04-2013", "duration":"6", "order":"3", "parent":"11", progress: 0.8, open: true}, | |
{"id":15, "text":"Design", "type":gantt.config.types.project, "start_date":"02-04-2013", "duration":"5", "order":"3", "parent":"11", progress: 0.2, open: false}, | |
{"id":16, "text":"Documentation creation", "start_date":"02-04-2013", "duration":"7", "order":"3", "parent":"11", progress: 0, open: true}, | |
{"id":17, "text":"Develop System", "start_date":"03-04-2013", "duration":"2", "order":"3", "parent":"13", progress: 1, open: true}, | |
{"id":25, "text":"Beta Release", "start_date":"06-04-2013", "order":"3","type":gantt.config.types.milestone, "parent":"13", progress: 0, open: true}, | |
{"id":18, "text":"Integrate System", "start_date":"08-04-2013", "duration":"2", "order":"3", "parent":"13", progress: 0.8, open: true}, | |
{"id":19, "text":"Test", "start_date":"10-04-2013", "duration":"4", "order":"3", "parent":"13", progress: 0.2, open: true}, | |
{"id":20, "text":"Marketing", "start_date":"10-04-2013", "duration":"4", "order":"3", "parent":"13", progress: 0, open: true}, | |
{"id":21, "text":"Design database", "start_date":"03-04-2013", "duration":"4", "order":"3", "parent":"15", progress: 0.5, open: true}, | |
{"id":22, "text":"Software design", "start_date":"03-04-2013", "duration":"4", "order":"3", "parent":"15", progress: 0.1, open: true}, | |
{"id":23, "text":"Interface setup", "start_date":"03-04-2013", "duration":"5", "order":"3", "parent":"15", progress: 0, open: true}, | |
{"id":24, "text":"Release v1.0", "start_date":"15-04-2013", "order":"3","type":gantt.config.types.milestone, "parent":"11", progress: 0, open: true} | |
], | |
links:[ | |
{id:"1",source:"1",target:"2",type:"1"}, | |
{id:"2",source:"2",target:"3",type:"0"}, | |
{id:"3",source:"3",target:"4",type:"0"}, | |
{id:"4",source:"2",target:"5",type:"2"}, | |
{id:"5",source:"2",target:"6",type:"2"}, | |
{id:"6",source:"3",target:"7",type:"2"}, | |
{id:"7",source:"4",target:"8",type:"2"}, | |
{id:"8",source:"4",target:"9",type:"2"}, | |
{id:"9",source:"4",target:"10",type:"2"}, | |
{id:"10",source:"11",target:"12",type:"1"}, | |
{id:"11",source:"11",target:"13",type:"1"}, | |
{id:"12",source:"11",target:"14",type:"1"}, | |
{id:"13",source:"11",target:"15",type:"1"}, | |
{id:"14",source:"11",target:"16",type:"1"}, | |
{id:"15",source:"13",target:"17",type:"1"}, | |
{id:"16",source:"17",target:"25",type:"0"}, | |
{id:"23",source:"25",target:"18",type:"0"}, | |
{id:"17",source:"18",target:"19",type:"0"}, | |
{id:"18",source:"19",target:"20",type:"0"}, | |
{id:"19",source:"15",target:"21",type:"2"}, | |
{id:"20",source:"15",target:"22",type:"2"}, | |
{id:"21",source:"15",target:"23",type:"2"}, | |
{id:"22",source:"13",target:"24",type:"0"} | |
] | |
}; | |
gantt.templates.scale_cell_class = function(date){ | |
if(date.getDay()==0||date.getDay()==6){ | |
return "weekend"; | |
} | |
}; | |
gantt.templates.task_cell_class = function(item,date){ | |
if(date.getDay()==0||date.getDay()==6){ | |
return "weekend" ; | |
} | |
}; | |
gantt.templates.rightside_text = function(start, end, task){ | |
if(task.type == gantt.config.types.milestone){ | |
return task.text; | |
} | |
return ""; | |
} | |
gantt.config.columns = [ | |
{name:"text", label:"Task name", width:"*", tree:true }, | |
{name:"start_time", label:"Start time", template:function(obj){ | |
return gantt.templates.date_grid(obj.start_date); | |
}, align: "center", width:60 }, | |
{name:"duration", label:"Duration", align:"center", width:60}, | |
{name:"add", label:"", width:44 } | |
]; | |
gantt.config.grid_width = 390; | |
gantt.config.date_grid = "%F %d" | |
gantt.config.scale_height = 60; | |
gantt.config.subscales = [ | |
{ unit:"week", step:1, date:"Week #%W"} | |
]; | |
gantt.init("gantt_here"); | |
modSampleHeight(); | |
gantt.parse(demo_tasks); | |
</script> | |
</body> |