React Gantt 项目教程

最新推荐文章于 2024-09-13 21:59:22 发布

秋或依

最新推荐文章于 2024-09-13 21:59:22 发布

阅读量400

点赞数 4

本文链接：https://blog.csdn.net/gitblog_00035/article/details/141244370

版权

React Gantt 项目教程

react-ganttA gantt chart for react项目地址:https://gitcode.com/gh_mirrors/re/react-gantt

项目介绍

React Gantt 是一个基于 React 的甘特图组件，旨在为 React 应用程序提供一个高性能的甘特图解决方案。该项目由 Clay Risser 开发，是一个开源项目，托管在 GitHub 上。React Gantt 组件支持多种功能，包括任务管理、时间线视图、事件处理等，适用于项目管理和调度应用。

项目快速启动

安装

首先，你需要通过 npm 安装 React Gantt 组件：

npm install react-gantt

基本使用

以下是一个简单的示例，展示如何在 React 项目中使用 React Gantt：

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

const tasks = [
  {
    start: new Date(2023, 1, 1),
    end: new Date(2023, 1, 5),
    name: '任务1',
    id: 'Task 1',
    type: 'task',
    progress: 50,
  },
  {
    start: new Date(2023, 1, 6),
    end: new Date(2023, 1, 10),
    name: '任务2',
    id: 'Task 2',
    type: 'task',
    progress: 20,
  },
];

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

export default App;