Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/xpyjs/gantt
An easy-to-use Gantt component. 持续更新，中文文档
https://github.com/xpyjs/gantt
gantt gantt-chart gantt-diagram ganttchart ganttjs ganttview typescript vue vue-gantt vue3
Last synced: about 2 months ago
JSON representation
An easy-to-use Gantt component. 持续更新，中文文档
- Host: GitHub
- URL: https://github.com/xpyjs/gantt
- Owner: xpyjs
- License: mit
- Created: 2020-09-04T03:37:42.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-12-14T08:29:30.000Z (6 months ago)
- Last Synced: 2024-04-08T22:00:50.291Z (about 2 months ago)
- Topics: gantt, gantt-chart, gantt-diagram, ganttchart, ganttjs, ganttview, typescript, vue, vue-gantt, vue3
- Language: TypeScript
- Homepage: https://docs.xiaopangying.com/gantt/
- Size: 8.17 MB
- Stars: 198
- Watchers: 3
- Forks: 35
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-vue - jz-gantt - A high-performance Vue gantt component, which includes highly customizable table columns, dynamic update data, freely drag the progress bar, switch header, etc. (Components & Libraries / UI Components)
README
# XGantt
[](https://www.oscs1024.com/project/xpyjs/gantt?ref=badge_small)   
   
 
[[English](./README.md)] [[中文](./README_cn.md)]
A high-performance vue gantt component for vue3.
- vue2 version is [HERE](https://github.com/xpyjs/gantt-vue2)
## About Version
`v1` and `v2` are not compatible.
- props not same
- slots not same
- components not same
More details see [document](https://docs.xiaopangying.com/gantt/)
## Important
This repo is pervious `jz-gantt`. Only vue3 version. If you have used `jz-gantt` before, you should read the following section carefully.
**Specification:**
> This version `1.0.1` is correspond to `[email protected]`. And `jz-gantt` is archived.
### How to migrate
1. package name changesd `@xpyjs/gantt` replaced `jz-gantt`.
2. All `j-` or `J` prefixes update to `x-` or `X`.
Beyond that, no other action is required.
## Snipaste
## What is XGantt
- [x] Automatically generate gantt charts based on dates
- [x] Support for multi-layer expanding
- [x] High-performance
- [x] Multi-layer linkage
- [x] Multistage selected
- [x] Custom table column content
- [x] Custom gantt row content
- [x] Custom header content
- [x] Dynamic update data
- [x] Custom any style
- [x] Support dark model
- [x] Multiple date display modes switch
- [ ] More
## Document
For resource code, see [Github](http://github.com/xpyjs/gantt)
For more detailed documentation, see [document web](https://docs.xiaopangying.com/gantt/)
For example, see [Example web](https://docs.xiaopangying.com/gantt-demo/)
If you has any problem, please [issue](https://github.com/xpyjs/gantt/issues).
## How to use
### install
```bash
npm install @xpyjs/gantt --save
// or
yarn add @xpyjs/gantt
```
### use
```js
import XGantt from "@xpyjs/gantt";
import "@xpyjs/gantt/dist/index.css";
createApp(App).use(XGantt).mount('#app')
```
### Basic use
Data should be Array type, `index`, `startDate`, `endDate` and `children` are supposed in data item, they help to display the data correctly. Each field can be customized.
> `children` in V2 is no longer required.
> V2 `index` to `id` default.
```js
const dataList = [
{
index: 1,
startDate: "2020-06-05",
endDate: "2020-08-20",
ttt: {
a: "aaa",
b: "bbb"
},
name: "mydata1",
children: [] // children is required. If no child, empty array is ok.
},
{
index: 2,
startDate: "2020-07-07",
endDate: "2020-09-11",
ttt: {},
name: "mydata2",
children: [
{
index: 3,
startDate: "2020-07-10",
endDate: "2020-08-15",
ttt: {
a: "aaa"
},
name: "child1",
children: [] // children is required. If no child, empty array is ok.
}
]
}
];
```
version 1
```html
```
version 2
```html
```
### Use table column
We provide a slot named `XGanttColumn`. `Label` is required, and it should match data key.
label is required, and it should match data key. label's value should correspond to the name of the field in 'data' (deep query support), which tells the component to render the column.
version 1
```html
```
version 2
```html
```
### Use gantt slider
We provide a slot named `XGanttSlider`.
Only one slider whill be rendered. If you insert more than one slider, only last slider will be display.
version 1
```html
```
version 2
```html
```
## License
[MIT](./LICENSE)