react 甘特图之旅

react-gantt

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

GitHub 仓库: https://github.com/MaTeMaTuK/gantt-task-react
easy-gant-beta

GitHub 仓库: https://github.com/web-widgets/react-gantt-demos

上面的版本不兼容

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/

安装

javascript 复制代码

 npm install @bryntum/gantt-trial

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

javascript 复制代码

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

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

javascript 复制代码

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

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

javascript 复制代码

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