# 세로 막대형 및 가로 막대형 도표 (표준, 극좌표형, 나선형) ## Content ## 개요 `세로 막대형`, `가로 막대형`, `극좌표형`, 그리고 `나선형` 도표는 하나의 **카테고리** 내에서 또는 여러 **카테고리** 간에 여러 **데이터 값**을 비교하는 데 효과적입니다. 이러한 도표 유형은 비슷한 구성 옵션을 가지지만 데이터를 시각화하는 방식에서 차이를 보입니다: * **세로 막대형 도표**는 *범주*를 수평 축에 배치하고, **데이터 값**을 수직 막대로 표시합니다. * **가로 막대형 도표**는 *범주*를 수직 축에 배치하고, **데이터 값**을 수평 막대로 표시합니다. * **극좌표형 도표**는 *범주*를 원의 둘레를 따라 배치하고, **데이터 값**을 원형 섹터로 인코딩하여 방사형 레이아웃에서 값을 비교하는 대안을 제공합니다. * **나선형 도표**는 *범주*를 방사형 경로를 따라 배치하고, **데이터 값**을 바깥쪽으로 확장되는 곡선 막대로 인코딩하여 여러 카테고리에 걸친 추세와 점진적인 변화를 효과적으로 강조합니다. 이러한 각 도표 유형은 추세, 패턴, 비교를 시각화하는 체계적인 방법을 제공합니다. 또한, *범주* 내에서 **데이터 값**을 어떻게 구성할지 선택할 수 있습니다. 아래 예시에서는 **데이터 값**을 볼드체로, *범주*를 이탤릭체로 강조합니다. *** ## 묶은 세로 막대형 및 가로 막대형 `묶은 도표(Clustered Plot)`는 각 *범주* 내에서 여러 **데이터 값**을 나란히 표시하여 비교하는 데 사용됩니다. 구성에 따라 **데이터 값**이 **하위 카테고리**로 어떻게 분류되는지도 보여줄 수 있습니다. [묶은 세로 막대형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/ClusteredColumnPlot/purejs)는 각 *제품 카테고리*에 대한 **두 개의 데이터 값**(**순매출** 및 **순이익**)을 비교합니다. 각 **데이터 값**은 별도의 세로 막대로 표시되어 동일 카테고리 내에서 차이를 쉽게 확인할 수 있습니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/ClusteredColumnExample.png) 묶은 세로 막대형 또는 가로 막대형을 사용하여 데이터 값을 포함 범주 내 하위 범주로 나눌 수도 있습니다. 예를 들어 [묶은 가로 막대형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/ClusteredBarPlot/purejs)에서는 *제품 범주*에 따라 각 판매 채널당 **순 매출**을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/ClusteredBarExample.png) *** ## 누적 세로 막대형 및 가로 막대형 `누적 도표`는 **데이터 값**을 **하위 범주**로 분해하는 또 다른 방법으로, 해당 범주의 열 또는 막대의 하위 섹션을 서로 위로 쌓아올리거나(수직 스택), 나란히 배치하여(수평 스택) 표현합니다. [누적 세로 막대형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedColumnPlot/purejs)는 *판매 채널*별 *제품 카테고리*의 **순매출**을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/StackedColumnExample.png) *** ## 100% 기준 세로 막대형 및 가로 막대형 100% 기준 누적형 도표는 누적형 도표와 `백분율 표시` [축 눈금](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes)을 결합합니다. 각 데이터 값의 하위 범주가 포함 범주의 합계에 기여한 정도를 나타냅니다. 예를 들어, [100% 기준 누적 영역형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedPercentageBarPlot/purejs)에서는 *판매 채널*당 제품 범주의 **순 매출** 점유율(%)을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/Chart/PercentageBarExample.png) 다음 섹션에서 설명하는 `세로` 또는 `가로 막대형` 도표 템플릿과 속성을 사용하여 이러한 모든 유형을 구성할 수 있습니다. `누적 세로 막대형/가로 막대형` 및 `100% 기준 누적 세로 막대형/가로 막대형` 템플릿은 특정 구성에 대한 바로 가기입니다. *** ## 범위 세로 막대형 및 가로 막대형 범위 세로 막대형과 범위 가로 막대형 도표는 카테고리 또는 시간 기간에 걸쳐 두 값 세트 간의 범위 또는 차이를 표시하는 데 사용됩니다. 두 도표 유형 모두 세로 또는 가로 막대로 구성되며, 각 막대는 데이터 포인트 쌍 간의 `범위`를 나타냅니다. 예를 들어, [범위 세로 막대형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/RangeColumnPlot/purejs)는 특정 위치에서 1년 동안의 온도 범위(섭씨)를 표시합니다. ![image.e67d7d](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/5782ed59-7caa-432e-b8fb-3d0b076233da/image.e67d7d.f09c16.png) 범위 세로 막대형과 범위 가로 막대형 도표는 각 카테고리에 대해 여러 범위를 클러스터 형식으로 표시할 수 있어, 각 카테고리 내에서 다른 그룹이나 데이터 계열 간의 범위를 효과적으로 비교할 수 있습니다. 예를 들어, 여러 도시의 월별 온도 범위를 표시하여 서로 다른 위치에서 온도 변동을 쉽게 비교할 수 있습니다. 그러나 범위 도표가 누적 형식으로 각 카테고리에 여러 범위를 표시하는 것은 의미가 없습니다. 누적 형식은 최소값과 최대값 간의 실제 차이의 시각적 표현을 가릴 수 있기 때문입니다. *** ## 기본 극좌표형 가장 기본적인 형태의 극좌표형 도표는 방사형 레이아웃을 사용하여 각 범주에 대한 단일 데이터 값을 표현합니다. [기본 극좌표형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/SimplePolarPlot/purejs)는 *제품 카테고리*별 **판매 금액**을 시각화하며, 각 범주는 원형 주변에 배치되고 해당 값은 바깥쪽으로 확장된 섹터로 표시됩니다. 이 레이아웃은 다양한 제품 카테고리 간의 판매 분포를 시각적으로 직관적으로 비교할 수 있게 해줍니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/e246fd18-2fe0-40c8-92dc-c49712028485/image.8807d5.png) ## 묶은 극좌표형 묶은 극좌표형 도표는 **데이터 값**을 하위 범주로 분해하여, 해당 *카테고리* 내에서 관련된 원형 섹터들을 나란히 배치함으로써 표현합니다. [묶은 극좌표형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/ClusteredPolarPlot/purejs)는 *제품 카테고리*별 각 판매 채널의 **판매 금액**을 시각화하여, 다양한 유통 채널 간의 판매 성과를 쉽게 비교할 수 있도록 합니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/e246fd18-2fe0-40c8-92dc-c49712028485/image.cd4afb.png) *** ## 100% 기준 누적 극좌표형 도표 100% 기준 누적 극좌표형 도표는 누적 극좌표형 도표와 `백분율` [축 스케일](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes)을 결합한 형태입니다. 이는 각 **데이터 값** 하위 범주가 해당 *카테고리* 전체에서 차지하는 비율을 나타냅니다.예를 들어, [100% 기준 누적 극좌표형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedPercentagePolarPlot/purejs)는 각 *판매 채널* 내에서 **판매 금액**이 *제품 카테고리*별로 차지하는 비율을 시각화하여, 다양한 판매 채널 간의 카테고리 분포를 직관적으로 비교할 수 있게 해줍니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/e246fd18-2fe0-40c8-92dc-c49712028485/image.c4963b.png) *** ## 기본 나선형 가장 기본적인 형태의 나선형 도표는 `막대형 도표`와 매우 유사하지만, 이를 극좌표계 상에 표시한 형태입니다. 막대를 직선 축을 따라 정렬하는 대신, 방사형 경로를 따라 배치하여 나선형 효과를 만듭니다.예를 들어, [기본 나선형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/SimpleSpiralPlot/purejs)는 *제품 카테고리*별 **판매 금액**을 시각화하며, 데이터를 곡선 기반의 공간 효율적인 형식으로 효과적으로 표현할 수 있음을 보여줍니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/e246fd18-2fe0-40c8-92dc-c49712028485/image.318ed1.png) *** ## 누적 나선형 누적 나선형 도표는 **데이터 값**을 포함하는 *범주* 내에서 해당하는 원형 세그먼트를 쌓아 올려 하위 범주로 분해합니다. 이 레이아웃은 공간 효율적이고 시각적으로 매력적인 나선형 형식을 유지하면서 서로 다른 하위 범주의 기여도를 비교하는 데 도움이 됩니다. 예를 들어, [누적 나선형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedSpiralPlot/purejs)는 각 *제품 카테고리* 내에서 각 *판매 채널*에 대한 **판매 금액**을 시각화하여, 여러 채널에 걸친 판매 분포를 쉽게 분석할 수 있도록 합니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/e246fd18-2fe0-40c8-92dc-c49712028485/image.154c59.png) *** ## 100% 기준 누적 나선형 100% 기준 누적 나선형 도표는 누적 나선형 차트에 `백분률` [축 스케일](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes)을 결합한 형태입니다. 절대값을 표시하는 대신, 포함된 *범주* 전체에서 각 **데이터 값** 하위 범주의 비율 기여도를 나타냅니다. 예를 들어, [100% 기준 누적 나선형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedPercentageSpiralPlot/purejs)는 *제품 카테고리* 내에서 각 *판매 채널*의 **판매 금액** 비율을 시각화하여, 서로 다른 채널 간의 카테고리 분포를 비교하기 쉽게 만들어줍니다. ![image](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/e246fd18-2fe0-40c8-92dc-c49712028485/image.0e596c.png) *** ## 도표 속성 탐색 및 구성 다음 데모를 사용하여 도표 속성을 살펴보고, 링크를 열고, [보고서 탐색기](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface)를 토글하고, `도표 - 도표 1` 노드를 선택하고, [속성 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface)을 사용하여 구성을 수정할 수 있습니다. * [묶은 세로 막대형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/ClusteredColumnPlot/purejs) * [묶은 가로 막대형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/ClusteredBarPlot/purejs) * [누적 세로 막대형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedColumnPlot/purejs) * [100% 기준 누적 가로 막대형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedPercentageBarPlot/purejs) * [범위 세로 막대형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/RangeColumnPlot/purejs) * [기본 극좌표형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/SimplePolarPlot/purejs) * [묶은 극좌표형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/ClusteredPolarPlot/purejs) * [누적 극좌표형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedPolarPlot/purejs) * [100% 기준 누적 극좌표형 데모](https://demo.mescius.co.kr/activereportsjs/activereportsjs/demos/Reports/StackedPercentagePolarPlot/purejs) * [기본 나선형 데모](https://demo.mescius.co.kr/activereportsjs/demos/Reports/SimpleSpiralPlot/purejs) * [누적 나선형 데모 ](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedSpiralPlot/purejs) * [100% 기준 누적 나선형데모 ](https://demo.mescius.co.kr/activereportsjs/demos/Reports/StackedPercentageSpiralPlot/purejs) 아래 나열된 보고서 파일을 다운로드하여 [독립 실행형 보고서 디자이너](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App)에서 열 수 있습니다. * [묶은 세로 막대형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/ClusteredColumnPlot/purejs/ClusteredColumnPlot.rdlx-json) * [붂은 가로 막대형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/ClusteredBarPlot/purejs/ClusteredBarPlot.rdlx-json) * [누적 세로 막대형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/StackedColumnPlot/purejs/StackedColumnPlot.rdlx-json) * [100% 기준 누적 가로 막대형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/StackedPercentageBarPlot/purejs/StackedPercentageBarPlot.rdlx-json) * [범위 세로 막대형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/RangeColumnPlot/purejs/RangeColumnPlot.rdlx-json) * [기본 극좌표형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/SimplePolarPlot/purejs/simple-polar.rdlx-json) * [묶은 극좌표형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/ClusteredPolarPlot/purejs/cluster-polar.rdlx-json) * [누적 극좌표형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/StackedPolarPlot/purejs/stacked-polar.rdlx-json) * [100% 기준 누적 극좌표형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/StackedPercentagePolarPlot/purejs/stacked-percent-polar.rdlx-json) * [기본 나선형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/SimpleSpiralPlot/purejs/simple-spiral.rdlx-json) * [누적 나선형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/StackedSpiralPlot/purejs/stacked-spiral.rdlx-json) * [100% 기준 누적 나선형 보고서](https://developer.mescius.com/activereportsjs/demos/en/sample/Reports/StackedPercentageSpiralPlot/purejs/stacked-percent-spiral.rdlx-json) ## 다음 단계 세로 막대형, 가로 막대형, 극좌표형, 나선형 도표에 대한 보다 자세한 정보는 다음 페이지를 참조하세요: * [세로 막대형, 가로 막대형, 극좌표형, 나선형 도표 만들기](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column/세로-막대형-가로-막대형-극좌표형--나선형-도표-만들기) * [세로 막대형, 가로 막대형, 극좌표형, 나선형 도표 사용자 정의](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column/세로-막대형-가로-막대형-극좌표형-나선형-도표-사용자정의)