怎么建立自己的个人网站_公司网站建设制度_seo线下培训班_无锡网络优化推广公司

1. react-gantt
   GitHub 仓库: https://github.com/clayrisser/react-gantt

2. react-gantt-chart
   GitHub 仓库: https://github.com/MaTeMaTuK/gantt-task-react
   

3. easy-gant-beta
   GitHub 仓库: https://github.com/web-widgets/react-gantt-demos

上面的版本不兼容

4. dhtmlx-gantt
   官方网站: https://docs.dhtmlx.com/gantt/
   GitHub 仓库: https://github.com/dhtmlx/dhtmlx-gantt

试用版
npm install @dhx/trial-gantt 安装不了

npm install dhtmlx-gantt 标准版(免费)
可以参考：https://dhtmlx.com/blog/create-react-gantt-chart-component-dhtmlxgantt/
安装

 npm install @bryntum/gantt-trial    

5、 syncfusion/ej2-react-gantt 收费， 30天免费试用
syncfusion/ej2-react-gantt

npm install @syncfusion/ej2-react-gantt
npm list @syncfusion/ej2-buttons @syncfusion/ej2-base

6、kendo-react-ui 收费
kendo-react-ui

npm install @progress/kendo-react-gantt npm install @progress/kendo-react-common
npm install @progress/kendo-react-grid 

综上，我推荐dhtmlx-gantt 免费版，

import React, { useEffect, useRef } from 'react';
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';const Dhtmlx = () => {const container = useRef<HTMLDivElement>(null);const data = {data: [{ id: 1, text: "Project #1", start_date: null, duration: null, parent: 0, progress: 0, open: true },{ id: 2, text: "Task #1", start_date: "2024-08-01 00:00", duration: 1, parent: 1, progress: 1 },{ id: 3, text: "Task #2", start_date: "2024-08-06 00:00", duration: 2, parent: 1, progress: 0.5 },{ id: 4, text: "Task #3", start_date: null, duration: null, parent: 1, progress: 0.8, open: true },{ id: 5, text: "Task #3.1", start_date: "2024-08-09 00:00", duration: 2, parent: 4, progress: 0.2 },{ id: 6, text: "Task #3.2", start_date: "2024-08-11 00:00", duration: 1, parent: 4, progress: 0 }],links: [{ id: 1, source: 2, target: 3, type: "0" },{ id: 2, source: 3, target: 4, type: "0" },{ id: 3, source: 5, target: 6, type: "0" }]};useEffect(() => {if (container.current) {gantt.config.date_format = "%Y-%m-%d %H:%i";gantt.init(container.current);gantt.parse(data);}return () => {gantt.clearAll();};}, []);return (<div><div ref={container} style={{ width: '100%', height: '500px' }}></div></div>)}export default Dhtmlx