React Gantt

A simple gantt chart for react :)

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.