세로 마커 추가
라이브러리는 특정 날짜나 날짜 범위를 표시(강조)할 수 있는 marker 확장을 제공합니다.
노트
확장 기능을 사용하려면 gantt.plugins 메서드를 사용하여 marker 플러그인을 활성화하세요.
<!DOCTYPE html>
<html>
<head>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
gantt.plugins({ /*!*/
marker: true /*!*/
}); /*!*/
//your code will be here
</body>
</html>
마커 추가
타임라인 영역에 마커를 추가하려면 예를 들어 오늘의 마커처럼 addMarker 메서드를 호출합니다:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({
start_date: new Date(), //마커의 날짜를 설정하는 Date 객체
css: "today", //마커에 적용되는 CSS 클래스
text: "Now", //마커의 제목
title: dateToStr( new Date()) // 마커의 툴팁
});
노트
참고로, 'text' 속성의 값으로 HTML을 임의로 사용할 수 있습니다.
추가된 마커의 객체를 얻으려면 getMarker 메서드를 사용합니다:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({ /*!*/
start_date: new Date(),
css: "today",
text: "Now",
title: dateToStr(new Date())
});
gantt.getMarker(markerId); //->{css:"today", text:"Now", id:...}
마커 제거
추가한 마커를 제거하려면 deleteMarker 메서드를 사용합니다:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({ /*!*/
start_date: new Date(),
css: "today",
text: "Now",
title: dateToStr(new Date())
});
gantt.deleteMarker(markerId); /*!*/
마커 숨기기
추가된 모든 마커를 숨기려면 show_markers 구성 옵션을 'false'로 설정합니다:
var marker1 = gantt.addMarker({ ...});
var marker2 = gantt.addMarker({ ...});
var marker3 = gantt.addMarker({ ...});
gantt.config.show_markers = false;// hides all 3 markers
마커 업데이트
마커를 업데이트하려면 updateMarker 메서드를 사용합니다:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var markerId = gantt.addMarker({ /*!*/
start_date: new Date(),
css: "today",
text: "Now",
title: dateToStr(new Date())
});
gantt.getMarker(markerId).css = "today_new";
gantt.updateMarker(markerId); /*!*/
모든 추가 마커를 업데이트하려면 renderMarkers 메서드를 사용합니다:
var marker1 = gantt.addMarker({ ...});
var marker2 = gantt.addMarker({ ...});
var marker3 = gantt.addMarker({ ...});
gantt.renderMarkers(); /*!*/
마커 스타일링
마커의 스타일을 지정하려면 gantt.templates.marker_class 템플릿을 사용합니다:
var showAdvancedMarkers;
gantt.templates.marker_class = function(marker){
if (showAdvancedMarkers)
return "advanced_marker";
return "hidden";
}
오늘의 마커
간트 차트에서 오늘의 마커를 표시하고자 한다고 가정해 봅니다. 이 경우 두 가지가 필요합니다: 페이지에 마커를 추가하고 시간이 흐름에 따라 마커를 이동시킬 함수를 제공하는 것. 아래 코드를 사용하면 됩니다:
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var id = gantt.addMarker({
start_date: new Date(),
css: "today",
title:dateToStr(new Date())
});
setInterval(function(){
var today = gantt.getMarker(id);
today.start_date = new Date();
today.title = date_to_str(today.start_date);
gantt.updateMarker(id);
}, 1000*60);
Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.