# 간트 차트 구성요소
## Content
간트 차트는 간트 시트에서 프로젝트 일정을 나타내는 특수한 시트 열입니다.
이 차트는 각 작업의 시작일과 종료일을 표시하며, 일반적으로 각 작업의 완료 상태나 작업 간 종속성과 같은 정보도 추가로 제공합니다.
간트 차트는 기본적으로 **시간 축(Timescale)** 과 **차트 영역(Chart Area)** 의 두 가지 주요 구성 요소로 이루어져 있습니다.
## 시간축
시간축은 간트 차트의 열 머리글을 나타냅니다. 연도, 분기, 월, 주, 일 등과 같은 작은 또는 큰 시간 단위를 표시합니다.
간트 차트에서의 최대 시간 단위는 연도이며, 최소 시간 단위는 15분입니다.
시간축은 세 개의 서로 다른 계층(tier)과 하나의 계층 구분선(scale separator)으로 구성됩니다.
### 시간축 티어
간트 차트에는 시간 단위를 표시하기 위한 세 가지 계층 모드가 있습니다: `middle`, `middleBottom`, `topMiddleBottom`
시간축의 계층 모드를 설정하려면 `TimescaleTierMode` 열거형을 사용할 수 있습니다.
다음은 간트 차트에서 시간 축 계층 모드를 설정하는 코드 샘플입니다:
```javascript
// 시간축에 대한 티어 모드 설정
var timescale = ganttSheet.project.timescale;
timescale.tierMode = GC.Spread.Sheets.GanttSheet.TimescaleTierMode.middle;
```
하나의 timescale tier는 다음과 같은 구성 가능한 속성을 가집니다:
| 속성 | 타입 | 설명 |
| --- | --- | --- |
| `unit` | `GC.Spread.Sheets.GanttSheet.TimescaleUnit` | 계층의 시간 단위 |
| `count` | number | 틱 단위를 나타내는 숫자. 기본값은 1 |
| `labelAlign` | Left/Center/Right | 틱 라벨의 정렬 방식. 기본값은 ‘Left’ |
| `showTickLines` | boolean | 틱 라인 표시 여부. 기본값은 `True` |
| `formatter` | string | 해당 계층의 틱 라벨 포맷 설정.
`formatter`는 `"yyyy-mm-dd"` 같은 Spread Number Format 문자열(날짜용)
또는 간트 시트에서 지원하는 특수 키워드를 사용할 수 있습니다.
또한 포맷팅 시 실행되는 콜백 함수로도 지정할 수 있습니다. |
다음은 middle tier의 속성을 구성하는 예시 코드입니다:
```javascript
// 티어 구성 설정
var timescale = ganttSheet.project.timescale;
var targetTier = "middleTier";
timescale[targetTier].unit = GC.Spread.Sheets.GanttSheet.TimescaleUnit.days;
timescale[targetTier].count = 2;
timescale[targetTier].labelAlign = "Center";
timescale[targetTier].formatter = "dddd";
timescale[targetTier].showTickLines = false;
```
### 시간축 구분선
`showScaleSeparator` 옵션을 설정하여 `topMiddleBottom` 계층과 `middle` 계층 사이에 구분선을 표시할 수 있습니다.
이 옵션의 기본값은 `True`입니다. 구분선을 숨기려면 해당 옵션 값을 `false`로 설정해야 합니다.
다음은 축 구분선 라인을 숨기는 코드 샘플입니다:
```javascript
// 스케일 구분선 숨김
ganttSheet.project.timescale.showScaleSeparator = false;
```
아래의 GIF는 간트 차트에서 시간 축 설정을 구성한 모습을 보여줍니다:
## 차트 영역
차트 영역(chart area)은 간트 차트의 본문 영역을 나타냅니다.
이 영역에서는 **작업 시간/비작업 시간**을 표시하고, **차트 레이아웃 구성**, **작업 막대 스타일 변경**, **작업 요약 추가**, **눈금선 표시**, **작업 연결/해제** 등의 기능을 설정할 수 있습니다. 또한, **레이아웃 스타일 변경**, **간트** **차트 확대/축소**, **시간 축 수평/수직 스크롤** 등도 가능합니다.
차트 영역 및 다양한 기능 구성을 위해 다음 항목들을 참조할 수 있습니다:
| **항목** | **설명** |
| --- | --- |
| [비작업 시간](/spreadjs/docs/features/ganttsheet/non-working-time) | 간트 차트에서 비작업 시간 스타일을 변경합니다. |
| [눈금선](/spreadjs/docs/features/ganttsheet/gridlines) | 간트 차트의 그리드 라인 스타일을 변경합니다. |
| [작업 막대 스타일](/spreadjs/docs/features/ganttsheet/taskbar-styles) | 지정된 스타일 규칙으로 특정 작업 막대의 스타일을 변경합니다. |
| [작업 레이아웃](/spreadjs/docs/features/ganttsheet/task-layout) | 링크 선 모드, 작업 바 높이, 날짜 텍스트 포맷, 작업 바를 일 단위로 반올림 여부 등 간트 차트 레이아웃을 구성합니다. |
| [확대/축소](/spreadjs/docs/features/ganttsheet/zoom) | 간트 차트 영역을 적절한 뷰로 확대/축소합니다. |
| [스크롤](/spreadjs/docs/features/ganttsheet/scroll) | 간트 차트 영역을 적절한 뷰로 스크롤합니다. |
| [분할 핸들](/spreadjs/docs/features/ganttsheet/splitter-handle) | 분할 핸들을 끌어 데이터 패널과 간트 차트 패널 사이의 너비 비율을 조정합니다. |