react实现甘特图

使用 react-gantt-timeline 库

安装依赖库：

npm install react-gantt-timeline

基础实现代码：

import React from 'react';
import { Gantt } from 'react-gantt-timeline';

const tasks = [
  {
    id: 1,
    name: '任务1',
    start: new Date(2023, 0, 1),
    end: new Date(2023, 0, 5)
  },
  {
    id: 2,
    name: '任务2',
    start: new Date(2023, 0, 6),
    end: new Date(2023, 0, 10)
  }
];

function App() {
  return <Gantt tasks={tasks} />;
}

export default App;

使用 react-gantt 库

安装依赖：

npm install react-gantt

基础示例：

import React from 'react';
import Gantt from 'react-gantt';

const tasks = [
  { 
    id: 'Task 1',
    name: '开发',
    start: '2023-01-01',
    end: '2023-01-05'
  }
];

function App() {
  return (
    <Gantt
      tasks={tasks}
      viewMode={'week'}
      onTaskChange={task => console.log(task)}
    />
  );
}

自定义实现方案

使用HTML5 Canvas绘制：

import React, { useRef, useEffect } from 'react';

const GanttChart = ({ tasks }) => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 绘制逻辑
    tasks.forEach((task, index) => {
      const y = index * 30 + 20;
      const width = (task.end - task.start) / (1000 * 60 * 60 * 24) * 10;

      ctx.fillStyle = '#4CAF50';
      ctx.fillRect(task.start, y, width, 20);
      ctx.fillStyle = '#000';
      ctx.fillText(task.name, task.start, y - 5);
    });
  }, [tasks]);

  return <canvas ref={canvasRef} width={800} height={400} />;
};

使用 D3.js 集成方案

安装D3依赖：

npm install d3

React组件实现：

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const D3Gantt = ({ data }) => {
  const ref = useRef();

  useEffect(() => {
    const svg = d3.select(ref.current);
    // D3绘制甘特图逻辑
    svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', d => xScale(d.start))
      .attr('y', (d,i) => i * 30)
      .attr('width', d => xScale(d.end) - xScale(d.start))
      .attr('height', 20);
  }, [data]);

  return <svg ref={ref} width={800} height={500} />;
};

关键功能实现要点

时间轴处理：

const xScale = d3.scaleTime()
  .domain([new Date(2023, 0, 1), new Date(2023, 1, 1)])
  .range([0, 800]);

任务依赖关系：

const tasks = [
  {
    id: 1,
    dependencies: [2] // 依赖任务ID
  }
];

交互功能实现：

const handleTaskClick = (task) => {
  console.log('Selected task:', task);
};

<GanttComponent 
  tasks={tasks}
  onTaskClick={handleTaskClick}
/>