js如何实现甘特图
实现甘特图的 JavaScript 方法
使用现成库（推荐）
1. 使用 dhtmlxGantt
安装库：
npm install dhtmlx-gantt基础实现代码：
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
gantt.init(document.getElementById("gantt_container"));
gantt.parse({
data: [
{ id: 1, text: "Task 1", start_date: "2023-10-01", duration: 5 },
{ id: 2, text: "Task 2", start_date: "2023-10-06", duration: 3 }
]
});2. 使用 Chart.js 插件
通过 chartjs-plugin-gantt 扩展：
import { Chart } from "chart.js";
import Gantt from "chartjs-plugin-gantt";
Chart.register(Gantt);
const ctx = document.getElementById("ganttChart").getContext("2d");
new Chart(ctx, {
type: "gantt",
data: {
datasets: [{
label: "Project Plan",
data: [
{ x: "Phase 1", y: [new Date("2023-10-01"), new Date("2023-10-05")] }
]
}]
}
});原生 Canvas 绘制
通过 Canvas API 手动实现基础甘特图：
const canvas = document.getElementById("ganttCanvas");
const ctx = canvas.getContext("2d");
function drawGantt(tasks) {
tasks.forEach((task, i) => {
const y = i * 30 + 20;
ctx.fillStyle = "#4CAF50";
ctx.fillRect(50, y, task.duration * 10, 20);
ctx.fillText(task.name, 10, y + 15);
});
}
drawGantt([
{ name: "Task A", duration: 5 },
{ name: "Task B", duration: 3 }
]);SVG 动态生成
利用 SVG 实现可交互甘特图：
const svg = document.getElementById("ganttSvg");
function createBar(task) {
const bar = document.createElementNS("http://www.w3.org/2000/svg", "rect");
bar.setAttribute("x", task.startDay * 10);
bar.setAttribute("y", task.id * 30);
bar.setAttribute("width", task.duration * 10);
bar.setAttribute("height", 20);
bar.setAttribute("fill", "#2196F3");
svg.appendChild(bar);
}
createBar({ id: 1, startDay: 2, duration: 4 });关键注意事项
- 时间轴处理：日期需转换为数值或时间戳便于计算坐标。
- 响应式设计：监听窗口变化并调用
gantt.resize()或重绘 Canvas。 - 数据格式：标准结构需包含
id/text/start_date/duration/progress等字段。
扩展功能
- 依赖关系：通过
gantt.addLink()添加任务连线。 - 动态加载：结合 Ajax 从后端获取任务数据。
- 自定义样式：修改 CSS 或覆盖库的默认样式类。
以上方法可根据项目复杂度选择，库方案适合快速开发，原生方案适合高度定制需求。
