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

## Content

## 개요

**꺾은선형**, **영역형**, **방사형**, **채워진 방사형** 도표는 순차적인 **범주** 에 따른 **데이터 값** 의 추세, 패턴, 변동을 시각화하는 데 효과적입니다. 이러한 도표 유형은 유사한 구성 옵션을 가지지만, 데이터를 표현하는 방식에서 차이가 있습니다:

* **꺾은선형 도표** 는 범주를 **수평 축**을 따라 배치하며, **기호** 로 표시된 데이터 포인트들을 선분으로 연결하여 시간 흐름이나 범주 간 변화를 강조합니다. **Swap Axes** 옵션을 사용하면 레이아웃을 전환하여 범주를 **수직 축**에 배치할 수도 있습니다.
* **영역형 도표** 는 꺾은선형 도표와 유사하지만 **기호** 를 표시하지 않으며, 대신 선 아래의 공간을 **채움으로써** 크기와 분포를 강조합니다.
* **방사형**은 범주를 직선 축이 아닌 원형 형태로 **방사형**으로 배치합니다:
    * **범주**는 중심점을 기준으로 고르게 분포됩니다.
    * **데이터 값**은 중심에서 바깥으로 뻗은 방사선(radial lines)을 따라 표시됩니다.
    * **기호**는 **직선 또는 곡선**으로 연결되어, 여러 범주가 있을 경우 **폐곡선(closed shape)** 을 형성합니다.
* **채워진 방사형 도표** 는 방사형 도표를 확장한 형태로, 선 아래 공간을 **채움으로써** 크기와 분포를 더욱 강조합니다:
    * **범주**는 원형으로 균등하게 배치되며, **데이터 값**은 방사선상에 위치합니다.
    * 데이터 포인트는 연결되어 **폐곡선**을 형성하고, 그 내부는 색으로 채워집니다.
    * 경계선은 **곡선 또는 직선**으로 설정할 수 있습니다.

이 도표 유형들은 추세, 변동성, 분포를 구조적으로 분석할 수 있도록 도와줍니다. 또한 포함된 *범주* 내에서 **데이터 값**을 어떻게 구성할지 선택할 수 있습니다. 아래 예시에서는 **데이터 값**은 굵게, *범주*는 기울임꼴로 강조합니다.

## 한 줄 꺾은선형 도표

한 줄 꺾은선형 도표는 시간의 흐름이나 일련의 **범주**를 따라 변화하는 **단일 데이터 값**을 나타냅니다. 이는 개별 데이터 포인트들을 선분으로 연결하여 데이터의 추세, 변동 또는 패턴을 강조합니다.예를 들어, [한 줄 꺾은선형 데모](/activereportsjs/demos/Reports/SingleLinePlot/purejs)는 1년 동안의 제품 반품 수를 시각화하여, 월별로 값이 어떻게 상승하고 하락하는지를 보여줍니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/SingleLineExample.png)

## 여러 줄 꺾은선형 도표

여러 줄 꺾은선형 도표는 동일한 **범주** 집합을 기준으로 **여러 데이터 값**을 시각화할 수 있어, 서로 다른 하위 범주 간의 추세와 패턴을 보다 정밀하게 비교할 수 있도록 해줍니다.예를 들어, [여러 줄 꺾은선형 데모](/activereportsjs/demos/Reports/MultipleLinePlot/purejs)는 1년 동안의 **순매출** 변화를 두 개의 판매 채널인 **온라인** 과 **매장** 에 대해 보여줍니다. 각 선은 개별 하위 카테고리를 나타내므로, 이들 간의 차이점, 상관관계, 계절적 변화를 쉽게 파악할 수 있습니다.

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

## 여러 값 꺾은선형 도표

여러 값 꺾은선형 도표 동일한 기간 동안의 **서로 다른 여러 데이터 값**을 시각화할 수 있게 해줍니다. 이 값들은 서로 관련이 있을 수도, 독립적일 수도 있으며, 다양한 지표 간의 직접적인 비교를 가능하게 하여 추세에서의 상관관계나 불일치를 파악하는 데 도움을 줍니다.예를 들어, [여러 값 꺾은선형 도표 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/MultipleValuesLinePlot/purejs)는 특정 제품의 1년 동안 **순매출**, **매출원가**, **순이익**이 어떻게 변화하는지를 보여줍니다. 각 선은 개별 지표를 나타내며, 이들 간의 관계와 전반적인 재무 성과를 분석하기 쉽게 만들어줍니다.

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

## 여러 값 방사형 도표

