Table of Contents

1. Install
2. Usage
3. Api
4. Browser Support

Install

npm i @j.k.bi/react-gantt

Usage

View the demo »

import GanttReact from '@j.k.bi/react-gantt'

const config = {
    title: "业务甘特图",
    width: 800,
    height: 600,
    showPercent: 0.2, // 显示百分比
    showStartPercent: 0.0, // 起始位置百分比
    startDate: '2021-03-31 22:15', // 图表起始日期
    endDate: '2021-04-02 23:45', // 图表终点日期
    nodes: [
        {
            id: '1',
            name: '小鹿1', // 任务所属人姓名
            yAxis: '任务1', // 任务名
            value: {
                startTime: '2021-03-31 23:00',
                endTime: '2021-04-01 02:25',
            },
            // averageTime: 3600000,  // 任务完成平均时间 - 毫秒
            // highlightPoints: [{ // 错误点
            //     time: '2021-04-01 02:10',
            // }]
        }, {
            id: '2',
            name: '小李', // 任务所属人姓名
            yAxis: '任务2', // 任务名
            value: {
                startTime: '2021-04-01 10:25',
                endTime: '2021-04-01 22:25',
            },
            averageTime: 3600000,  // 任务完成平均时间 - 毫秒
            highlightPoints: []
        }, {
            id: '3',
            name: '看电影', // 任务所属人姓名
            yAxis: '任务3', // 任务名
            value: {
                startTime: '2021-04-01 22:25',
                endTime: '2021-04-02 22:25',
            },
            averageTime: 3600000,  // 任务完成平均时间 - 毫秒
            highlightPoints: []
        },
    ]
}
...
<GanttReact config={config} />

API

| props | type | default | description | |------------|----------------|---------|----------------| | title | String | "" | title for this chart | | width | Number | 800 | chart width | | height | Number | 600 | chart height | | showPercent | Number | 0.2 | the percent to show this chart, 0.2 mean zoom in 5x and slider width is 1/5 of total | | showStartPercent | Number | 0 | the slider start position | | startDate | String | Date string | e.g. '2021-03-31 22:15', chart start date | | endDate | String | Date string | e.g. '2021-03-31 22:15', chart end date | | nodes | Array.<{}> | [] | list of task object |

Dependencies

| Name | Bundle size | Bundle size (gzip) | Dependencies | | ------------------ | --------------------- | ------------------------------- | ------------------ | | classnames | | | | | dayjs | | | | | react-calendar | | | |

Browser Support

| | | | | | | --- | --- | --- | --- | --- | | Edge 12+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |

License

React Gantt is licensed under a ISC License.