website development gantt chart

2022.05.01

(website development gantt chart)Today I will share with you a super -functional cross -browser platformGantt chartLibraryDHTMLXGantt

website development gantt chart

dhtmlx-gantt DHTMLXcompanyOpen source JavaScript Gantt chart/Horizontal diagram/Strip diagramClass library。Used to quickly build a display project、schedule,Related progress with time associated with time。

website development gantt chart

illustrate

dhtmlx-Gantt InSt. Petersburg, RussiaofDHTMLXThe Gandu component developed by the company,Applied toB/SModerateWebApplication development。Widely used inProject management、architecture、ITsoftware、carEqual field。

website development gantt chart

Create quickly

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>gantt demo</title>
	<script src="dhtmlxgantt.js?v=6.0.0"></script>
	<link rel="stylesheet" href="dhtmlxgantt.css?v=6.0.0">
	<style>
		html, body {
			height: 100%;
			padding: 0px;
			margin: 0px;
			overflow: hidden;
		}
	</style>
</head>
<body>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
	var taskList = {
		data: [
			{
				id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
				progress: 0.4, open: true
			},
			{
				id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
				progress: 0.6, parent: 1
			},
			{
				id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
				progress: 0.6, parent: 1
			}
		],
		links: [
			{id: 1, source: 1, target: 2, type: "1"},
			{id: 2, source: 2, target: 3, type: "0"}
		]
	};
	
	gantt.config.date_format = "%Y-%m-%d %H:%i";
	gantt.init("gantt_here");
	gantt.parse(taskList);
</script>
</body>
</html>
(website development gantt chart)website development gantt chart

(website development gantt chart)

In order to configure the appearance of Gandu,dhtmlxGanttprovided2Object configandtemplates

gantt.config //date,Proportion,Configuration options of controls and other。
gantt.templates //Date and label template used in Gantetu。
  • gantt.config Annual diagram
gantt.config.scale_unit = "year"; //Show year -on -year
gantt.config.step = 1.5;	//Set the step of time scale(Xaxis)
gantt.config.date_scale = "%Y";	//Date scale year -on -year

gantt.init("gantt_here");
website development gantt chart

  • gantt.config Monthly diagram
gantt.config.scale_unit = "month"; //Monthly displayed
gantt.config.date_scale = "%F, %Y"; //Set the format of time scale(Xaxis) Multi -scale

gantt.config.scale_height = 50; //Set the height of time scale and the title of a grid

gantt.config.subscales = [
	{unit: "day", step: 1, date: "%j, %D"}
]; //Specify the second time scale

gantt.init("gantt_here");
website development gantt chart

  • gantt.templates Can be used to change the date and label display。
(website development gantt chart)gantt.templates.task_text=function(start,end,task){
	return "<b>Text:</b> "+task.text+",<b> Holders:</b> "+task.username;
};
gantt.init("gantt_here");
website development gantt chart

The official website provides rich document examples。

website development gantt chart

(website development gantt chart)

website development gantt chart

website development gantt chart

A great open source Gante Gallery,Can make you predict time、cost、Quantity and quality association and retrospective results。It can also help you consider manpower、resource、date、Repeated elements and key parts in the project,Let you see the task progress and the utilization rate of resources more intuitively。

# Official website address
https://dhtmlx.com/docs/products/dhtmlxGantt/

# Warehouse Address
https://github.com/DHTMLX/gantt

All right,I will introduce here today。If you have any other good Gambter gallery,Welcome to exchange and discuss!

返回列表
更多新闻资讯