**방사형 꺾은선형 도표**는 여러 **데이터 계열**을 **범주** 집합에 걸쳐 시각화할 때 유용하며, 원형 레이아웃을 통해 다양한 변수들을 쉽게 비교할 수 있게 해줍니다.예를 들어, [여러 값 방사형 꺾은선형 도표 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/MultipleValuesRadarLinePlot/purejs)는 여러 **영화 장르**에 대해 두 가지 평균 영화 평점인 **Rotten Tomatoes** 와 **관객 평점** 을 보여줍니다. 각 선은 개별 데이터 계열을 나타내며, 평론가와 관객이 다양한 장르를 어떻게 평가하는지 빠르게 비교할 수 있도록 도와줍니다.

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

## 여러 줄 방사형 도표

**여러 줄 방사형 꺾은선형 도표**는 여러 **범주**에 걸쳐 **데이터 게열**을 비교할 때 사용되며, 각 선은 고유한 하위 그룹을 나타냅니다. 이를 통해 서로 다른 데이터 하위 집합 간의 변화를 보다 세분화하여 분석할 수 있습니다.예를 들어, [여러 줄 방사형 꺾은선형 도표 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/MultipleLinesRadarLinePlot/purejs)는 여러 **영화 장르**에 걸쳐 **평균 영화 평점**을 시각화하며, 서로 다른 **국가**(예: **미국**과 **대한민국**)의 평점을 비교합니다. 각 선은 하나의 국가를 나타내므로, 지역별 선호도 차이를 쉽게 파악할 수 있습니다.

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

## 묶은 영역형 도표

**묶은 영역형 도표**는 **데이터 값**을 **하위 범주**로 분해하여, 전체 추세에 대해 각 그룹이 어떻게 기여하는지를 보다 자세히 보여줍니다. 각 하위 범주는 개별 **레이어** 로 표현되어, 시간 흐름에 따른 여러 데이터 계열을 비교하기가 쉬워집니다.예를 들어, [묶은 영역형 도표 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/ClusteredAreaPlot/purejs)는 1년 동안의 **순매출** 을 시각화하며, **제품 카테고리별**로 데이터를 구분된 **영역**으로 나타냅니다. 이 방식은 전체적인 흐름을 유지하면서도 개별 추세를 직접 비교할 수 있도록 도와줍니다.

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

## 누적 영역형 도표

**누적 영역형 도표**는 **데이터 값**을 **하위 범주**로 나누면서 누적 합계를 강조할 때 사용됩니다. 개별 계층을 따로 표시하는 대신, 각 하위 범주는 **이전 계층 위에 쌓이는 방식**으로 배치되어, 전체에 대한 각 구성 요소의 기여도를 시각적으로 명확하게 보여줍니다. 예를 들어, [누적 영역형 도표 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedAreaPlot/purejs)에서는 1년 동안의 **순매출** 변화를 시각화하며, 제품 데이터를 다양한 **제품 범주**의 **누적 영역**으로 구분해 표시합니다. 이 형식은 각 범주의 기여도를 쉽게 비교할 수 있도록 하며, 동시에 전체적인 추세도 파악할 수 있게 해줍니다.

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

## 100% 기준 누적 영역형 도표

**100% 기준 누적 영역형 도표**는 **누적 영역 도표**에 **백분율 기반 축 척도**를 결합한 형태입니다. 절대값을 표시하는 대신, 각 하위 범주가 특정 시점에서 전체에 대해 차지하는 **상대적 기여도**를 나타냅니다.

* **y축**은 항상 \*\*100%\*\*로 고정되어, 절대값의 변동과 무관하게 **비율의 변화**를 명확하게 볼 수 있습니다.
* 각 **누적 영역**은 주어진 시점에서 해당 하위 범주가 전체에서 차지하는 **비율**을 나타냅니다.

예를 들어, [100% 기준 누적 영역형 도표 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedPercentageAreaPlot/purejs)에서는 **순매출** 내 다양한 **제품 범주**의 **백분율 분포**를 시각화하여, **상대적인 시장 점유율의 변화**를 쉽게 추적할 수 있게 해줍니다.

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

## 범위 영역형 도표

**범위 영역형 도표**는 시간과 같은 연속 변수에 따라 두 값 집합 간의 **범위 또는 차이**를 시각화합니다. 이 도표는 **불확실성, 신뢰 구간, 또는 데이터 내 변동성**을 보여줄 때 특히 유용합니다. 예를 들어, [범위 영역 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/RangeAreaPlot/purejs)는 1년 동안의 **판매 예측 신뢰 구간**을 보여주며, 예상 매출의 잠재적 변동성을 시각화합니다.

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

범위 영역 도표는 또한 **범주별로 여러 범위**를 표시할 수 있어, 하나의 도표 내에서 서로 다른 제품의 예측치를 비교하는 데 유용합니다. 그러나 **범위 영역 도표를 누적하는 것은 권장되지 않습니다**. 이 도표는 전체에 대한 구성 비율을 나타내기보다는, 각 범주 내에서 **두 데이터 지점 사이의 변동성**을 강조하기 때문에 누적 시각화는 그 의미가 떨어집니다.

