# 꺾은선형 및 영역형 도표 만들기 (표준 & 방사형)

## Content

## 소개

**꺾은선형 도표, 영역형 도표, 방사형 꺾은선형 도표, 방사형 영역형 도표**를 생성하고 구성하기 전에, 보고서에 차트를 추가했는지 확인하세요. 차트를 추가하고 `차트 마법사(`를 여는 방법은 [차트 추가하기](/activereportsjs/docs/v6.1/#adding-a-chart)를 참고하세요. `차트 마법사`가 열리면, **꺾은선형, 영역형, 범위 영역형, 방사형 꺾은선형, 또는 방사형 영역형 도표 유형**을 선택하고 시각화할 데이터집합을 지정한 후, **다음 페이지**로 진행합니다.

## 도표 설정

**꺾은선형, 영역형, 방사형 꺾은선형, 방사형 영역형 도표**에 대한 `차트 마법사`의 `설정` 페이지는 아래와 같은 구조로 구성되어 있습니다:

![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/e246fd18-2fe0-40c8-92dc-c49712028485/image.03e178.png)

이 페이지는 세 개의 섹션으로 나뉘어 있습니다:

### 데이터 계열

**필드** [컬렉션](/activereportsjs/docs/v6.1/#collection)은 시각화할 **데이터 값**을 정의합니다. 이 값들은 다음과 같은 시각적 속성에 영향을 줍니다:

* **꺾은선형 도표**에서 **기호의 수직 위치**
* **영역형 도표**에서 **채워진 영역 경계의 수직 위치**
* **방사형 꺾은선형 도표**에서 중심에서 뻗어나가는 선을 따라 배치되는 **기호의 방사형 위치**
* **방사형 영역형 도표**에서 **채워진 영역 경계의 방사형 위치**

일반적으로 각 값은 `{Sum(SalesAmount)}`와 같은 [집계 표현식](/activereportsjs/docs/v6.1/)입니다. 여러 개의 데이터 값을 추가하면, [여러 값 꺾은선형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/MultipleValuesLinePlot/purejs)에서처럼 **다중 꺾은선형 도표(Multiple Line Plot)**가 생성됩니다.

가독성을 높이기 위해, [색상 범례](/activereportsjs/docs/v6.1/#color-legend)의 **범례 모드** 속성을 **데이터 값**으로 설정할 수 있습니다. 이 옵션을 사용하면 범례에서 선 색상과 영역 채우기 색상이 각각의 데이터 값과 일치하게 됩니다. 또한, 각 데이터 값 항목에 대해 **캡션** 속성을 설정하여 표시되는 이름을 사용자 지정할 수 있습니다.

**범위 영역형 도표**의 경우, 데이터 값은 각 범주에 대한 **하한**과 **상한** 값 쌍으로 정의됩니다. 기본적으로 하나의 값 쌍이 사전 채워져 있으며, 필요 시 더 많은 쌍을 추가할 수 있습니다. 각 쌍은 도표 요소의 시작 및 종료 위치를 결정합니다. 이 설정은 온도 변동, 매출 구간 등의 **범위 데이터 시각화**에 유용합니다.

### 범주 그룹

* **필드:** 데이터를 범주로 그룹화할 때 사용할 필드를 선택하거나 식을 지정합니다. 예를 들어, 범주는 월, 지역, 제품 유형 등을 나타낼 수 있습니다. 각 고유한 범주에 대해 데이터 값이 표시됩니다.

* **정렬 방향:** 범주를 `오름차순` 또는 `내림차순`으로 정렬할지를 지정합니다.

### 계열 그룹(Series Groups)

* **필드:** 각 범주에 대한 **하위 그룹**(예: 제품 유형이나 판매 채널 등)을 정의할 필드를 선택하거나 식을 지정합니다.

* **정렬 방향:** 계열 그룹을 **오름차순** 또는 **내림차순**으로 정렬할지를 지정합니다.

* **예시:** **여러 줄 꺾은선형 도표**는 선택된 필드를 기준으로 데이터를 개별 선으로 그룹화합니다. 예를 들어, 판매 보고서에서는 시간 흐름에 따라 **온라인 판매**와 **매장 판매**를 각각의 선으로 표시할 수 있습니다. 자세한 예시는 [여러 줄 꺾은선형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/MultipleLinePlot/purejs)에서 확인할 수 있습니다.

**데이터 값**, **범주 그룹**, **계열 그룹** 구성을 마쳤다면, `다음(Next)`을 클릭하여 [미리 보기 및 최종 조정](/activereportsjs/docs/v6.1/#preview-and-final-adjustments) 페이지로 이동해 차트 생성을 완료하세요.