使用js语句实现一个可伸缩的甘特图组件
时间: 2024-01-22 20:20:41 浏览: 29
要实现一个可伸缩的甘特图组件,我们可以使用JavaScript和HTML5 Canvas来绘制图形,并使用CSS样式来控制组件的大小和布局。
首先,我们需要定义一个包含任务信息的数据结构,例如:
```javascript
var tasks = [
{
name: "Task 1",
start: new Date(2021, 8, 1),
end: new Date(2021, 8, 5)
},
{
name: "Task 2",
start: new Date(2021, 8, 3),
end: new Date(2021, 8, 7)
},
{
name: "Task 3",
start: new Date(2021, 8, 6),
end: new Date(2021, 8, 10)
}
];
```
然后,我们可以创建一个名为“GanttChart”的JavaScript对象来处理甘特图的绘制和交互。该对象的主要功能包括:
- 绘制任务条形图
- 绘制任务名称和日期标签
- 支持缩放和拖动操作
```javascript
var GanttChart = function(canvasId, tasks) {
var canvas = document.getElementById(canvasId);
var context = canvas.getContext("2d");
// 绘制任务条形图
this.drawTasks = function() {
// 计算甘特图的宽度和高度
var chartWidth = canvas.width - 100;
var chartHeight = canvas.height - 50;
// 计算任务条形图的高度和间距
var taskHeight = chartHeight / tasks.length;
var taskSpacing = taskHeight * 0.2;
// 绘制每个任务的条形图
for (var i = 0; i < tasks.length; i++) {
var task = tasks[i];
// 计算任务条形图的位置和大小
var startX = 50 + (task.start.getTime() - startDate.getTime()) / timeScale;
var endX = 50 + (task.end.getTime() - startDate.getTime()) / timeScale;
var width = endX - startX;
var height = taskHeight - taskSpacing;
var startY = i * taskHeight + 25 + taskSpacing / 2;
// 绘制任务条形图
context.fillStyle = "#0077c0";
context.fillRect(startX, startY, width, height);
// 绘制任务名称和日期标签
context.fillStyle = "#000000";
context.fillText(task.name, 10, startY + height / 2);
context.fillText(task.start.toLocaleDateString(), startX, canvas.height - 10);
context.fillText(task.end.toLocaleDateString(), endX - context.measureText(task.end.toLocaleDateString()).width, canvas.height - 10);
}
};
// 支持缩放和拖动操作
this.enableInteractivity = function() {
var isDragging = false;
var lastX = 0;
canvas.addEventListener("mousedown", function(event) {
isDragging = true;
lastX = event.clientX;
});
canvas.addEventListener("mousemove", function(event) {
if (isDragging) {
var deltaX = event.clientX - lastX;
startDate = new Date(startDate.getTime() - deltaX / timeScale);
lastX = event.clientX;
this.drawTasks();
}
}.bind(this));
canvas.addEventListener("mouseup", function(event) {
isDragging = false;
});
canvas.addEventListener("wheel", function(event) {
var scaleFactor = 1 + event.deltaY / 1000;
timeScale *= scaleFactor;
this.drawTasks();
event.preventDefault();
}.bind(this));
};
// 初始化甘特图
var startDate = new Date(2021, 8, 1);
var endDate = new Date(2021, 8, 10);
var timeScale = (canvas.width - 100) / (endDate.getTime() - startDate.getTime());
// 绘制甘特图
this.drawTasks();
// 启用交互操作
this.enableInteractivity();
};
```
最后,我们可以在HTML页面中创建一个具有固定大小的Canvas元素,并使用JavaScript代码创建一个新的GanttChart对象,将任务数据和Canvas元素ID作为参数传递进去:
```html
<!DOCTYPE html>
<html>
<head>
<title>Gantt Chart</title>
<style>
canvas {
border: 1px solid #000000;
}
</style>
</head>
<body>
<canvas id="chart" width="800" height="600"></canvas>
<script>
var tasks = [
{
name: "Task 1",
start: new Date(2021, 8, 1),
end: new Date(2021, 8, 5)
},
{
name: "Task 2",
start: new Date(2021, 8, 3),
end: new Date(2021, 8, 7)
},
{
name: "Task 3",
start: new Date(2021, 8, 6),
end: new Date(2021, 8, 10)
}
];
var chart = new GanttChart("chart", tasks);
</script>
</body>
</html>
```
这样,我们就可以创建一个可伸缩的甘特图组件,支持缩放和拖动操作,以适应不同的屏幕大小和任务数量。