@j.k.bi/react-gantt NPM

npm.io

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