# 세로 막대형 및 가로 막대형 도표 ## Content ```세로``` 및 ```가로 막대형``` 도표는 ```범주```별 ```데이터 값```을 비교하거나 범주 간에 비교하는 데 적합합니다. 두 도표 유형 모두 구성이 동일하지만 다르게 표시됩니다. * ```세로 막대형``` 도표는 범주를 가로로 배열하고 데이터 값을 세로 막대로 인코딩합니다. * ```가로 막대형``` 도표는 범주를 세로로 배열하고 데이터 값을 가로 막대로 인코딩합니다. 또한 포함 범주 내에서 데이터 값을 배치하는 다음 방법 중 하나를 선택할 수 있습니다. 아래 예에서 **데이터 값**은 굵은 글꼴을 사용하여 강조하고, *범주*는 기울임꼴 글꼴을 사용하여 강조합니다. ### 묶은 세로 막대형 및 가로 막대형 묶은형 도표에는 일반적으로 포함 범주당 각 데이터 값 하나에 해당하는 여러 세로 또는 가로 막대가 포함되어 있습니다. 예를 들어, [묶은 세로 막대형 데모](/activereportsjs/demos/Reports/ClusteredColumnPlot/purejs)에서는 *제품 범주*당 **순 매출** 및 **순 수익**을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/Chart/ClusteredColumnExample.png) 묶은 세로 막대형 또는 가로 막대형을 사용하여 데이터 값을 포함 범주 내 하위 범주로 나눌 수도 있습니다. 예를 들어 [묶은 가로 막대형 데모](/activereportsjs/demos/Reports/ClusteredBarPlot/purejs)에서는 *제품 범주*에 따라 각 판매 채널당 **순 매출**을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/Chart/ClusteredBarExample.png) ### 누적 세로 막대형 및 가로 막대형 누적형 도표는 포함 범주 내에서 해당하는 세로 막대 또는 가로 막대 하위 섹션을 서로 위에 또는 서로 옆에 배치하여 데이터 값을 하위 범주로 나누는 또 다른 방식입니다. [누적 세로 막대형 데모](/activereportsjs/demos/Reports/StackedColumnPlot/purejs)는 *판매 채널*당 각 제품 범주에 대한 **순 매출**을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/Chart/StackedColumnExample.png) ### 백분율 표시 세로 막대형 및 가로 막대형 백분율 표시 누적형 도표는 누적형 도표와 ```백분율 표시``` [축 눈금](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes#scale-type)을 결합합니다. 각 데이터 값의 하위 범주가 포함 범주의 합계에 기여한 정도를 나타냅니다. 예를 들어, [백분율 표시 누적 영역형 데모](/activereportsjs/demos/Reports/StackedPercentageBarPlot/purejs)에서는 *판매 채널*당 제품 범주의 **순 매출** 점유율(%)을 보여줍니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/Chart/PercentageBarExample.png) 다음 섹션에서 설명하는 ```세로``` 또는 ```가로 막대형``` 도표 템플릿과 속성을 사용하여 이러한 모든 유형을 구성할 수 있습니다. ```누적 세로 막대형/가로 막대형``` 및 ```백분율 표시 누적 세로 막대형/가로 막대형``` 템플릿은 특정 구성에 대한 바로 가기입니다. 다음 데모를 사용하여 도표 속성을 살펴보고, 링크를 열고, [보고서 탐색기](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer)를 토글하고, ```도표 - 도표 1``` 노드를 선택하고, [속성 패널](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel)을 사용하여 구성을 수정할 수 있습니다. * [묶은 세로 막대형 데모](/activereportsjs/demos/Reports/ClusteredColumnPlot/purejs) * [묶은 가로 막대형 데모](/activereportsjs/demos/Reports/ClusteredBarPlot/purejs) * [누적 세로 막대형 데모](/activereportsjs/demos/Reports/StackedColumnPlot/purejs) * [백분율 표시 누적 가로 막대형 데모](/activereportsjs/demos/Reports/StackedPercentageBarPlot/purejs) 아래 나열된 보고서 파일을 다운로드하여 [독립 실행형 보고서 디자이너](/activereportsjs/docs/v2.1/ReportAuthorGuide/Get-Started-With-Designer-App)에서 열 수 있습니다. * [묶은 세로 막대형 보고서](/activereportsjs/demos/en/sample/Reports/ClusteredColumnPlot/purejs/ClusteredColumnPlot.rdlx-json) * [묶은 가로 막대형 보고서](/activereportsjs/demos/en/sample/Reports/ClusteredBarPlot/purejs/ClusteredBarPlot.rdlx-json) * [누적 세로 막대형 보고서](/activereportsjs/demos/en/sample/Reports/StackedColumnPlot/purejs/StackedColumnPlot.rdlx-json) * [백분율 표시 누적 가로 막대형 보고서](/activereportsjs/demos/en/sample/Reports/StackedPercentageBarPlot/purejs/StackedPercentageBarPlot.rdlx-json) ### 데이터 값 ```세로``` 및 ```가로 막대형``` 도표는 순 매출 또는 평균 강수량과 같은 항목을 비교하는 데 이상적입니다. 도표의 ```값``` [컬렉션](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#collection)은 두 가지 속성으로 구성된 다음 항목을 결정합니다. * ```값```은 일반적으로 [바인딩된 필드 참조](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions/references#data-set-fields)입니다. *참고: 이 속성은 컬렉션이지만 ```가로``` 및 ```세로 막대형```도표는 첫 번째 항목만 사용합니다.* * ```집계```는 여러 필드 값을 단일 값으로 줄이는 선택적 함수입니다(예: ```Count``` 또는 ```Average```). [바인딩된 데이터 집합](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions#data-set-name)에는 집계된 값이 포함되며 이 속성을 ```없음```으로 설정할 수 있습니다. 여러 데이터 값은 [묶은 세로 막대형 데모](/activereportsjs/demos/Reports/ClusteredColumnPlot/purejs)에서처럼 묶은형 도표를 생성합니다. ```범례에 값 이름 표시``` 플래그를 전환하여 세로 또는 가로 막대 배경과 해당하는 데이터 값 이름 간 일치를 표시하는 [범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)를 도표에 제공할 수 있습니다. ### 범주 인코딩 ```세로``` 및 ```가로 막대형``` 도표의 ```범주 인코딩```은 도표에서 ```데이터 값```보다 큰 값을 나타내는 세로 또는 가로 막대를 생성하는 ```범주 값```의 범위를 결정하는 속성 집합입니다. * ```범주```는 일반적으로 하나 이상의 [바운딩 필드 참조](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions/references#data-set-fields)입니다. 해당 필드와 값이 동일한 바인딩된 데이터 집합 레코드는 동일한 범주에 속합니다. 예를 들어, [묶은 세로 막대형 데모 차트](/activereportsjs/demos/Reports/ClusteredColumnPlot/purejs)는 ```제품 범주```를 비롯하여 데이터 레코드당 여러 필드를 포함하는 ```판매 데이터 집합```에 바인딩됩니다. 도표의 ```범주``` 목록에는 ```{ProductCategory}``` 참조가 포함되어 있습니다. 따라서 도표는 ```판매 데이터 집합```을 거치면서 고유한 ```제품 범주``` 필드 값을 가로 축을 따라 배치합니다. * ```범주 정렬``` 구성은 범주 값 모양의 순서를 결정합니다. 예를 들어, ```묶은 세로 막대형 데모```의 도표에는 매출 합계별로 제품 범주를 내림차순으로 정렬하는 다음 설정이 있습니다. * ```범주 정렬 식 = {[Net Sales]}``` * ```범주 정렬 집계 = Sum``` * ```범주 정렬 방향 = Descending``` ### 세부 정보 인코딩 ```세부 정보 인코딩```을 사용하면 더 세분화해 비교하기 위해 위의 ```데이터 값```을 포함 범주 내 하위 범주로 나눌 수 있습니다. ```세로``` 및 ```가로 막대형``` 도표의 ```세부 정보``` 속성은 하위 범주를 정의하는 항목의 [컬렉션](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#collection)입니다. 각 항목에는 다음과 같은 속성이 있습니다. * ```값```은 일반적으로 하나 이상의 [바운딩 필드 참조](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions/references#data-set-fields)입니다. 해당 필드와 값이 동일한 바인딩된 데이터 집합 레코드는 동일한 하위 범주에 속합니다. 예를 들어, [누적 세로 막대형 데모](/activereportsjs/demos/Reports/StackedColumnPlot/purejs)에서 도표 ```세부 정보``` 값은 ```{ProductCategory}```입니다. 따라서 ```순 매출``` 세로 막대는 고유한 제품 범주에 해당하는 여러 하위 섹션으로 나뉩니다. * ```Null 제외``` 플래그는 정의되지 않은 ```세부 정보 값```이 있는 데이터 집합 레코드가 시각화에서 제외되어야 함을 나타냅니다. * ```그룹``` 속성은 도표가 하위 섹션으로 구분된 세로 또는 가로 막대를 배열하는 방법을 결정합니다. * ```누적``` \- 가로 막대형 도표는 하위 섹션을 서로 나란히 배치하고, 세로 막대형 도표는 아래/위로 배치합니다. 이 값을 사용하여 ```누적 세로 막대형``` 또는 ```누적 가로 막대형``` 도표를 구성할 수 있습니다. * ```묶기``` \- 하위 섹션이 그룹으로 묶입니다. [묶은 가로 막대형 데모](/activereportsjs/demos/Reports/ClusteredBarPlot/purejs)에서는 도표 세부 정보에 이 값을 사용합니다. * ```없음``` \- 기본값과 동일합니다. * ```정렬``` 구성은 하위 섹션 모양의 순서를 결정합니다. ### 색 인코딩 ```색 인코딩```은 ```범주 인코딩``` 또는 ```세부 정보 인코딩```의 [색 범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)를 활성화하고 ```색``` [식](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions)과 여러 ```색``` 값을 하나의 값으로 줄이는 선택적 ```색 집계``` 함수를 포함합니다. ```세부 정보 인코딩```이 비어 있으면 ```세로``` 및 ```가로 막대형``` 도표는 ```범주 인코딩```에서 생성되는 범주에 대해 고유한 ```색 인코딩``` 결과를 계산하고 그 결과를 해당하는 세로 또는 가로 막대의 배경색으로 변환한 다음 [범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)에 일치 여부를 표시합니다. 그러지 않은 경우, ```세로``` 및 ```가로 막대형``` 도표는 ```세부 정보 인코딩```에서 생성되는 하위 범주에 대해 고유한 ```색 인코딩``` 결과를 계산하고 그 결과를 해당하는 세로 또는 가로 막대의 배경색으로 변환한 다음 [범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)에 일치 여부를 표시합니다. 두 가지 경우 모두 도표는 [차트 팔레트](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#general-chart-configuration)에서 색을 선택합니다. 예를 들어, [누적 세로 막대형 데모](/activereportsjs/demos/Reports/StackedColumnPlot/purejs)의 색 인코딩은 ```{ProductCategory}``` 식으로 설정됩니다. 따라서 보고서 출력에는 제품 범주를 해당 세로 막대 하위 섹션 배경과 일치시키는 [범례](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)가 표시됩니다. 대부분의 경우 ```세부 정보 인코딩``` 및 ```색 인코딩```에 동일한 구성을 사용하여 데이터 값 분석의 시각적 맵을 활성화합니다. *참고: ```색``` 속성은 컬렉션이지만 ```가로``` 및 ```세로 막대형``` 도표는 첫 번째 항목만 사용합니다.* ### 세로 막대형 및 가로 막대형의 모양 및 느낌 다음 속성을 사용하면 ```세로``` 및 ```가로 막대형``` 도표를 구성하는 직사각형 셰이프의 모양을 미세하게 조정할 수 있습니다. 세로 또는 가로 막대형 데모의 구성을 수정하여 그 결과를 실제로 확인할 수 있습니다. ```불투명도```는 가로 및 세로 막대의 불투명도를 결정하는 [숫자](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(%)입니다. ```100%```는 불투명한 상태를, ```0%```는 완전히 투명한 상태를 의미합니다. ```막대 설정```은 세로 및 가로 막대의 치수와 형태를 변경하는 데 사용할 수 있는 [숫자](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(%)의 조합입니다. **참고: 막대 설정을 구성하려면 보고서 탐색기에서 루트 차트 노드를 선택합니다.** * ```너비``` 속성은 도표에서 가로 또는 세로 축을 따라 포함 범주에 대해 할당한 크기를 기준으로 세로 막대의 너비 또는 가로 막대의 높이를 설정합니다. 이 값은 기본적으로 ```55%```입니다. ```누적 세로 막대형 데모``` 도표에서 이 값을 ```90%```로 설정해 보고 차이를 확인해 보십시오. * ```겹침``` 속성은 포함 범주의 크기를 기준으로 인접하는 세로 또는 가로 막대 사이의 간격을 설정합니다. * ```목 높이``` 속성은 포함 세로 또는 가로 막대를 ```위쪽 너비```와 ```아래쪽 너비``` 속성을 사용하여 설정할 수 있는, 너비 또는 높이가 다를 수 있는 두 부분으로 나뉩니다. 이 조합을 사용하면 세로 또는 가로 막대에 대해 글머리 기호와 같은 셰이프를 설정할 수 있습니다. 예를 들어, [묶은 세로 막대형 데모](/activereportsjs/demos/Reports/ClusteredColumnPlot/purejs) 도표에 대해 ```목 높이=60%, 아래쪽 너비=85%, 위쪽 너비=0%```를 설정해 보십시오. ```막대 선``` [부울](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar) 플래그는 동일한 ```세부 정보``` 또는 ```범주```(```세부 정보 인코딩```이 비어 있는 경우)에 속한 세로 막대와 가로 막대 사이에서 연결선을 표시하고 숨깁니다. ```오프셋```은 [숫자](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#scalar)(%)로, 단일 세로 막대 너비 또는 단일 가로 막대 높이를 기준으로 세로 막대형 및 가로 막대형 도표를 각각 오른쪽 또는 아래쪽으로 이동합니다. ```클리핑 모드```는 [도표 영역](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart#plot-area)이 도표를 이동하는 방식을 나타냅니다. * ```맞춤``` 값은 이동된 세로 막대 및 가로 막대를 맞추기 위해 도표 영역이 모든 가용 공간을 사용해야 함을 의미합니다. * ```자르기``` 값은 도표 영역이 오른쪽 또는 아래쪽 안쪽 여백의 가장자리에서 이동된 세로 막대 및 가로 막대를 절단함을 나타냅니다. * ```없음``` 값은 ```맞춤```과 동일합니다. ```배경색``` [식](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#expression)은 앞에서 설명한 ```색 인코딩```을 포함하여 다른 세로 및 가로 막대 배경 설정을 덮어씁니다. ```스타일``` 섹션에는 세로 및 가로 막대 테두리의 색, 스타일 및 두께를 설정할 수 있는 [선](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#line-properties) 속성이 있습니다. ### 도구 설명 및 레이블 템플릿 보고서 출력에서 다음 내용과 함께 세로 막대 및 가로 막대에 도구 설명과 레이블을 표시할 수 있습니다. 이 두 항목은 ```도구 설명 템플릿``` 및 ```레이블 텍스트 템플릿``` 식을 사용하여 각각 설정할 수 있습니다. 드롭다운 목록에서 다음 값 중 하나를 선택할 수 있습니다. * ```값 필드 이름```은 일반적으로 ```데이터 값```에 바인딩된 필드 이름을 의미합니다. * ```값 필드 값```은 포함 범주 또는 세부 정보 내 현재 ```데이터 값```을 의미합니다. * ```세부 정보의 백분율```은 ```세부 정보```가 동일한 모든 값 중에서 현재 ```데이터 값```의 점유율(%)을 의미합니다. * ```범주의 백분율```은 ```범주```가 동일한 모든 값 중에서 현재 ```데이터 값```의 점유율(%)을 의미합니다. * ```범주 필드 이름```은 일반적으로 ```범주 인코딩```에 바인딩된 필드 이름을 의미합니다. * ```범주 필드 값```은 현재 ```범주 인코딩``` 값을 의미합니다. * ```세부 정보 필드 이름```은 일반적으로 ```세부 정보 인코딩```에 바인딩된 필드 이름을 의미합니다. * ```세부 정보 필드 값```은 현재 ```세부 정보 인코딩``` 값을 의미합니다. * ```색 필드 이름```은 일반적으로 ```색 인코딩```에 바인딩된 필드 이름을 의미합니다. * ```색 필드 값```은 현재 ```색 인코딩``` 값을 의미합니다. 또한 템플릿의 [식 편집기](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#expression-editor)에서 [보간 구문](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions#interpolation-syntax)과 [서식이 지정된 지원되는 문자열](https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings)을 사용하여 이러한 값에 대한 서식을 설정할 수도 있습니다. 예를 들어, [누적 세로 막대형 데모](/activereportsjs/demos/Reports/StackedColumnPlot/purejs)에서 ```레이블 텍스트 템플릿```을 ```{valueField.value:C2}```로 설정하여 ```순 매출```을 통화로 표시할 수 있습니다. ![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/bb60cce7-9e37-4ea9-b603-2504fdc3a791/reportauthor-guide/Chart/LabelsFormat.png) ### 레이블 모양 ```레이블 텍스트``` 섹션의 [텍스트 속성](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#text-properties) 하위 집합 및 ```레이블 테두리``` 섹션의 [선 속성](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#line-properties)을 사용하면 도표 레이블의 해당하는 시각적 매개 변수를 설정할 수 있습니다. 픽셀로 표시되는 ```레이블 위치``` 및 선택적 ```오프셋```은 포함하는 세로 또는 가로 막대를 기준으로 레이블의 위치를 결정합니다. * ```내부``` \- 내부 가장자리에 * ```외부``` \- 외부 가장자리에 * ```가운데``` \- 가운데 * ```자동``` - ```외부```와 같음 ```겹치는 레이블``` 속성은 겹치는 레이블의 처리를 나타냅니다. 가능한 값은 다음과 같습니다. * ```자동``` \- 겹침을 방지하기 위해 일부 레이블을 숨깁니다. * ```표시``` \- 계속해서 겹치더라도 모든 레이블을 표시합니다. ```레이블 선``` 섹션의 [선 속성](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Common-Properties#line-properties)을 사용하면 레이블과 열 또는 막대의 가장자리 사이에 연결 선을 추가할 수 있습니다. ```레이블 선 위치```는 레이블의 경계 상자와 선의 연결 점을 결정합니다. * ```자동``` \- 자동으로 선택됨 * ```가운데``` \- 경계 상자측 가운데 ### 작업 이 속성은 보고서 구독자가 세로 또는 가로 막대를 클릭할 때 발생하는 [대화형 작업](/activereportsjs/docs/v2.1/ReportAuthorGuide/Interactivity#action-property)을 결정합니다. [바인딩된 필드 참조](/activereportsjs/docs/v2.1/ReportAuthorGuide/Expressions/references#data-set-fields)를 사용하여 드릴스루 보고서의 매개 변수를 전달하거나 동적 책갈피 또는 URL을 구성할 수 있습니다. 필드 값은 현재 세부 정보 또는 범주의 범위 내에서 평가됩니다. 자세한 내용은 [드릴스루 보고서 연습](/activereportsjs/docs/v2.1/ReportAuthorGuide/Get-Started-With-DrillThrough-Reports)을 참조하십시오.