## 단일 값 채워진 방사형 도표

**단일 값 채워진 방사형 도표**는 하나의 **변수**에 대한 측정값을 여러 **범주**에 걸쳐 시각화할 때 사용됩니다. 방사형 구조 내에서 점들을 연결해 형성된 영역은 각 데이터 값의 크기를 나타냅니다. 예를 들어, [단일 값 채워진 방사형 도표 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/SingleValueRadarAreaPlot/purejs)는 다양한 **영화 장르**별 **평균 제작비**를 시각화하여, 각 장르에 할당된 재정 자원의 분포를 명확하게 비교할 수 있도록 합니다.

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

## 여러 영역 채워진 방사형 도표

**여러 영역 채워진 방사형 도표**는 데이터 집합 내의 **하위 범주**를 시각화하여, 동일한 **범주** 집합에 대해 여러 데이터 데이터 집합을 보다 정밀하게 비교할 수 있도록 합니다. 각 영역은 서로 다른 하위 그룹을 나타내며, 차이점과 추세를 분석하는 데 유용합니다. 예를 들어, [여러 영역 채워진 방사형 도표 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/MultipleAreasRadarAreaPlot/purejs)는 여러 **영화 장르**에 대한 **평균 제작비**를 시각화하고, 이를 서로 다른 **국가(UK와 USA)** 간에 비교합니다. 겹쳐진 영역을 통해 지역별 예산 배분의 차이를 명확하게 파악할 수 있습니다.

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

## 도표 속성 탐색 및 구성

다음 데모를 통해 꺾은선형 도표의 속성을 탐색할 수 있습니다. 링크를 열고 [보고서 탐색기](/activereportsjs/docs/v6.1/#report-explorer)를 활성화한 뒤, `Plot - Plot 1` 노드를 선택하고 [속성 패널](/activereportsjs/docs/v6.1/#properties-panel)을 사용하여 구성을 변경할 수 있습니다.

* [한 줄 꺾은선형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/SingleLinePlot/purejs)
* [여러 줄 꺾은선형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/MultipleLinePlot/purejs)
* [여러 값 꺾은선형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/MultipleValuesLinePlot/purejs)
* [여러 값 방사형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/MultipleValuesRadarLinePlot/purejs)
* [여러 줄 방사형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/MultipleLinesRadarLinePlot/purejs)
* [묶은 영역형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/ClusteredAreaPlot/purejs)
* [누적 영역형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/StackedAreaPlot/purejs)
* [100% 기준 누적 영역형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/StackedPercentageAreaPlot/purejs)
* [범위 영역형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/RangeAreaPlot/purejs)
* [단일 값 채워진 방사형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/SingleValueRadarAreaPlot/purejs)
* [다중 영역 채워진 방사형 도표 데모](https://developer.mescius.com/activereportsjs/demos/Reports/MultipleAreasRadarAreaPlot/purejs)

또한 아래의 리포트 파일을 다운로드하여 [독립 실행형 리포트 디자이너](/activereportsjs/docs/v6.1/)에서 열어볼 수 있습니다:

* [한 줄 꺾은선형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/SingleLinePlot/purejs/SingleLine.rdlx-json)
* [여러 줄 꺾은선형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/MultipleLinePlot/purejs/MultipleLine.rdlx-json)
* [여러 값 꺾은선형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/MultipleValuesLinePlot/purejs/MultipleValuesLine.rdlx-json)
* [여러 값 방사형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/MultipleValuesRadarLinePlot/purejs/radar-line-multiple-values.rdlx-json)
* [여러 줄 방사형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/MultipleLinesRadarLinePlot/purejs/radar-line-multiple-lines.rdlx-json)
* [묶은 영역형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/ClusteredAreaPlot/purejs/ClusteredAreaPlot.rdlx-json)
* [누적 영역형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/StackedAreaPlot/purejs/StackedAreaPlot.rdlx-json)
* [100% 기준 누적 영역형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/StackedPercentageAreaPlot/purejs/StackedPercentageAreaPlot.rdlx-json)
* [범위 영역형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/RangeAreaPlot/purejs/RangeAreaPlot.rdlx-json)
* [단일 값 채워진 방사형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/SingleValueRadarAreaPlot/purejs/radar-area-single-value.rdlx-json)
* [다중 영역 채워진 방사형 리포트](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/MultipleAreasRadarAreaPlot/purejs/radar-area-multiple-details.rdlx-json)

## 다음 단계

꺾은선형 도표에 대한 자세한 정보는 아래 페이지를 참고하세요:

* [꺾은선형 및 영역형 도표 만들기 (표준 및 방사형)](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/line-chart/creating-line-and-area-plots-standard--radar)
* [꺾은선형 및 영역형 도표 사용자 정의 (표준 및 방사형)](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/line-chart/꺾은선형-및-영역형-도표-사용자정의-표준--방사형)