작업 막대 스타일

간트 차트에서 작업 막대 스타일은 프로젝트 데이터를 시각화하는 데 중요한 역할을 합니다. 작업 막대 스타일을 변경하면 특정 작업의 가독성과 강조를 높일 수 있습니다. 지정된 스타일 규칙을 사용하여 특정 작업 막대의 스타일을 수정하면, 해당 규칙과 일치하는 모든 작업에 그 스타일이 적용됩니다.

SpreadJS 디자이너 컴포넌트 UI에서는 GANTT CHART FORMAT > Format > Bar Styles 옵션을 통해 작업 막대의 색상, 모양, 끝 모양, 패턴 및 텍스트를 사용자 지정할 수 있습니다.

GS-barstyles.548ee3.png

참고: 기본 키(primary key)가 존재해야만 작업 막대 스타일을 변경할 수 있습니다.

기본 제공 작업 막대 유형

작업 막대 유형은 필드 값에 따라 달라집니다. 예를 들어, 일반 작업의 "Mode" 필드를 "Auto"에서 "Manually"로 변경하면 해당 작업은 수동 예약 작업으로 바뀌며, 다른 일반 작업 막대와 구분되도록 다른 스타일로 표시됩니다.

수정된 작업 막대 스타일은 항상 특정 작업 막대 유형에 해당하며, 아래 표는 각 작업 유형에 대한 규칙 이름을 나열한 것입니다.

이름	Show For	From	To
task	일반 작업, 자동 예약	Task Start	Task Finish
progress	일반 작업, 자동 예약	Task Start	Complete Through
manualTask	일반 작업, 수동 예약	Task Start	Task Finish
manualProgress	일반 작업, 수동 예약	Task Start	Complete Through
milestone	마일스톤 작업, 자동 예약	Task Finish	Task Finish
summary	요약 작업, 자동 예약	Task Start	Task Finish
manualSummary	요약 작업, 수동 예약	Task Start	Task Finish
projectSummary	프로젝트 요약	Task Start	Task Finish
durationOnly	활성 작업, 수동 예약, 마일스톤 아님	Task Start	Task Finish
startOnly	수동 예약, 마일스톤 아님	Task Start	Task Start
finishOnly	수동 예약, 마일스톤 아님	Task Finish	Task Finish
manualMilestone	활성 마일스톤 작업, 수동 예약	Task Finish	Task Finish
durationOnlyMilestone	마일스톤 작업, 수동 예약	Task Finish	Task Finish
startOnlyMilestone	마일스톤 작업, 수동 예약	Task Start	Task Start
finishOnlyMilestone	마일스톤 작업, 수동 예약	Task Finish	Task Finish

기본 제공 스타일 규칙 가져오기

SpreadJS는 GC.Spread.Sheets.GanttSheet.TaskbarStyleRuleName 유형을 기반으로 각 작업 막대 유형에 대한 여러 기본 제공 스타일 규칙을 제공합니다.

각 작업 막대에는 독립적으로 사용자 지정 가능한 Start, Middle, End 영역이 있습니다.

시작(Start) 및 끝(End) 영역 → 모양, 유형, 색상 변경 가능
가운데(Middle) 영역 → 모양, 패턴, 색상 변경 가능
또한 작업 막대의 좌측, 우측, 상단, 하단, 내부에 텍스트 정보를 추가할 수도 있습니다.

예제 1

다음 코드 샘플은 작업 막대 시작 영역의 색상을 변경하고, 작업 막대에 좌측 텍스트와 상단 텍스트를 추가하는 방법을 보여줍니다. 여기서는 taskStyleRules 컬렉션의 getRule() 메서드를 사용하여 스타일 규칙을 가져오고, 대상 스타일 규칙의 작업 막대 스타일을 수정된 스타일 객체로 업데이트합니다.

// 작업 막대 시작 영역의 색상 변경
var targetBuiltInStyleRuleName = "task";
var targetStyleRule = ganttSheet.project.taskStyleRules.getRule(targetBuiltInStyleRuleName);
var targetStyle = targetStyleRule.style.taskbarStyle;
targetStyle.startColor = "red";
targetStyleRule.style.taskbarStyle = targetStyle;

