Skip to content

jkiss/React-Gantt-Lib

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation





NPM Version License ISC Gitter Nodejs

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

NPM

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

IE Chrome Firefox Opera Safari
Edge 12+ ✔ Chrome 31.0+ ✔ Firefox 31.0+ ✔ Opera 30.0+ ✔ Safari 7.0+ ✔

License

React Gantt is licensed under a ISC License.