js实现甘特图
使用开源库实现甘特图
推荐使用 dhtmlxGantt 或 frappe-gantt 这两个成熟的 JavaScript 库来实现甘特图功能。dhtmlxGantt 功能全面但需要商业授权，frappe-gantt 是 MIT 开源项目适合基础需求。
安装 frappe-gantt：
npm install frappe-gantt基础实现代码：
import Gantt from 'frappe-gantt';
const tasks = [
{
id: 'Task 1',
name: '需求分析',
start: '2023-01-01',
end: '2023-01-05',
progress: 50
},
{
id: 'Task 2',
name: 'UI设计',
start: '2023-01-06',
end: '2023-01-15',
progress: 20,
dependencies: 'Task 1'
}
];
const gantt = new Gantt('#gantt-container', tasks, {
view_mode: 'Week',
date_format: 'YYYY-MM-DD'
});自定义 SVG 甘特图
通过原生 SVG 和 JavaScript 手动构建甘特图：
function createGantt(containerId, tasks) {
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute('width', '100%');
svg.setAttribute('height', tasks.length * 50 + 50);
// 时间轴绘制逻辑
// 任务条绘制逻辑
tasks.forEach((task, i) => {
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('x', calculateXPosition(task.start));
rect.setAttribute('y', i * 50 + 30);
rect.setAttribute('width', calculateWidth(task.start, task.end));
rect.setAttribute('height', '30');
svg.appendChild(rect);
});
document.getElementById(containerId).appendChild(svg);
}使用 Canvas 绘制
通过 Canvas API 实现高性能甘特图渲染：
class GanttChart {
constructor(canvasId, tasks) {
this.canvas = document.getElementById(canvasId);
this.ctx = this.canvas.getContext('2d');
this.tasks = tasks;
this.render();
}
render() {
this.clearCanvas();
this.drawTimeScale();
this.drawTasks();
}
drawTasks() {
this.tasks.forEach((task, i) => {
const x = this.timeToPixel(task.start);
const width = this.timeToPixel(task.end) - x;
this.ctx.fillStyle = '#4CAF50';
this.ctx.fillRect(x, i * 40 + 30, width, 30);
});
}
}关键功能实现
时间计算处理
function parseDate(dateStr) {
return new Date(dateStr + 'T00:00:00');
}
function dayDiff(start, end) {
return (parseDate(end) - parseDate(start)) / (1000 * 60 * 60 * 24);
}依赖关系连线
function drawDependencies() {
tasks.forEach(task => {
if(task.dependencies) {
const fromTask = tasks.find(t => t.id === task.dependencies);
// 绘制连接线逻辑
}
});
}交互功能增强
添加事件监听实现交互：
ganttChart.canvas.addEventListener('click', (e) => {
const rect = ganttChart.canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// 检测点击的任务项
ganttChart.tasks.forEach(task => {
if(isInTaskArea(x, y, task)) {
showTaskDetails(task);
}
});
});响应式设计
添加窗口大小监听：
window.addEventListener('resize', () => {
ganttChart.adjustSize();
ganttChart.render();
});以上方案可根据项目需求选择，开源库方案适合快速实现，自定义方案适合需要深度定制的场景。实际开发中建议优先考虑成熟库方案，可节省约70%的开发时间。
