Zoom 확장 기능에 대한 자세한 내용은 줌(Zooming) 문서에서 확인할 수 있습니다. 본 문서는 zoom 객체의 API 레퍼런스에 중점을 두고 있습니다.
Zoom 확장 기능은 여러 배율 설정을 사용하여 손쉽게 배율을 전환할 수 있도록 합니다.
ZoomLevel은 다음과 같은 속성을 가진 배율 설정을 나타내는 객체입니다:
아래는 zoom 확장 기능을 설정하는 두 가지 예시입니다:
var zoomConfig = {
levels: [
{
name:"day",
scale_height: 27,
min_column_width:80,
scales:[
{unit: "day", step: 1, format: "%d %M"}
]
},
{
name:"week",
scale_height: 50,
min_column_width:50,
scales:[
{unit: "week", step: 1, format: function (date) {
var dateToStr = gantt.date.date_to_str("%d %M");
var endDate = gantt.date.add(date, 6, "day");
var weekNum = gantt.date.date_to_str("%W")(date);
return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
}},
{unit: "day", step: 1, format: "%j %D"}
]
},
{
name:"month",
scale_height: 50,
min_column_width:120,
scales:[
{unit: "month", format: "%F, %Y"},
{unit: "week", format: "Week #%W"}
]
},
{
name:"quarter",
height: 50,
min_column_width:90,
scales:[
{unit: "month", step: 1, format: "%M"},
{
unit: "quarter", step: 1, format: function (date) {
var dateToStr = gantt.date.date_to_str("%M");
var endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
}
}
]},
{
name:"year",
scale_height: 50,
min_column_width: 30,
scales:[
{unit: "year", step: 1, format: "%Y"}
]}
]
};
gantt.ext.zoom.init(zoomConfig);
// 또는, levels를 scale 배열로 간단히 정의할 수도 있습니다
var hourToStr = gantt.date.date_to_str("%H:%i");
var hourRangeFormat = function(step){
return function(date){
var intervalEnd = new Date(gantt.date.add(date, step, "hour") - 1)
return hourToStr(date) + " - " + hourToStr(intervalEnd);
};
};
var zoomConfig = {
levels: [
[
{ unit: "month", format: "%M %Y", step: 1},
],
[
{ unit: "month", format: "%M %Y", step: 1},
{ unit: "day", format: "%d %M", step: 1}
],
[
{ unit: "day", format: "%d %M", step: 1},
{ unit: "hour", format: hourRangeFormat(12), step: 12}
],
[
{unit: "day", format: "%d %M",step: 1},
{unit: "hour",format: hourRangeFormat(6),step: 6}
],
[
{ unit: "day", format: "%d %M", step: 1 },
{ unit: "hour", format: "%H:%i", step: 1}
]
]
}
gantt.ext.zoom.init(zoomConfig);
gantt.ext.zoom.getCurrentLevel();
gantt.ext.zoom.setLevel("year");
// 또는
gantt.ext.zoom.setLevel(5);
gantt.ext.zoom.getLevels();
이 메서드는 init() 메서드에 전달된 zoom 레벨 배열(ZoomLevels[])을 반환합니다.
gantt.ext.zoom.zoomIn();
또는 다음과 같이 사용할 수도 있습니다:
gantt.ext.zoom.setLevel(zoom.getCurrentLevel() - 1)
gantt.ext.zoom.zoomOut();
또는 다음과 같이 사용할 수도 있습니다:
gantt.ext.zoom.setLevel(zoom.getCurrentLevel() + 1)
attachEvent (name, handler): string - 이벤트 핸들러를 추가합니다
detachEvent (id): void - 이전에 등록한 이벤트 핸들러를 제거합니다
callEvent (name, params): boolean - 내부 이벤트를 트리거합니다
checkEvent (name): boolean - 특정 이벤트에 등록된 핸들러가 있는지 확인합니다
이벤트에 하나 이상의 핸들러가 등록되어 있으면 true를 반환합니다.
gantt.ext.zoom.attachEvent("onAfterZoom", function(level, config){
document.querySelector(".gantt_radio[value='" +config.name+ "']").checked = true;
});
Back to top