# 모양 및 스타일 설정

## Content

SpreadJS를 사용하면 데이터 차트에 다양한 스타일을 적용하여 데이터를 더 쉽게 이해하고 시각적으로 매력적으로 표현할 수 있습니다. 스타일을 적용하면 중요한 정보를 강조하고 전체적인 일관성과 가독성을 높일 수 있습니다.
**데이터 차트 패널**의 **Inspector** 탭을 사용하여 데이터 차트의 다양한 모양 및 스타일 설정을 구성할 수 있습니다.
![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/b2223940-43c2-44cf-8eda-f5ab9acd84f0/image.75c383.png?width=400)
데이터 차트 스타일에는 다양한 구성 옵션이 있으며, 일반적으로 사용되는 설정은 아래와 같습니다.

### 차트 스타일

차트 스타일 설정은 데이터 차트의 전체적인 시각적 모양을 제어합니다.
![2](https://docapp.mescius.io/DOCUMENT_SITE_LINK_PREFIX_HERE/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/2.182a68.png?width=400)
사용 가능한 옵션은 선택한 차트 유형에 따라 달라집니다.

#### 일반 모양

| **속성** | **설명** |
| --- | --- |
| 색상 팔레트 | 서로 다른 범례를 구분하기 위한 색상 집합을 선택합니다. 사용 가능한 옵션: Theme, Standard, Custom |
| 그래프 불투명도 | 차트 데이터 요소의 투명도를 조정합니다. |
| 캔버스 여백 | 차트 그리기 영역의 여백을 조정합니다. |

#### 선 및 기호 설정

*(선 기반 차트에서만 사용 가능)*

| **속성** | **설명** |
| --- | --- |
| 선 색상 | 계열 선 또는 데이터 요소 테두리의 색상을 설정합니다. |
| 선 종류 | 선 스타일을 실선 또는 점선으로 설정합니다. |
| 선 두께 | 계열 선 또는 데이터 요소 테두리의 너비를 설정합니다. |
| 선 모양 | 직선, 스플라인, 계단형 또는 곡선 스타일 등 계열 선의 렌더링 방식을 정의합니다. 사용 가능한 옵션은 차트 유형에 따라 다릅니다. |
| 기호 표시 | 데이터 요소에 기호를 표시합니다. |
| 기호 모양 | 데이터 요소 기호의 모양을 설정합니다. |
| 기호 크기 | 데이터 요소 기호의 크기를 설정합니다. |

>type=note
> **참고**
>
> * 선 모양은 계열 선을 렌더링하는 차트 유형에서만 사용할 수 있습니다.
> * 지원되는 옵션은 차트 유형에 따라 다릅니다.
>     * 꺾은선형 차트, 영역형 차트, 누적 영역형 차트, 100% 누적 영역형 차트: `Default`, `Spline`, `Step Left`, `Step Right`, `Step Center`, `Bezier Curve`
>     * 범위 영역형 차트: `Default`, `Spline`, `Bezier Curve`
>     * 레이더 차트 및 채워진 레이더 차트: `Default`, `Spline`
> * 현재 선 모양 설정을 지원하지 않는 차트 유형으로 변경하면 해당 차트 유형의 기본 동작으로 렌더링됩니다.

#### 원형 및 도넛형 설정

*(원형 계열 차트에서만 사용 가능)*

| 속성 | 설명 |
| --- | --- |
| 시작 각도 | 차트의 시작 각도를 설정합니다. |
| 반지름 | 내부 및 외부 반지름을 설정합니다. |
| 스윕 | 차트가 차지하는 각도 범위를 설정합니다. |
| 모서리 반지름 | 데이터 조각의 둥근 모서리 반지름을 설정합니다. |

#### 트리맵 머리글 설정

*(트리맵 차트에서만 사용 가능)*
**머리글 표시 여부**

| 속성 | 설명 |
| --- | --- |
| 머리글 레이블 표시 | 트리맵의 머리글 레이블을 활성화합니다. 활성화하면 세부 정보, 값 및 레이블 구분자 설정이 머리글 콘텐츠에 적용됩니다. |

**머리글 콘텐츠 (*머리글 레이블 표시* 활성화 시 사용 가능)**

| 속성 | 설명 |
| --- | --- |
| 세부 정보 | 각 트리맵 머리글에 세부 정보를 표시합니다. |
| 값 | 각 트리맵 머리글에 값을 표시합니다. |
| 레이블 구분자 | 머리글 내 레이블 요소 사이의 구분자를 지정합니다. |

**머리글 텍스트 스타일**

| 속성 | 설명 |
| --- | --- |
| 글꼴 색상 | 머리글 텍스트 색상을 설정합니다. |
| 글꼴 패밀리 | 머리글 글꼴 패밀리를 설정합니다. |
| 글꼴 크기 | 머리글 글꼴 크기를 설정합니다. |
| 글꼴 스타일 | 머리글 글꼴 스타일을 설정합니다. |
| 글꼴 굵기 | 머리글 글꼴 굵기를 설정합니다. |

### 모양

이 설정의 속성은 배경색, 테두리 종류 및 색상과 같은 데이터 차트의 시각적 세부 사항을 조정하여 가독성을 향상시키는 데 유용합니다.
![3](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/3.2d2638.png?width=400)

| **속성** | **설명** |
| --- | --- |
| 배경색 | 데이터 차트의 배경색을 설정합니다. |
| 테두리 종류 | 데이터 차트의 테두리 종류를 실선 또는 점선으로 설정합니다. |
| 테두리 색상 | 데이터 차트의 테두리 색상을 설정합니다. |
| 테두리 너비 | 데이터 차트 테두리 선의 너비를 설정합니다. |

### 제목

이 설정의 속성은 차트 제목의 스타일을 사용자 지정하는 데 사용할 수 있습니다. 제목은 차트 데이터를 설명하는 데이터 차트의 텍스트 영역을 의미합니다.
![4](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/4.80a9a1.png?width=400)

| **속성** | **설명** |
| --- | --- |
| 제목 표시 | 데이터 차트에 제목을 표시할지 여부를 설정합니다. |
| 제목 | 데이터 차트 제목의 텍스트 내용을 입력합니다. |
| 배경색 | 데이터 차트 제목 영역의 배경색을 설정합니다. |
| 테두리 색상 | 데이터 차트 머리글 영역의 테두리 색상을 설정합니다. |
| 테두리 종류 | 데이터 차트 머리글 영역의 테두리 선 모양을 실선 또는 점선으로 설정합니다. |
| 테두리 너비 | 데이터 차트 머리글 영역의 테두리 선 너비를 설정합니다. |
| 맞춤 | 데이터 차트 제목 텍스트의 정렬 방식을 설정합니다. |
| 글꼴 패밀리 | 데이터 차트 제목 텍스트의 글꼴을 설정합니다. |
| 글꼴 크기 | 데이터 차트 제목 텍스트의 글꼴 크기를 설정합니다. |
| 글꼴 굵기 | 데이터 차트 제목 텍스트의 글꼴 굵기를 설정합니다. |
| 글꼴 스타일 | 데이터 차트 제목 텍스트의 글꼴 스타일을 일반 또는 기울임꼴로 설정합니다. |
| 글꼴 색상 | 데이터 차트 제목 텍스트의 글꼴 색상을 설정합니다. |
| 안쪽 여백 | 데이터 차트 머리글 영역의 안쪽 여백을 조정합니다. |

### 데이터 레이블

이 설정의 속성을 사용하면 데이터 레이블을 구성하여 차트에 값을 직접 표시할 수 있어 데이터를 더 명확하고 쉽게 이해할 수 있습니다.
![5](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/5.6759e6.png?width=400)

| **설정** | **설명** |
| --- | --- |
| 데이터 레이블 표시 | 데이터 차트에 데이터 레이블 표시를 활성화합니다. 값(Value), 계열(Series), 범주(Category) 속성과 함께 사용해야 합니다. |
| 레이블 구분자 | 데이터 레이블 내 값, 계열 및 범주 속성 값 사이의 구분자를 설정합니다. 예: 쉼표, 세미콜론, 마침표 등 |
| 값 | 값 필드의 값을 데이터 레이블에 표시할지 여부를 설정합니다. |
| 서식 | 데이터 레이블에 표시되는 값 필드 값의 서식을 설정합니다. |
| 계열 | 계열 값을 데이터 레이블에 표시할지 여부를 설정합니다. |
| 범주 | 범주 값을 데이터 레이블에 표시할지 여부를 설정합니다. |
| 위치 | 데이터 레이블 위치를 Around 또는 On Slice로 설정합니다. |
| 겹침 숨기기 | 레이블이 겹치는 경우 일부 레이블을 숨깁니다. |
| 배경색 | 데이터 레이블의 배경색을 설정합니다. |
| 연결선 표시 | 데이터 레이블과 데이터 요소 사이의 연결선을 표시할지 여부를 설정합니다. |
| 선 색상 | 데이터 레이블과 데이터 요소를 연결하는 선의 색상을 설정합니다. |
| 선 너비 | 데이터 레이블과 데이터 요소를 연결하는 선의 너비를 설정합니다. |
| 최대 선 길이 | 데이터 레이블과 데이터 요소 사이 선의 최대 길이를 설정합니다. 직교 좌표계에서는 선이 직선이므로 최대 길이만 설정할 수 있습니다. |
| 첫 번째 선 길이 | 데이터 레이블과 데이터 요소를 연결하는 선의 첫 번째 구간 길이를 설정합니다. 극좌표계에서는 선이 두 구간으로 구성되므로 첫 번째 구간 길이를 설정합니다. |
| 두 번째 선 길이 | 데이터 레이블과 데이터 요소를 연결하는 선의 두 번째 구간 길이를 설정합니다. 극좌표계에서는 선이 두 구간으로 구성되므로 두 번째 구간 길이를 설정합니다. |
| 글꼴 패밀리 | 데이터 레이블 텍스트의 글꼴을 설정합니다. |
| 글꼴 크기 | 데이터 레이블 텍스트 크기를 설정합니다. |
| 글꼴 굵기 | 데이터 레이블 텍스트 굵기를 설정합니다. |
| 글꼴 스타일 | 데이터 레이블 텍스트 스타일을 일반 또는 기울임꼴로 설정합니다. |
| 글꼴 색상 | 데이터 레이블 텍스트 색상을 설정합니다. |

### 도구 설명

이 설정의 속성은 사용자가 차트 영역 위에 마우스를 올렸을 때 표시되는 도구 설명을 활성화하고 스타일을 지정하는 데 사용됩니다.
![6](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/6.8c5159.png?width=400)

| **설정** | **설명** |
| --- | --- |
| 도구 설명 표시 | 데이터 바인딩 패널의 도구 설명 콘텐츠를 표시하거나 숨깁니다. 기본적으로 데이터 차트는 값을 도구 설명으로 표시합니다. |
| 스타일 설정 | 다음 도구 설명 스타일을 사용자 지정합니다:<ul><li>배경색</li><li>테두리 색상</li><li>테두리 너비</li><li>글꼴 색상</li><li>글꼴 패밀리</li><li>글꼴 크기</li><li>글꼴 굵기</li><li>취소선</li><li>윗줄</li><li>밑줄</li></ul> |

### 축

이 설정의 속성은 범주(X축) 및 값(Y축)을 사용자 지정하여 데이터에 적합한 눈금, 간격 및 서식을 정의하는 데 유용합니다.
![7](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/7.2bc156.png?width=400)

| **설정** | **설명** |
| --- | --- |
| 축 표시 | 데이터 차트에 범주 축 및 값 축을 표시할지 여부를 설정합니다. |
| 축 위치 | 데이터 차트 축의 위치를 설정합니다. |
| 축 선 표시 | 데이터 차트 축 선을 표시합니다. |
| 축 선 너비 | 데이터 차트 축 선의 너비를 설정합니다. |
| 축 선 색상 | 데이터 차트 축 선의 색상을 설정합니다. |
| 축 선 종류 | 데이터 차트 축 선의 종류를 설정합니다. |
| 눈금선 표시 | 데이터 차트 축 방향의 눈금선을 표시합니다. |
| 눈금선 너비 | 눈금선의 너비를 설정합니다. |
| 눈금선 색상 | 눈금선의 색상을 설정합니다. |
| 눈금선 종류 | 눈금선의 종류를 설정합니다. |
| 눈금 표시 | 축의 눈금을 표시합니다. |
| 눈금 레이블 표시 | 축 눈금 레이블을 표시합니다. |
| 레이블 방향 | 축 눈금 레이블의 표시 방향을 설정합니다. |
| 레이블 넘침 설정 | 축 눈금 레이블이 넘칠 경우 Clip, Ellipsis 또는 Wrap 방식으로 표시합니다. |
| 제목 표시 | 축 이름을 표시합니다. |
| 글꼴 패밀리 | 축 텍스트의 글꼴을 설정합니다. |
| 글꼴 크기 | 축 텍스트의 크기를 설정합니다. |
| 글꼴 굵기 | 축 텍스트 굵기를 Lighter, Normal 또는 Bold로 설정합니다. |
| 글꼴 스타일 | 축 텍스트 스타일을 일반 또는 기울임꼴로 설정합니다. |
| 글꼴 색상 | 축 텍스트 색상을 설정합니다. |
| 최대값 | 값 축의 최대 눈금을 설정합니다. |
| 최소값 | 값 축의 최소 눈금을 설정합니다. |
| 간격 | 값 축 눈금 간격을 설정합니다. |
| 역순 | 값 축을 역순으로 표시합니다. |
| 축 위치 | 값 축의 표시 위치를 설정합니다. |
| 서식 | 값 축 레이블 데이터의 서식을 설정합니다. |
| 표시 단위 | 값 축 레이블 데이터의 단위를 설정합니다. |
| @cols=2:*아래 설정은 Bubble 및 Scatter 데이터 차트에서만 사용할 수 있습니다.* |
| 눈금 유형 | 축의 눈금 유형을 설정합니다. 예: Date |
| 날짜 모드 | 날짜 간격 단위를 설정합니다. 예: 연도, 월, 일 등 |
| 주 눈금 간격 | 날짜 모드와 함께 사용하는 주 눈금 간격을 설정합니다. |
| 보조 눈금 간격 | 날짜 모드와 함께 사용하는 보조 눈금 간격을 설정합니다. |

### 범례

이 설정의 속성을 사용하면 데이터를 효과적으로 표현하기 위해 범례 스타일을 관리할 수 있습니다.
![9](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/9.3308cc.png?width=400)

| **설정** | **설명** |
| --- | --- |
| 범례 표시 | 데이터 차트에 범례를 표시합니다. |
| 제목 | 데이터 차트 범례 제목을 표시합니다. |
| 글꼴 패밀리 | 범례 텍스트의 글꼴을 설정합니다. |
| 글꼴 크기 | 범례 텍스트 크기를 설정합니다. |
| 글꼴 굵기 | 범례 텍스트 굵기를 lighter, normal 또는 bold로 설정합니다. |
| 글꼴 스타일 | 범례 텍스트 스타일을 일반 또는 기울임꼴로 설정합니다. |
| 글꼴 색상 | 범례 텍스트 색상을 설정합니다. |
| 위치 | 범례 위치를 위쪽, 아래쪽, 오른쪽 또는 왼쪽으로 설정합니다. |
| 자동 크기 | 범례 영역 크기를 자동으로 조정합니다. |
| 가로 맞춤 | 데이터 차트에서 범례의 가로 정렬을 설정합니다. |
| 세로 맞춤 | 데이터 차트에서 범례의 세로 정렬을 설정합니다. |
| 범례 자동 줄 바꿈 | 범례 항목이 많을 경우 자동으로 줄 바꿈합니다. |

### 레이아웃

이 설정의 속성은 차트 레이아웃을 구성하여 시각적 명확성을 향상시키는 데 필요합니다.
![10](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/10.932623.png?width=400)

| **설정** | **설명** |
| --- | --- |
| X 위치 | 데이터 차트의 현재 X 위치 정보를 설정합니다. |
| Y 위치 | 데이터 차트의 현재 Y 위치 정보를 설정합니다. |
| 너비 | 데이터 차트의 너비를 설정합니다. |
| 높이 | 데이터 차트의 높이를 설정합니다. |

### 애니메이션

이 설정의 속성은 데이터 표현에 부드러운 애니메이션 효과를 추가하여 사용자 경험을 향상시키는 데 도움이 됩니다.
![11](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/7719ad0a-f083-46d7-aff6-f63e2e187c15/11.b85127.png?width=400)

| **설정** | **설명** |
| --- | --- |
| 마우스 오버 애니메이션 표시 | 데이터 요소 위에 마우스를 올릴 때 애니메이션을 표시합니다. |
| 업데이트 애니메이션 표시 | 데이터 차트 설정이 변경될 때 애니메이션을 표시합니다. |