# 진행 스파크라인

## Content

진행 스파크라인은 셀 내부에 진행 상황을 직접 표시합니다. 별도의 차트를 추가하지 않고도 완료 상태, 준비 상태, 할당량 진행률 또는 기타 비율 기반 값을 표시하는 데 사용할 수 있습니다.
진행 값은 `0`에서 `1` 사이의 비율로 처리됩니다. 예를 들어 `0.37`은 `37%`를 나타냅니다.
![image-20260709.e672e1.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.e672e1-20260821.3694b7.png?width=600)

## 진행 스파크라인 구성

**진행 스파크라인 설정** 대화 상자에서는 다음 옵션을 제공합니다.

| 설정 | 설명 |
| --- | --- |
| **값** | 숫자 비율로 계산되는 진행 값, 셀 참조 또는 지원되는 범위 식을 지정합니다. <br>`75%`의 경우 `0.75`와 같이 `0`에서 `1` 사이의 비율을 사용합니다. |
| **모드** | 진행 스파크라인의 시각적 스타일을 지정합니다. |
| **막대 색** | 완료된 부분의 색을 설정합니다. |
| **밴드 색** | 남은 부분 또는 트랙의 색을 설정합니다. |
| **값 표시** | 백분율 텍스트를 표시하거나 숨깁니다. |

>type=note
> 기본적으로 디자이너에서는 모드 `0`, 막대 색으로 `Accent 1`, 밴드 색으로 `Accent 1 80`을 사용하며 백분율 텍스트를 표시합니다.

### 진행 모드

`mode` 인수는 진행 스파크라인의 시각적 스타일을 지정합니다.

| 모드 | 이름 | 설명 | 예제 |
| --- | --- | --- | --- |
| `0` | 연속 막대 | 모서리가 둥근 가로 진행 막대입니다. | ![image-20260709.0f2e0a.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.0f2e0a-20260821.0bde5c.png?width=250) |
| `1` | 줄무늬 막대 | 완료된 부분에 대각선 줄무늬가 있는 가로 진행 막대입니다. | ![image-20260709.1a01a0.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.1a01a0-20260821.086628.png?width=250) |
| `2` | 분할 막대 | 개별 블록 세그먼트로 표시합니다. | ![image-20260709.348cda.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.348cda-20260821.d256f5.png?width=250) |
| `3` | 링 | 원형 진행 링입니다. | ![image-20260709.e7ba9a.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.e7ba9a-20260821.1efeea.png?width=150) |
| `4` | 호 | 반원형 게이지 호입니다. | ![image-20260709.9a9c6d.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.9a9c6d-20260821.a81dcf.png?width=150) |
| `5` | 해치 막대 | 남은 트랙에 해치 패턴이 있는 채워진 막대입니다. | ![image-20260709.699782.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.699782-20260821.800065.png?width=250) |
| `6` | 버블 막대 | 진행 단계를 채워진 원과 윤곽선 원으로 표시합니다. | ![image-20260709.b192d5.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.b192d5-20260821.fe12dd.png?width=250) |
| `7` | 점선 트랙 막대 | 채워진 막대 뒤에 점선 형태의 남은 트랙을 표시합니다. | ![image-20260709.a03dc5.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.a03dc5-20260821.68fa76.png?width=250) |
| `8` | 체크박스 막대 | 완료 및 남은 진행 단계를 선택 및 선택 취소된 사각형으로 표시합니다. | ![image-20260709.a38b9a.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.a38b9a-20260821.29d494.png?width=250) |
| `9` | 간격 링 | 고정된 간격이 있는 원형 링입니다. | ![image-20260709.07b5f6.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.07b5f6-20260821.865e6d.png) |
| `10` | 굵은 링 | 굵은 원형 진행 링입니다. | ![image-20260709.0287c5.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.0287c5-20260821.7c4f5c.png) |
| `11` | 눈금 링 | 눈금 표시가 있는 원형 링입니다. | ![image-20260709.948c40.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.948c40-20260821.39d137.png) |
| `12` | 파선 링 | 진행 부분을 파선 세그먼트로 표시하는 원형 링입니다. | ![image-20260709.e53079.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.e53079-20260821.aea3cf.png) |
| `13` | 점선 링 | 진행 부분을 점선 세그먼트로 표시하는 원형 링입니다. | ![image-20260709.12b2ac.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.12b2ac-20260821.5013b9.png) |
| `14` | 노브 링 | 진행 끝점을 점으로 표시하는 원형 링입니다. | ![image-20260709.7c3671.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.7c3671-20260821.ce4935.png) |

## 예제

다음 예제에서는 서로 다른 스타일과 색 설정을 사용하여 진행 스파크라인을 만듭니다.

```javascript
var sheet = spread.getActiveSheet();

sheet.setColumnWidth(0, 180);
sheet.setColumnWidth(1, 80);
sheet.setColumnWidth(2, 200);

sheet.getRange(0, 0, 4, 3).vAlign(GC.Spread.Sheets.VerticalAlign.center);

for (var r = 0; r < 4; r++) {
    sheet.setRowHeight(r, 80);
}

// Theme color, literal value, and visible percentage text.
sheet.setValue(0, 0, "Project Delivery");
sheet.setFormula(0, 2, '=PROGRESSSPARKLINE(0.37,1,"Accent 1","Accent 1 80")');

// CSS color, literal value, and hidden percentage text.
sheet.setValue(1, 0, "Release Readiness");
sheet.setFormula(1, 2, '=PROGRESSSPARKLINE(0.37,4,"#8e44ad","#e8d5f5",FALSE)');

// Theme color, cell reference, and visible percentage text.
sheet.setValue(2, 0, "Sales Quota");
sheet.setValue(2, 1, 0.73);
sheet.setFormula(2, 2, '=PROGRESSSPARKLINE(B3,14,"Accent 2","Accent 2 80")');
```

![image-20260709.433f2c.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/36b63360-fb01-457c-a448-c3ce32aaf454/image-20260709.433f2c-20260821.ddff8a.png?width=600)

## 참고

* 진행 값은 비율로 해석됩니다. `75%`의 경우 `0.75`를 사용합니다.
* 비어 있거나 빈 값은 `0`으로 표시됩니다.
* `0`보다 작은 값은 `0`으로 표시됩니다.
* `1`보다 큰 값은 `1`로 표시됩니다.
* 값 또는 모드가 유효하지 않으면 수식에서 `#VALUE!`을 반환합니다.
* 진행 스파크라인은 수식 기반이며 수식이 포함된 셀 내부에 표시됩니다.