두 번째 스케일 추가하기

작업을 서로 다른 시간 단위로 동시에 표시하려면, 기본 스케일 아래에 여러 개의 추가 스케일을 추가할 수 있습니다.

추가 스케일은 subscales 속성을 사용하여 구성합니다:

gantt.config.scale_unit = "month";
gantt.config.date_scale = "%F, %Y";
 
 
gantt.config.subscales = [
    {unit:"week", step:1, date:"%W"},
    {unit:"day", step:1, date:"%D" }
];

보조 스케일의 여러 요소를 사용자 정의할 수 있습니다:

• unit
• step
• format
• style

스케일 단위 설정하기

두 번째 스케일의 단위를 지정하려면, subscales 속성 내에서 unit 속성을 사용하세요:

gantt.config.subscales = [
    {unit:"month", date:"%F, %Y" }
];

Related sample:  Multiple scales

스케일 스텝 설정하기

두 번째 스케일의 간격을 정의하려면, subscales 속성의 step 속성을 사용하세요:

gantt.config.subscales = [
    {unit:"month", step:1, date:"%F, %Y" }
];

Related sample:  Multiple scales

스케일 포맷 설정하기

두 번째 스케일의 포맷을 구성하려면 다음을 사용할 수 있습니다:

• date 속성에 간단한 문자열 포맷을 지정:

gantt.config.subscales = [
    {unit:"week", step:1, date:"%W"}
];

• template 속성에 함수로 더 복잡한 포맷을 정의:

gantt.config.subscales = [
    {unit:"week", step:1, template:weekScaleTemplate}
];
 
var weekScaleTemplate = function(date){
        var dateToStr = gantt.date.date_to_str("%d %M");
        var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
        return dateToStr(date) + " - " + dateToStr(endDate);
    };

Related sample:  Multiple scales

스케일 스타일 설정하기

두 번째 스케일에 사용자 정의 스타일을 적용하려면, subscales 속성의 css 속성을 사용하세요:

<style type="text/css">
.weekend{
    background: #F0DFE5 !important;
}
</style>

var daysStyle = function(date){
    var dateToStr = gantt.date.date_to_str("%D");
    if (dateToStr(date) == "Sun"||dateToStr(date) == "Sat")  return "weekend";
 
    return "";
};
 
gantt.config.subscales = [
    {unit:"day", date:"%D", css:daysStyle }
];

Related sample:  Multiple scales

Back to top