[![NPM Version][npm-image]][npm-url]
![License ISC][license-image]
[![Gitter][gitter-image]][gitter-url]
![Nodejs][node-image]
React Gantt
A simple gantt chart for react :)
[npm-image]: https://img.shields.io/badge/npm-%40j.k.bi%2Freact--gantt-yellow
[npm-url]: http://npmjs.org/package/@j.k.bi/react-gantt
[license-image]: https://img.shields.io/badge/License-ISC-blue
[gitter-image]: https://badges.gitter.im/j-k-bi-react-gantt/community.svg
[gitter-url]: https://gitter.im/j-k-bi-react-gantt/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
[node-image]: https://img.shields.io/badge/node.js-v14.16.0-green
## Table of Contents
1. [Install](#install)
2. [Usage](#usage)
2. [Api](#api)
2. [Browser Support](#browser-support)
## Install
```bash
npm i @j.k.bi/react-gantt
```
[](https://npmjs.com/package/@j.k.bi/react-gantt)
## Usage
[View the demo »](https://codesandbox.io/s/gantt-react-demo-d0j02)
```js
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: []
},
]
}
...