버전 5.0부터 Gantt는 컴포넌트의 요소들을 레이아웃 내의 내부 뷰로 배치할 수 있는 커스터마이즈 가능한 레이아웃을 정의하는 기능을 지원합니다. 이 기능을 통해 추가 타임라인 및 그리드를 삽입하여, 다양한 방식으로 간트 차트의 구조를 유연하게 구성할 수 있습니다.
예를 들어, 타임라인의 오른쪽에 추가 그리드를 넣을 수 있습니다.
Related sample: Grid columns rightside of gantt
또는, 기본 그리드와 타임라인 아래에 다른 그리드와 타임라인을 추가할 수도 있습니다.
Related sample: Gantt chart with resource panel
레이아웃은 gantt.config.layout 설정을 통해 제어됩니다. 아래는 기본 레이아웃 구성 예시입니다:
gantt.config.layout = {
css: "gantt_container",
rows:[
{
cols: [
{
// 기본 그리드 뷰
view: "grid",
scrollX:"scrollHor",
scrollY:"scrollVer"
},
{ resizer: true, width: 1 },
{
// 기본 타임라인 뷰
view: "timeline",
scrollX:"scrollHor",
scrollY:"scrollVer"
},
{
view: "scrollbar",
id:"scrollVer"
}
]},
{
view: "scrollbar",
id:"scrollHor"
}
]
}
간트 레이아웃은 뷰로 채워진 셀들로 구성됩니다. 이 뷰들은 다음과 같은 주요 및 보조 Gantt 요소를 나타냅니다:
각 뷰는 관련 속성을 가진 객체로 구성됩니다. grid와 timeline 뷰에 대해 설정을 커스터마이즈할 수 있습니다. 기본적으로 옵션은 전역 gantt.config 객체에서 가져옵니다.
레이아웃 구성은 Gantt를 초기화하기 전에 설정해야 합니다. 이후에 레이아웃을 변경했다면, resetLayout를 사용하여 새로고침해야 합니다.
레이아웃 내의 스크롤바는 "scrollbar" 뷰로 정의됩니다. 수평 및 수직 스크롤바 모두 사용할 수 있습니다.
스크롤바를 추가하려면, 해당 뷰에 scrollX 또는 scrollY 속성에 스크롤바의 id를 지정하여 연결합니다.
여러 뷰가 동일한 스크롤바를 공유할 수 있습니다. 뷰를 스크롤바에 연결하려면:
cols
배열 내부에 스크롤바를 배치하면 수직 스크롤바가 생성되고, rows
배열에 배치하면 수평 스크롤바가 생성됩니다. 또는 scroll 속성을 사용해 스크롤 방향을 명시적으로 지정할 수 있습니다:
{ view: "scrollbar", id:"scroller", scroll: "x" } // 수평
또는:
{ view: "scrollbar", id:"scroller", scroll: "y" } // 수직
아래는 커스텀 그리드와 타임라인 뷰를 수직 스크롤바에 연결하는 예시입니다:
gantt.config.layout = {
css: "gantt_container",
rows:[
{
cols: [
{
view: "grid",
scrollY:"scrollVer"
},
{ resizer: true, width: 1 },
{
view: "timeline",
scrollY:"scrollVer"
},
{
view: "scrollbar",
id:"scrollVer"
}
]}
]
}
수직 스크롤바를 스크롤하면 그리드와 타임라인이 함께 이동합니다. 기본 레이아웃에서는 그리드와 타임라인 뷰가 수평 및 수직 스크롤바 모두와 연결되어 있습니다.
Grid 뷰 전용의 별도 수평 스크롤바도 지정할 수 있습니다. 관련 내용은 여기에서 확인하세요.
이전에 단순한 레이아웃 구성으로 뷰에 단일 스크롤바를 추가하는 방법을 살펴보았습니다:
{cols: [ {rows: [{}, {}]}, {rows: [{}, {}]}]}
또는
{rows: [ {cols: [{}, {}]}, {cols: [{}, {}]}]}
만약 뷰를 수직 및 수평 스크롤바 모두에 연결하려면, cols
와 rows
배열을 여러 번 중첩하는 더 복잡한 레이아웃이 필요합니다. 예를 들어:
{cols: [
{
rows: [
{
cols: [{}, {}]
},
{
cols: [{}, {}]
}
]
},
{
rows: [
{
cols: [{}, {}]
},
{
cols: [
{
rows: [{}, {}]
},
{
rows: [{}, {}]
}
]
}
]
}
]}
아래 예시도 참고하세요:
기본 레이아웃을 수정하여, Gantt 차트에 추가 뷰를 넣는 방식으로 원하는 레이아웃을 구성할 수 있습니다.
예를 들어, 메인 간트 차트 아래에 리소스 패널을 추가하고, 그리드와 타임라인 뷰를 추가하려면 다음과 같이 하면 됩니다:
구성 예시는 다음과 같습니다:
gantt.config.layout = {
css: "gantt_container",
rows:[
{
// 기본 레이아웃
cols: [
{view: "grid",
config: mainGridConfig, scrollY:"scrollVer"},
{resizer: true, width: 1},
{view: "timeline",
scrollX:"scrollHor", scrollY:"scrollVer"},
{view: "scrollbar", id:"scrollVer"}
]
},
{resizer: true, width: 1},
{
// 커스텀 레이아웃
cols: [
{view: "grid", id: "resourceGrid", bind:"resource",
config:resourceGridConfig, scrollY:"resourceVScroll"},
{resizer: true, width: 1},
{view:"timeline", id:"resourceTimeline", scrollX:"scrollHor",
bind:"resource", bindLinks: null, layers: resourceLayers,
scrollY:"resourceVScroll"},
{view: "scrollbar", id:"resourceVScroll"}
]
},
{view: "scrollbar", id:"scrollHor"}
]
};
이 예시에서 추가된 그리드 뷰는 리소스 및 작업량을 표시하고, 추가된 타임라인은 한 달 동안의 근무 시간 분포를 보여주며, 표준 및 초과 근무 시간을 강조합니다.
커스텀 그리드와 타임라인 뷰에는 몇 가지 추가 속성이 있습니다:
커스텀 뷰에 적합한 데이터를 채우기 위해서는 별도의 데이터스토어를 추가해야 합니다. 새로운 데이터스토어를 생성하려면
createDatastore 메서드를 사용하며, 이때 데이터스토어의 설정을 지정합니다:
var resourcesStore = gantt.createDatastore({
name:"resource",
initItem: function(item){
item.id = item.key || gantt.uid();
return item;
}
});
이 예제에서는 "resource"라는 이름의 데이터스토어가 생성됩니다.
커스텀 뷰에 데이터스토어에서 데이터를 로드하려면 parse 메서드를 사용합니다:
resourcesStore.parse([// resources
{key:'0', label: "N/A"},
{key:'1', label: "John"},
{key:'2', label: "Mike"},
{key:'3', label: "Anna"}
]);
특정 데이터스토어의 설정 객체를 얻으려면 getDatastore 메서드를 사용하세요:
var tasksStore = gantt.getDatastore("task");
이 메서드는 데이터스토어의 이름을 파라미터로 받습니다.
내장된 리소스 뷰를 사용할 때는 gantt가 데이터스토어를 자동으로 생성할 수 있습니다. 자세한 내용은 여기를 참고하세요.
때때로 gantt 셀 사이의 리사이저를 동적으로 비활성화해야 할 필요가 있습니다. 가장 쉬운 방법은 CSS로 리사이저를 숨기는 것입니다.
다음과 같은 CSS 규칙을 사용할 수 있습니다:
.no_resizers .gantt_resizer{
display:none;
}
이후, gantt 컨테이너에 클래스를 추가하여 리사이저를 숨깁니다:
gantt.$container.classList.add("no_resizers");
리사이저를 다시 표시하려면 클래스를 제거하면 됩니다:
gantt.$container.classList.remove("no_resizers");
커스텀 HTML도 Gantt 레이아웃 내에서 inner view로 사용할 수 있습니다. 다음은 예시입니다:
gantt.config.layout = {
css: "gantt_container",
rows: [
{
cols: [
{view: "grid",scrollX: "scrollHor", scrollY: "scrollVer"},
{ html:"<div class='custom-content'>custom content</div>",
css:"custom-content", width:50},
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{ html:"<div class='custom-content'>custom content</div>",
css:"custom-content", width:50},
{view: "scrollbar", id: "scrollVer"}
]
},
{view: "scrollbar", scroll: "x", id: "scrollHor"}
]
}
gantt 객체의 public API에는 getTaskPosition, getTaskNode, getScrollState 등 특정 레이아웃 뷰와 연결된 메서드가 포함되어 있습니다.
이 메서드들이 제대로 동작하려면, 레이아웃에 기본 grid, timeline, 스크롤바가 포함되어 있어야 하며 gantt가 이들을 찾을 수 있어야 합니다. 이를 위해 기본 뷰에 특정 id를 할당합니다:
gantt.config.layout = {
css: "gantt_container",
rows: [
{
cols: [
{view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "scrollbar", id: "scrollVer"}
]
},
{view: "scrollbar", id: "scrollHor"}
]
};
필수 뷰와 그 id는 다음과 같습니다:
id를 설정하지 않으면, gantt는 기본적으로 뷰 이름을 id로 사용하거나 자동으로 고유 id를 생성합니다. 따라서 기본 grid와 timeline의 경우 "id" 파라미터를 생략할 수 있습니다:
gantt.config.layout = {
css: "gantt_container",
rows: [
{
cols: [
{view: "grid", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "scrollbar", id: "scrollVer"}
]
},
{view: "scrollbar", id: "scrollHor"}
]
};
레이아웃에 원하는 만큼 추가 뷰를 넣을 수 있습니다.
Grid와 Timeline 뷰는 전역 gantt.config/gantt.templates에서 템플릿 및 설정을 사용합니다. 하지만, 레이아웃 레벨에서 특정 뷰에 대해 이를 오버라이드할 수 있습니다.
예시:
var secondGridColumns = {
columns: [
{
name: "status", label: "Status", width: 60, align: "center",
template: function (task) {
var progress = task.progress || 0;
return Math.floor(progress * 100) + "";
}
},
{
name: "impact", width: 80, label: "Impact", template: function (task) {
return (task.duration * 1000).toLocaleString("en-US", {
style: 'currency', currency: 'USD'
});
}
}
]
};
gantt.config.layout = {
css: "gantt_container",
rows: [
{
cols: [
{view: "grid", id: "grid", width: 320, scrollY: "scrollVer"},
{resizer: true, width: 1},
{view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{resizer: true, width: 1},
{view: "grid", width: 120, bind:"task",
scrollY:"scrollVer", config:secondGridColumns}, {view: "scrollbar", scroll: "y", id: "scrollVer"}
]
},
{view: "scrollbar", id: "scrollHor", height: 20}
]
};
뷰는 부모 레이아웃의 설정과 템플릿을 상속받을 수도 있습니다:
var resourceConfig = { scale_height: 30 };
gantt.config.layout = {
css: "gantt_container",
rows: [
{
cols: [
{view: "grid", group:"grids", scrollY: "scrollVer"},
{resizer: true, width: 1},
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "scrollbar", id: "scrollVer", group:"vertical"}
],
gravity:2
},
{resizer: true, width: 1},
{
config: resourceConfig, cols: [
{view: "resourceGrid", group:"grids", width: 435, scrollY: "resourceVScroll" },
{resizer: true, width: 1},
{view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
{view: "scrollbar", id: "resourceVScroll", group:"vertical"}
],
gravity:1
},
{view: "scrollbar", id: "scrollHor"}
]
};
자세한 내용은 Resource Management 문서를 참고하세요.
특정 레이아웃 요소들의 표시 상태를 동기화해야 할 때가 있습니다. 예를 들어, 인접한 셀에 수평 스크롤바가 있다면, 두 스크롤바가 함께 표시되거나 숨겨지길 원할 수 있습니다.
Related sample: Horizontal scroll inside Grid
또 다른 예는, 서로 다른 타임라인 행에 여러 grid가 있고, 이 grid들이 같은 너비를 공유해야 하는 경우입니다. 한 grid의 크기가 조정되면 다른 grid도 함께 조정됩니다.
Related sample: Resource load diagram
이러한 시나리오는 뷰의 group 속성을 통해 해결할 수 있습니다. 이 속성은 임의의 문자열을 받을 수 있으며, 동일한 group 값을 가진 뷰들은 동기화됩니다.
스크롤바 표시 동기화 예시:
gantt.config.layout = {
css: "gantt_container",
cols: [
{
width:400,
minWidth: 200,
maxWidth: 600,
rows:[
{view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
{view: "scrollbar", id: "gridScroll", group:"horizontal"} ]
},
{resizer: true, width: 1},
{
rows:[
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "scrollbar", id: "scrollHor", group:"horizontal"} ]
},
{view: "scrollbar", id: "scrollVer"}
]
};
grid 너비 동기화 예시:
gantt.config.layout = {
css: "gantt_container",
rows: [
{
cols: [
{view: "grid", group:"grids", scrollY: "scrollVer"},
{resizer: true, width: 1},
{view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
{view: "scrollbar", id: "scrollVer", group:"vertical"} ],
gravity:2
},
{resizer: true, width: 1},
{
config: resourceConfig,
cols: [
{view: "resourceGrid", group:"grids", width: 435, scrollY: "resourceVScroll" },
{resizer: true, width: 1},
{view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
{view: "scrollbar", id: "resourceVScroll", group:"vertical"} ],
gravity:1
},
{view: "scrollbar", id: "scrollHor"}
]
};
Gantt 레이아웃 셀의 상대적인 크기는 각 셀 설정의 gravity 속성으로 제어할 수 있습니다. 이 값은 셀 간 크기 비율을 지정합니다.
gantt.config.layout = {
css: "gantt_container",
rows: [
{
cols: [
// columns config
],
gravity:2 },
{ resizer: true, width: 1 },
{
config: resourceConfig,
cols: [
// columns config
],
gravity:1 },
{view: "scrollbar", id: "scrollHor"}
]
};
이 예시에서는 Gantt 차트와 리소스 차트가 2:1 비율로 공간을 나눕니다. 즉, Gantt 차트가 약 66%, 리소스 차트가 약 33%를 차지합니다. 1:1 비율을 사용하면 공간이 동일하게 분배됩니다.
리사이즈 시 레이아웃 파트의 크기를 제한하려면 cols 배열 내 셀에 minWidth/maxWidth 속성을 사용하세요. 마찬가지로 rows 배열의 셀에는 minHeight/maxHeight를 설정해 높이 제한이 가능합니다.
다음은 column 설정에서 minWidth/maxWidth를 사용하는 예시입니다:
gantt.config.grid_elastic_columns = true;
gantt.config.layout = {
css: "gantt_container",
cols: [
{
width: 400,
minWidth: 200, maxWidth: 600, rows: [
{
view: "grid", scrollable: true, scrollX: "scrollHor1", scrollY: "scrollVer"
},
{
view: "scrollbar", id: "scrollHor1", scroll: 'x', group: 'hor'
},
]
},
{ resizer: true, width: 1 },
{
rows: [
{
view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"
},
{
view: "scrollbar", id: "scrollHor", scroll: 'x', group: 'hor'
},
]
},
{
view: "scrollbar", id: "scrollVer"
}
]
}
레이아웃 뷰의 모든 자식 뷰가 보이지 않을 때, 해당 레이아웃 셀의 설정에 hide_empty:true를 지정하면 부모 뷰를 숨길 수 있습니다:
gantt.config.layout = {
css: "gantt_container",
cols: [
{
hide_empty: true, rows:[
{view: "grid"}
]
},
{resizer: true},
{
hide_empty: true, rows:[
{view: "timeline"}
]
}
]
};
Related sample: Hiding grid/timeline views
서로 다른 레이아웃 뷰를 전환하려면 How to toggle grid/chart 및 How to toggle the resource view 섹션을 참고하세요.
Gantt 차트를 하나 이상의 고정 컬럼과 함께 초기화할 수 있습니다. 방법은 How to freeze/fix columns in the grid 섹션에서 확인하세요.
Back to top