js如何实现甘特图

使用原生JavaScript实现甘特图

通过Canvas或SVG绘制基础甘特图结构，动态生成任务条和时间轴。需手动计算坐标和交互逻辑，适合轻量级需求。

const canvas = document.getElementById('ganttCanvas');
const ctx = canvas.getContext('2d');

function drawGantt(tasks) {
  // 绘制时间轴
  ctx.fillStyle = '#333';
  ctx.fillRect(0, 30, canvas.width, 2);

  tasks.forEach((task, i) => {
    // 计算任务条位置
    const x = task.start * 10;
    const width = (task.end - task.start) * 10;

    // 绘制任务条
    ctx.fillStyle = '#4285F4';
    ctx.fillRect(x, 50 + i * 30, width, 20);

    // 添加任务标签
    ctx.fillStyle = '#000';
    ctx.fillText(task.name, x + 5, 65 + i * 30);
  });
}

使用Chart.js库实现

Chart.js通过扩展图表类型支持甘特图，需配置时间轴和水平条形图。

import { Chart } from 'chart.js';

new Chart(ctx, {
  type: 'horizontalBar',
  data: {
    labels: ['Task A', 'Task B'],
    datasets: [{
      data: [
        { x: new Date('2023-01-01'), y: 0, x2: new Date('2023-01-05') },
        { x: new Date('2023-01-03'), y: 1, x2: new Date('2023-01-08') }
      ],
      backgroundColor: ['#FF6384', '#36A2EB']
    }]
  },
  options: {
    scales: {
      xAxes: [{
        type: 'time',
        position: 'bottom'
      }]
    }
  }
});

使用专业甘特图库

Frappe Gantt等专业库提供完整功能：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/frappe-gantt@0.6.1/dist/frappe-gantt.min.css">
<script src="https://cdn.jsdelivr.net/npm/frappe-gantt@0.6.1/dist/frappe-gantt.min.js"></script>

<div id="gantt-container"></div>
<script>
  const tasks = [
    { id: 'Task1', name: 'Design', start: '2023-01-01', end: '2023-01-05' },
    { id: 'Task2', name: 'Development', start: '2023-01-03', end: '2023-01-10' }
  ];
  new Gantt("#gantt-container", tasks);
</script>

关键实现要素

时间轴处理需使用Date对象或时间戳，建议使用moment.js或date-fns进行日期计算。

任务依赖关系可通过连线或箭头表示，需计算任务间的逻辑关系坐标。

交互功能包括拖拽调整任务时间、点击查看详情等，需监听鼠标事件并更新DOM。

数据格式建议

标准化任务数据结构便于渲染：

{
  id: 'unique_id',
  name: 'Task Name',
  start: 'YYYY-MM-DD',
  end: 'YYYY-MM-DD',
  progress: 50,  // 可选
  dependencies: ['task_id']  // 可选
}

样式定制技巧

使用CSS变量实现主题切换：

.gantt-task {
  --task-color: #4e73df;
  background: var(--task-color);
  border-radius: 3px;
}

响应式布局需监听resize事件并重新计算画布尺寸：

window.addEventListener('resize', debounce(resizeGantt, 200));