jz-gantt

JzGantt

[English] [中文]

A high-performance vue gantt component, support vue2 & vue3.

• vue2 version

Snipaste

What is JzGantt

• Automatically generate gantt charts based on dates
• Support for multi-layer expanding
• High-performance
• Multi-layer linkage
• Multistage selected
• Custom table column content
• Custom gantt row content
• Custom header content
• Dynamic update data
• Custom any style
• Support dark model
• Multiple date display modes switch
• More

Document

For resource code, see Github

For more detailed documentation, see document web

For example, see Example web

If you has any problem, please issue.

How to use

install

npm install jz-gantt --save
// or
yarn add jz-gantt  // recommend

use

import Gantt from "jz-gantt";
import "jz-gantt/dist/index.css";

createApp(App).use(Gantt).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.

const dataList = [
    {
        index: 1,
        startDate: "2020-06-05",
        endDate: "2020-08-20",
        ttt: {
            a: "aaa",
            b: "bbb"
        },
        name: "mydata1",
        children: []
    },
    {
        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: []
            }
        ]
    }
];

<j-gantt
    data-index="index"
    :data="dataList"
/>

Use table column

We provide a slot named JGanttColumn. Label is required, and it should match data key.

<j-gantt
    data-index="index"
    :data="dataList"
>
    <j-gantt-column label="name" />
</j-gantt>

Use gantt slider

We provide a slot named JGanttSlider.

Only one slider whill be rendered. If you insert more than one slider, only last slider will be display.

<j-gantt
    data-index="index"
    :data="dataList"
>
    <j-gantt-slider />  <!-- no render -->
    <j-gantt-slider />  <!-- will be rendered -->
</j-gantt>

License

MIT