// 좌측 텍스트와 상단 텍스트 설정
var targetBuiltInStyleRuleName = "task";
var targetStyleRule = ganttSheet.project.taskStyleRules.getRule(targetBuiltInStyleRuleName);
var targetStyle = targetStyleRule.style.taskbarStyle;
targetStyle.leftText = "taskNumber";
targetStyle.topText = "=[@duration]";
targetStyleRule.style.taskbarStyle = targetStyle;

예제 2

아래 예제는 프로젝트에서 작업 인스턴스를 가져와, GC.Spread.Sheets.GanttSheet.TaskbarStyle 유형을 사용해 특정 필드로 작업 막대 스타일을 업데이트하는 방법을 보여줍니다.

// 특정 작업의 스타일 가져오기 및 속성 변경
var task = ganttSheet.project.getTask(8);
console.log(task);
var newBarStyles = {};
newBarStyles["summary"] = {
      taskbarStyle: {
             startShape: "lineShape",
             startType: "solid",
             startColor: "Red",
             middlePattern: "diagonalLeft",
             middleShape: "rectangleBar",
             middleColor: "Yellow",
             endShape: "lineShape",
             endType: "solid",
             endColor: "Green",
             leftText: "taskNumber",
             bottomText: "duration",
             topText: '="Task Name: " & [@name]',
       }
}
task.style = newBarStyles;

var summaryTask = ganttSheet.project.getTask(4);
var summaryTaskStyles = {};
summaryTaskStyles["summary"] = {
        taskbarStyle: {
               startShape: "triangleRight",
               startType: "dashed",
               startColor: "#3a5823",
               middlePattern: "lineVertical",
               middleShape: "rectangleMiddle",
               middleColor: "#579863",
               endShape: "triangleLeft",
               endType: "dashed",
               endColor: "#3a5823",
               topText: "duration",
        }
}
summaryTask.style = summaryTaskStyles;

위 코드 실행 결과는 다음과 같습니다.

GS-taskbarStyles.c40266.png

사용자 지정 스타일 규칙 생성

SpreadJS는 GC.Spread.Sheets.GanttSheet.TaskbarStyleRule 클래스를 기반으로 사용자 지정 스타일 규칙을 생성할 수도 있습니다. 생성된 규칙은 조건에 맞는 작업의 스타일을 변경합니다.

// 새 사용자 지정 스타일 규칙 생성
var ruleName = "My Progress";
class MyProgressRule extends GC.Spread.Sheets.GnattSheet.TaskBarStyleRule {
    constructor() {
        super(ruleName);
        this.style = {
            taskbarStyle: {
                middleColor: "#3B87D4",
                middleShape: "rectangleMiddle",
                middlePattern: "solidFill"
            }
        };
    }
    match(task: GC.Spread.Sheet.GanttSheet.Task): boolean {
        return task.complete > 0;
    }
    getFromDate(task: GC.Spread.Sheet.GanttSheet.Task) {
        return task.startDisplayed;
    }
    getToDate(task: GC.Spread.Sheet.GanttSheet.Task) {
        return task.completeThrough;
    }
}

// 사용자 지정 스타일 규칙을 작업 막대 스타일 규칙 컬렉션에 추가
var styleRules = ganttSheet.project.taskStyleRules;
var customStyleRule = new MyProgressRule();
styleRules.add(customStyleRule);

// 기존 사용자 지정 스타일 규칙 업데이트
var ruleName = "My Progress";
var styleRules = ganttSheet.project.taskStyleRules;
var customStyleRule = styleRules.getRule(ruleName);
if (customStyleRule) {
    var style = customStyleRule.style.taskbarStyle;
    // 스타일 업데이트
    style.middleColor = "red";
    // 스타일 변경
    customStyleRule.style.taskbarStyle = style;
}

사용자 지정 스타일 규칙 제거

작업 막대 스타일 규칙의 스타일을 추가하거나 업데이트하는 것 외에도, GC.Spread.Sheets.GanttSheet.Project 클래스의 TaskStyleRules 컬렉션에서 remove() 및 clear() 메서드를 사용해 규칙을 삭제하거나 초기화할 수도 있습니다.