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

눈금선

눈금선은 간트 차트를 더 쉽게 읽을 수 있도록 하는 세로선과 가로선입니다. 눈금선을 사용하면 간트 차트의 작업 표시줄과 프로젝트 테이블의 해당 작업을 쉽게 맞춰 볼 수 있습니다. 프로젝트 범위를 더 잘 나타내도록 눈금선의 모양과 간격 스타일을 변경할 수 있습니다.

눈금선 서식 스타일

눈금선 서식에는 다음 두 가지 스타일이 있습니다.

  • 일반 스타일: 이 스타일에는 GC.Spreadsheet.GanttSheet.GanttGridline 인터페이스의 lineType 및 lineColor 두 가지 서식 속성이 있습니다.

  • 간격 스타일: 이 스타일은 일반 스타일의 lineType 및 lineColor 속성을 상속하면서 일반 스타일과 교차 스타일을 동시에 정의합니다. 또한 GC.Spread.Sheet.GanttSheet.GanttGridlineInterval 인터페이스의 interval, intervalLineType, intervalLineColor 속성을 포함하여 간격 눈금선에 적용할 수 있습니다.

구성 가능한 눈금선 유형

간트 차트에는 다양한 범주의 눈금선이 사용됩니다. 다음 섹션에서 설명하는 GC.Spread.Sheets.GanttSheet.GanttGridlines 클래스의 사용 가능한 속성을 사용하여 눈금선을 구성할 수 있습니다.

타임스케일 확장 눈금선

이 일반 스타일 눈금선은 타임스케일 열을 구분합니다. 타임스케일 계층 열의 눈금선 유형과 색을 변경하려면 topTierColumn, middleTierColumn, bottomTierColumn의 lineType 및 lineColor 속성을 설정합니다.

참고: 간트 차트 영역에서

  • bottomTierColumn 눈금선은 각각 middleTierColumn 및 topTierColumn 눈금선에 의해 가려집니다.

  • middleTierColumn 눈금선은 topTierColumn 눈금선에 의해 가려집니다.

다음 코드 예제에서는 아래쪽 및 중간 계층 열의 눈금선을 변경하는 방법을 보여줍니다.

// Change gridline of bottom tier column with dashed type and yellow color.
ganttSheet.gridlines.bottomTierColumn = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed,
    lineColor: "yellow"
}
// Change gridline of middle tier column with dash-dot type and red color.
ganttSheet.gridlines.middleTierColumn = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashDot,
    lineColor: "red"
}

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

SpreadJS GanttSheet displaying yellow dashed bottom-tier and red dash-dot middle-tier gridlines that separate timescale columns for easier project schedule analysis.

프로젝트 도우미 눈금선

이 일반 스타일 눈금선은 현재 날짜, 상태 날짜, 프로젝트 시작 날짜 및 프로젝트 완료 날짜를 포함하여 간트 차트의 프로젝트 수준 날짜를 강조 표시합니다. 이러한 눈금선을 사용하면 중요한 프로젝트 기준 날짜와 프로젝트 경계를 쉽게 식별할 수 있습니다.

프로젝트 수준 날짜의 눈금선 유형과 색을 변경하려면 currentDate, statusDate, projectStart, projectFinish의 lineType 및 lineColor 속성을 설정합니다.

참고: 간트 차트 영역에서

  • projectStart 눈금선은 각각 projectFinish, currentDate 및 statusDate 눈금선에 의해 가려집니다.

  • projectFinish 눈금선은 currentDate 및 statusDate 눈금선에 의해 가려집니다.

  • bottomTierColumn, middleTierColumn 및 topTierColumn 눈금선은 projectStart, projectFinish, currentDate 및 statusDate 눈금선에 의해 가려집니다.

다음 코드 예제에서는 프로젝트 시작 및 완료 눈금선을 변경하는 방법을 보여줍니다.

// Change gridline of project start with thin type and red color.
 ganttSheet.gridlines.projectStart = { 
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin, 
    lineColor: "red"
};
// Change gridline of project finish with dashed type and aqua color.
ganttSheet.gridlines.projectFinish = { 
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed, 
    lineColor: "aqua"
};

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

SpreadJS GanttSheet marking project boundaries with a thin red project-start gridline and a dashed aqua project-finish gridline around the scheduled task range.

다음 코드 예제에서는 현재 날짜 및 상태 날짜 눈금선을 구성하는 방법을 보여줍니다.

// Change the Current Date gridline.
ganttSheet.gridlines.currentDate = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin,
    lineColor: "green"
};

// Set the project status date.
ganttSheet.project.statusDate = new Date(2026, 6, 27);

// Change the Status Date gridline.
ganttSheet.gridlines.statusDate = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashDot,
    lineColor: "#5B9BD5"
};

image-20260720.78dafe.png

상태 날짜 눈금선은 진행선과 독립적으로 표시됩니다. 진행선을 표시하지 않고 상태 날짜 눈금선만 표시하거나 두 항목을 함께 사용할 수 있습니다.

상태 날짜 눈금선이 표시되면 진행선의 기준 날짜 앵커와 정렬되도록 해당 타임스케일 셀의 오른쪽 가장자리에 그려집니다.

작업 표시줄 구분 눈금선

이 간격 스타일 눈금선은 작업 행을 구분합니다. 행 사이에 간격 눈금선을 추가하여 작업 행을 맞추고 interval, intervalLineType, intervalLineColor 속성을 사용하여 유형과 색을 변경할 수 있습니다.

다음 코드 예제에서는 간트 행의 간격 눈금선을 변경하는 방법을 보여줍니다.

// Change interval gridline of gantt rows to with dashed type and red color.
ganttSheet.gridlines.ganttRows = {
    lineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.thin,
    lineColor: "blue",
    interval: 2,
    intervalLineType: GC.Spread.Sheets.GanttSheet.GanttGridlineType.dashed,
    intervalLineColor: "red"
}