Gantt-elastic - Javascript Gantt Chart (editable, responsive)

Javascript Gantt Chart for vue, jquery, vanilla js and other frameworks

Keywords: [ gantt, javascript gantt, gantt chart,js gantt,vue gantt,project manager,gantt project manager,responsive gantt ]

Gantt-elastic demo here

!preview gif
!preview gif
!preview gif

Gantt-Group

本组件基于gantt-elastic进行二次封装，甘特图一行可以显示多个任务
Gantt-Group is a vue component but it could be used in other frameworks or even with jQuery (vue is kind of elastic and lightweight framework).

$3

$3

For now you can look at WIKI
There is also full example vue project at https://github.com/neuronetio/vue-gantt-elastic

$3

npm install --save gantt-group

$3

``javascript

//原有gantt-elastic属性不变，新增一个type属性：group
//The gantt-elastic attribute will remain unchanged. Add a new type attribute: group
//sample task code,使用dayjs处理时间
tasks: [
{
id: 5,
label: '202204',
start: dayjs('2022-05-08').valueOf(),
end:dayjs('2022-9-10').valueOf(),
percent: 25,
type: 'group',
tasks: [
{
id: 6,
label: 'V0',
start: dayjs('2022-06-16').valueOf(),
end:dayjs('2022-06-24').valueOf(),
percent: 50,
type: 'task',
style: {
base: {
fill: '#C0E2D9',
stroke: '#C0E2D9',
},
},
},
{
id: 7,
label: 'V1',
start: dayjs('2022-07-01').valueOf(),
end:dayjs('2022-07-16').valueOf(),
percent: 50,
type: 'task',
style: {
base: {
fill: '#FEE4D5',
stroke: '#FEE4D5',
},
},
},
{
id: 8,
label: 'V2',
start: dayjs('2022-08-02').valueOf(),
end:dayjs('2022-08-16').valueOf(),
percent: 50,
type: 'task',
style: {
base: {
fill: '#C6EBFE',
stroke: '#C6EBFE',
},
},
},
{
id: 9,
label: 'V3',
start: dayjs('2022-08-24').valueOf(),
end:dayjs('2022-09-16').valueOf(),
percent: 50,
type: 'task',
style: {
base: {
fill: '#E7E7E7',
stroke: '#E7E7E7',
},
},
},
],
},
{
id: 6,
label: '202205',
start: dayjs('2022-04-08').valueOf(),
end:dayjs('2022-9-30').valueOf(),
percent: 25,
type: 'group',
tasks: [
{
id: 7,
label: 'V0',
start: dayjs('2022-06-01').valueOf(),
end:dayjs('2022-06-16').valueOf(),
percent: 50,
type: 'task',
style: {
base: {
fill: '#C0E2D9',
stroke: '#C0E2D9',
},
},
},
{
id: 8,
label: 'V1',
start: dayjs('2022-06-18').valueOf(),
end:dayjs('2022-07-28').valueOf(),
percent: 50,
type: 'task',
style: {
base: {
fill: '#FEE4D5',
stroke: '#FEE4D5',
},
},
},
{
id: 9,
label: 'V2',
start: dayjs('2022-08-01').valueOf(),
end:dayjs('2022-08-10').valueOf(),
percent: 50,
type: 'task',
style: {
base: {
fill: '#C6EBFE',
stroke: '#C6EBFE',
},
},
},
{
id: 10,
label: 'V3',
start: dayjs('2022-08-21').valueOf(),
end:dayjs('2022-09-06').valueOf(),
percent: 50,
type: 'task',
style: {
base: {
fill: '#E7E7E7',
stroke: '#E7E7E7',
},
},
},
],
},
],
`

$3

`html












`

$3

Take a look at the vue.html inside examples folder file to see how you could add gantt-elastic inside