[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

그리드라인

그리드라인(Gridlines)은 간트 차트의 가독성을 높여주는 세로 및 가로선으로, 간트 차트의 작업 막대와 프로젝트 테이블의 해당 작업을 정렬하는 데 도움이 됩니다.

간트 차트에는 세 가지 종류의 그리드라인이 있으며, 모든 그리드라인에 대해 GC.Spread.Sheets.GanttSheet.GanttGridlines 클래스의 lineType, lineColor, interval 속성을 사용할 수 있습니다.

프로젝트 범위에 더 잘 맞도록 그리드라인의 모양과 간격 스타일을 변경할 수 있습니다.

시간 눈금 구분선

이 그리드라인은 시간 눈금 열을 구분합니다. 시간 눈금 계층 열(topTierColumn, middleTierColumn, bottomTierColumn)의 그리드라인 유형과 색상을 변경하려면 lineType과 lineColor 속성을 설정합니다.

다음 코드 샘플은 bottom 및 middle 계층 열의 그리드라인을 변경하는 방법을 보여줍니다.

// 아래 계층 열(bottom tier column)의 그리드라인을 점선 유형과 노란색으로 변경
ganttSheet.gridlines.bottomTierColumn = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed,
    lineColor: "yellow"
}
// 가운데 계층 열(middle tier column)의 그리드라인을 대시-점 유형과 빨간색으로 변경
ganttSheet.gridlines.middleTierColumn = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashDot,
    lineColor: "red"
}

위 코드의 출력 결과는 다음과 같습니다:


gridlines_timescaleSeparator

프로젝트 기준선

이 그리드라인은 현재 날짜, 시작일, 완료일 등을 강조하여 프로젝트의 범위를 명확하게 보여줍니다. 프로젝트 일정 날짜의 그리드라인 유형과 색상을 변경하려면 projectStart, projectFinish, currentDate에 대해 lineType과 lineColor 속성을 설정합니다.

다음 코드 샘플은 프로젝트 시작일과 완료일의 그리드라인을 변경하는 방법을 보여줍니다.

//  프로젝트 시작일의 그리드라인을 얇은 유형과 빨간색으로 변경
 ganttSheet.gridlines.projectStart = { 
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin, 
    lineColor: "red"
};
// 프로젝트 완료일의 그리드라인을 점선 유형과 아쿠아 색으로 변경
ganttSheet.gridlines.projectFinish = { 
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed, 
    lineColor: "aqua"
};

위 코드의 출력 결과는 다음과 같습니다:


gridlines_startFinishProject

작업 행 구분선

이 그리드라인은 작업 행(task row)을 구분합니다. 간격 그리드라인을 행 사이에 추가하여 작업 행을 정렬하고, interval, intervalLineType, intervalLineColor 속성을 통해 유형 및 색상을 변경할 수 있습니다.

다음 코드 샘플은 간트 행의 간격 그리드라인을 변경하는 방법을 보여줍니다.

// 간트 행(gantt rows)의 간격 그리드라인을 점선 유형과 빨간색으로 설정
ganttSheet.gridlines.ganttRows = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin,
    lineColor: "blue",
    interval: 2,
    intervalLineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed,
    intervalLineColor: "red"
}

위 코드의 출력 결과는 다음과 같습니다:


gridlines_ganttrows