# 드릴스루 보고서 시작하기

## Content

### 소개

드릴스루 보고서를 사용하면 보고서 구독자는 매개 변수화된 링크를 클릭하여 일련의 보고서 간에 앞/뒤로 이동할 수 있습니다. 이러한 탐색은 일반적으로 항목 요약을 표시하는 주 보고서와 특정 항목에 대한 세부 정보를 제공하는 하위 보고서로 구성됩니다. ActiveReportsJS에서 보고서 작성자는 보고서 항목 또는 보고서의 일부분에 대해 [보고서로 이동](/activereportsjs/docs/ReportAuthorGuide/Interactivity#jump-to-report) 작업을 구성하여 드릴스루 링크를 만듭니다.

이 자습서에서는 판매 차트 드릴스루를 처음부터 만들어 보면서 일반적인 보고서 디자인 과정을 경험해 볼 것입니다. 학습을 마치면 다음을 수행할 수 있습니다.

* 새 보고서 작성
* 여러 끝점을 사용하여 보고서를 OData API에 바인딩
* OData [$select](https://www.odata.org/getting-started/basic-tutorial/#select) 및 [$filter](https://www.odata.org/getting-started/basic-tutorial/#filter) 쿼리 옵션을 사용하여 검색된 데이터의 볼륨 줄이기
* [꺾은선형 차트](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/line-chart) 및 [누적 세로 막대형 차트](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column#stacked-column-and-bar) 작성
* [보고서 탐색기](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#report-explorer)를 사용하여 보고서 계층 구조 탐색
* [조회](/activereportsjs/docs/ReportAuthorGuide/Expressions/Functions/miscellaneous#lookup) 함수를 사용하여 여러 데이터 집합의 데이터 표시
* 주 보고서와 하위 보고서 간에 매개 변수화된 드릴스루 탐색 설정
* [보고서 뷰어](/activereportsjs/docs/ReportAuthorGuide/Report-Viewer-Interface)의 `갤러리 모드` 및 `기록` 기능 사용

모든 자습서 단계를 완료하면 최종 보고서는 [라이브 데모](/activereportsjs/demos/Reports/GetStartedWithDrillThroughReports/purejs)와 같이 표시됩니다.

### 필수 구성 요소

아래 내용에서는 독립 실행형 보고서 디자이너가 실행 중이라고 가정합니다. 자세한 내용은 [자습서](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App)를 참조하십시오. 또한 [데모 데이터 허브](https://demodata.grapecity.com)에 액세스하려면 안정적인 인터넷 연결이 필요합니다.

### 새 보고서 작성

독립 실행형 보고서 디자이너에서 [파일 메뉴](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App)를 클릭하고 새로 작성한 보고서를 위한 [연속 페이지 레이아웃](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/Report-Layouts) 템플릿을 선택합니다. 보고서 레이아웃에서 회색 영역 중 아무 곳이나 클릭하면 [속성 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface)에서 보고서 속성이 로드됩니다. `여백` 섹션에서 `스타일` 속성을 `좁게`로 설정하여 [보고서 페이지](/activereportsjs/docs/ReportAuthorGuide/보고서-구성/layout-properties) 여백 크기를 변경합니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 새 보고서 작성 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/CreatingNewReport.gif)
DOC-DETAILS-TAG-CLOSE

### 데이터 바인딩

[데이터 바인딩](/activereportsjs/docs/ReportAuthorGuide/Databinding)은 보고서와 보고서에 표시되는 데이터 간 연결을 구축합니다. 이 자습서에서는 Contoso라는 가상의 회사에 대한 매출 데이터가 포함된 [GrapeCity 데모 OData API](https://demodata.grapecity.com/swagger/index.html?urls.primaryName=OData%20Contoso)를 사용합니다. 이 회사는 100,000개가 넘는 제품을 제조 및 판매하고 지원하는 조직입니다.

### 데이터 소스 추가

[Contoso OData API](https://demodata.grapecity.com/swagger/index.html?urls.primaryName=OData%20Contoso)는 루트 URL `https://demodata.grapecity.com/contoso/odata/v1`을 사용하여 연결할 수 있고, [/DimCustomers](https://demodata.grapecity.com/contoso/odata/v1/DimCustomers), [/DimStores](https://demodata.grapecity.com/contoso/odata/v1/DimStores) 및 [/DimProducts](https://demodata.grapecity.com/contoso/odata/v1/DimProducts)와 같은 끝점으로 표시되는 여러 "표"가 있는 "데이터베이스"로 생각할 수 있습니다. 다음 단계에 따라 해당 "데이터베이스"에 대한 연결을 설정하는 보고서 데이터 소스를 만들 수 있습니다.

* 속성 검사자의 [데이터 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#data-panel)을 열고 `추가` 버튼을 클릭합니다.
* 데이터 소스 편집기 대화 상자의 이름 필드에 `Contoso`를, 끝점 필드에 `https://demodata.grapecity.com/contoso/odata/v1`을 입력합니다.
* `변경 사항 저장` 버튼을 클릭합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 데이터 소스 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/AddingDataSource.gif)
DOC-DETAILS-TAG-CLOSE

### 데이터 집합 추가

데이터 집합은 데이터 소스 끝점을 한 개 이상 나타냅니다. 드릴스루 판매 보고서의 경우 이전 섹션에서 추가한 Contoso 데이터 소스의 [/DimChannels](https://demodata.grapecity.com/contoso/odata/v1/DimChannels) 및 [/FactSales](https://demodata.grapecity.com/contoso/odata/v1/FactSales) 끝점에서 데이터에 액세스해야 합니다.

다음 단계에 따라 `채널` 데이터 집합을 추가하십시오.

* 데이터 패널에서 `Contoso` 근처에 있는 `+` 아이콘을 클릭합니다.
* 데이터 집합 편집기 대화 상자의 이름 필드에는 `Channels`를, Uri/경로 필드에는 `/DimChannels`를, `Json 경로` 필드에는 `$.value.*`를 입력합니다.
* 기본적으로 각 `채널` 레코드에는 7개의 필드가 포함되어 있지만 모두 필요하지는 않습니다. 따라서 쿼리 매개 변수를 통해 OData [$select 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#select)을 적용하여 검색되는 필드를 제한합니다.
    * `매개 변수` 섹션의 오른쪽에 있는 `+` 아이콘을 클릭합니다.
    * 새로 추가된 `매개 변수` 항목의 `매개 변수` 필드에 `$select`를 입력합니다.
    * 동일한 `매개 변수` 항목의 `값` 필드에 `ChannelKey, ChannelName`을 입력합니다.
* `유효성 검사` 버튼을 클릭합니다.
* `데이터베이스 필드` 섹션에 위에서 입력한 `[2개 항목]`에 해당하는 텍스트가 표시되는지 확인합니다.
* `변경 사항 저장` 버튼을 클릭합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 채널 데이터 집합 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/AddingDataSet.gif)
DOC-DETAILS-TAG-CLOSE
다음으로, 동일한 방식으로 `판매` 데이터 집합을 추가합니다.

* 데이터 패널에서 `Contoso` 근처에 있는 `+` 아이콘을 클릭합니다.
* 데이터 집합 편집기 대화 상자의 이름 필드에는 `Sales`를, Uri/경로 필드에는 `/FactSales`를, Json 경로 필드에는 `$.value.*`를 입력합니다.
* 기본적으로 각 `FactSales` 레코드에는 19개의 필드가 포함되어 있지만 모두 필요하지는 않습니다. 따라서 쿼리 매개 변수를 통해 OData [$select 쿼리 옵션](https://www.odata.org/getting-started/basic-tutorial/#select)을 적용하여 검색되는 필드를 제한합니다.
    * `매개 변수` 섹션의 오른쪽에 있는 `+` 아이콘을 클릭합니다.
    * 새로 추가된 `매개 변수` 항목의 `매개 변수` 필드에 `$select`를 입력합니다.
    * 동일한 `매개 변수` 항목의 `값` 필드에 `DateKey, ChannelKey, SalesAmount`를 입력합니다.
* `유효성 검사` 버튼을 클릭합니다.
* `데이터베이스 필드` 섹션에 위에서 입력한 `[3개 항목]`에 해당하는 텍스트가 표시되는지 확인합니다.
* `변경 사항 저장` 버튼을 클릭합니다.

### 보고서 템플릿 저장

작성한 보고서 템플릿은 주 보고서와 하위 보고서를 작성하기 위한 시작 지점입니다. 따라서 이 템플릿을 다음 두 파일로 저장해 두면 편리합니다.

* 독립 실행형 보고서 디자이너에서 [파일 메뉴](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App#file-menu)를 연 다음 세로 막대에서 `다른 이름으로 저장` 항목을 클릭하고 선택한 디렉터리에 `DrillThroughMainReport.rdlx-json`이라는 이름으로 보고서를 저장합니다.
* 동일한 작업을 반복하여 보고서 템플릿을 같은 디렉터리에 `DrillThroughSubReport.rdlx-json`으로 저장합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 보고서 템플릿 저장 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/SavingReportTemplates.gif)
DOC-DETAILS-TAG-CLOSE

### 하위 보고서 매개 변수 추가

주 보고서와 하위 보고서 간 드릴스루 링크에는 다음 두 가지 속성이 있습니다.

* 하위 보고서 이름
* 하위 보고서 [매개 변수](/activereportsjs/docs/ReportAuthorGuide/Report-Parameters) 값의 컬렉션

하위 보고서는 이러한 매개 변수 값을 수락하고 이에 따라 시각화된 데이터를 필터링합니다.

이 단계에서는 `DrillThroughSubReport.rdlx-json` 보고서에 표시되는 데이터를 필터링하는 매개 변수 2개를 추가합니다.

* 데이터 패널에서 `매개 변수` 섹션의 `+ 추가` 버튼을 클릭합니다.
* `이름` 필드에 `SalesYear`를 입력합니다.
* `데이터 유형` 드롭다운에서 `정수`를 선택합니다.
* `숨김` 스위치를 클릭하여 입력한 매개 변수가 보고서 구독자에게 표시되지 않도록 합니다.
* `기본값` 섹션에서 `쿼리 안 됨` 탭을 선택하고 `값` 컬렉션을 확장한 다음 `항목 추가` 버튼을 클릭하고 새로 추가된 필드에 `2007`을 입력합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 SalesYear 매개 변수 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/AddingParameter.gif)
DOC-DETAILS-TAG-CLOSE
동일한 방식으로 `ChannelKey` 매개 변수를 추가합니다.

* `매개 변수 편집` 헤더 근처에 있는 `왼쪽 화살표` 아이콘을 클릭합니다.
* 데이터 패널에서 매개 변수 섹션의 `+ 추가` 버튼을 클릭합니다.
* `이름` 필드에 `ChannelKey`를 입력합니다.
* `데이터 유형` 드롭다운에서 `정수`를 선택합니다.
* `숨김` 스위치를 클릭하여 입력한 매개 변수가 보고서 구독자에게 표시되지 않도록 합니다.
* `기본값` 섹션에서 `쿼리 안 됨` 탭을 선택하고 `값` 컬렉션을 확장한 다음 `항목 추가` 버튼을 클릭하고 새로 추가된 필드에 `2`를 입력합니다.

### 하위 보고서 데이터 집합 수정

`DrillThroughSubReport.rdlx-json`에는 지정된 판매 연도 및 채널에 대한 월별 판매 데이터가 표시되어야 합니다. 따라서 쿼리 매개 변수에서 [$filter](https://www.odata.org/getting-started/basic-tutorial/#filter) 옵션을 추가하여 `Sales` 데이터 집합을 수정해야 합니다.

* `매개 변수 편집` 헤더 근처에 있는 `왼쪽 화살표` 아이콘을 클릭합니다.
* 데이터 패널에서 `판매` 근처에 있는 `연필` 모양 아이콘을 클릭합니다.
* `매개 변수` 섹션의 오른쪽에 있는 `+` 아이콘을 클릭합니다.
* 새로 추가된 `매개 변수` 항목의 `매개 변수` 필드에 `$filter`를 입력합니다
* 동일한 `매개 변수` 항목의 `값` 필드에 `ChannelKey+eq+{@ChannelKey}+and+Year(DateKey)+eq+{@SalesYear}`를 입력합니다.
* `유효성 검사` 버튼을 클릭합니다.
* 나타나는 매개 변수 프롬프트에서 `@ChannelKey` 필드에는 `2`, `@SalesYear` 필드에는 `2007`을 입력하고 `저장 후 실행` 버튼을 클릭합니다.
* `데이터베이스 필드` 섹션에 위에서 입력한 `[3개 항목]`에 해당하는 텍스트가 표시되는지 확인합니다.

### 꺾은선형 차트 추가

월별 판매 데이터를 표시하기 위해 [꺾은선형 차트](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/line-chart)를 사용합니다.

* 도구 모음 왼쪽에 있는 `햄버거` 메뉴를 사용하여 [도구 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#toolbox)를 확장합니다.
* `차트` 항목을 도구 상자에서 보고서 페이지 영역의 왼쪽 위로 끌어 놓습니다.
* 속성 검사자에서 [속성 패널](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#properties-panel)로 전환합니다.
* `도표 템플릿` 드롭다운 메뉴에서 `꺾은선형` 항목을 선택합니다. 속성 패널에 [차트 도표](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot)의 속성이 자동으로 표시됩니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 꺽은선형 차트 추가 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/AddingLineChart.gif)
DOC-DETAILS-TAG-CLOSE

### 꺾은선형 차트 도표 구성

도표 속성은 차트 내 실제 데이터의 시각화를 정의합니다. 다음 단계에 따라 꺾은선형 차트 도표를 구성하십시오.

* 속성 패널에서 오른쪽에 있는 `목록` 아이콘을 사용하여 `값` 편집기를 확장합니다.
* `항목 추가` 버튼을 클릭하고 오른쪽에 있는 `톱니 모양` 아이콘을 사용하여 새로 추가된 값 편집기를 엽니다.
* 오른쪽에 있는 `목록` 아이콘을 사용하여 `값` 목록을 확장합니다.
* 기본값의 오른쪽에 있는 회색 상자를 클릭하고 드롭다운 메뉴에서 `SalesAmount` 요소를 선택합니다.
* `집계` 드롭다운에서 `합계`를 선택합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 도표 값 구성 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/ConfiguringLineChartPlot.gif)
DOC-DETAILS-TAG-CLOSE
같은 방식으로 도표 범주를 구성합니다.

* `값 속성` 헤더 근처에 있는 `왼쪽 화살표` 아이콘을 사용하여 도표 속성으로 되돌아갑니다.
* 오른쪽에 있는 `목록` 아이콘을 사용하여 `인코딩` 섹션에서 `범주` 편집기를 확장합니다.
* 기본 범주 필드에 `{MonthName(Month(DateKey))}`를 입력합니다.
* `범주 정렬 식` 필드에 `{Month(DateKey)}`를 입력합니다.
* `범주 정렬 방향` 드롭다운에서 `오름차순`을 선택합니다.

따라서 도표에 많은 `DateKey` 값에서 추출한 각 월에 대한 판매 금액 합계가 표시됩니다. 월은 1월부터 12월까지 자연스러운 순서대로 나타납니다.

다음으로 선 모양을 구성합니다.

* `스타일` 섹션까지 아래로 스크롤하고 `선 색`을 `검은색`으로, `선 두께`를 `2pt`로 설정합니다.
* `기호` 섹션에서 `기호 셰이프` 속성에 대해 `점선`을, `배경색` 속성에 대해 `흰색`을, `스타일` 속성에 대해 `단색`을 선택합니다.

이제 보고서 출력을 [미리 보고](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App#preview-button) 방금 구성한 도표에서 선과 연결된 점을 사용하여 월별 판매가 어떻게 표시되는지 확인할 수 있습니다.

### 꺾은선형 차트 모양 구성

[보고서 탐색기](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#report-explorer)에서는 편리한 방법으로 보고서의 여러 부분을 탐색하고 수정을 위해 보고서 속성을 로드할 수 있습니다. 도구 상자에서 `탐색기` 아이콘을 클릭하고 탐색기 패널을 고정합니다. 보고서 계층 구조를 볼 수 있는데, 노드를 선택하면 속성 패널에 해당 속성이 나타납니다. `차트` 항목을 클릭하고 속성 패널에서 `너비` 속성을 `7.5in`로, `높이` 속성을 `6in`로 설정합니다.
DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 차트 차원 설정 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/SettingChartDimensions.gif)
DOC-DETAILS-TAG-CLOSE
비슷한 방식으로, 아래 표에 따라 `X 축 - [도표 1]` 및 `Y 축 - [도표 1]` 차트 하위 항목의 속성을 설정합니다. 이러한 속성에 대한 자세한 내용은 [차트 축](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/axes) 문서를 참조하십시오.

**X 축 - [도표 1]**

| 속성 | 값 |
| --- | --- |
| 제목 | 빈 문자열(기본값 재설정) |
| 선 표시 | False |
| 레이블 색 | #1a1a1a |
| 레이블 각도 | -45 |
| 주 눈금선/눈금선 표시 | True |
| 주 눈금선/두께 | 0.25pt |
| 주 눈금선/색 | #ccc |

**Y 축 - [도표 1]**

| 속성 | 값 |
| --- | --- |
| 제목 | 빈 문자열(기본값 재설정) |
| 선 표시 | False |
| 레이블 색 | #1a1a1a |
| 레이블 형식 | c2(드롭다운에서 통화 선택) |
| 주 눈금선/눈금선 표시 | True |
| 주 눈금선/두께 | 0.25pt |
| 주 눈금선/색 | 옅은 회색 |
| 주 눈금선/주 간격 | 20000 |

차트는 디자인 타임에서 왜곡된 것처럼 보일 수 있는데, 출력되는 보고서를 미리 보고 정확하게 표시되는지 확인할 수 있습니다.

### 꺾은선형 차트 헤더 구성

차트 헤더에는 데이터의 판매 채널 및 연도에 대한 정보가 표시되어야 합니다. 이러한 값은 보고서 매개 변수 값으로 사용할 수 있으므로, `Monthly {@ChannelKey} Sales in {@SalesYear}` [식](/activereportsjs/docs/ReportAuthorGuide/Expressions)을 사용할 수 있으며, `ChannelKey`는 정수 값이고 실제 판매 채널 이름을 표시하려고 합니다. [Lookup](/activereportsjs/docs/ReportAuthorGuide/Expressions/Functions/miscellaneous#lookup) 함수를 사용하여 키로 채널 이름을 확인합니다.

* 보고서 탐색기에서 `Chart1 -> 헤더` 항목을 클릭합니다.
* `캡션` 속성을 `Monthly {Lookup(@ChannelKey, ChannelKey, ChannelName, "Channels")} Sales in {@SalesYear}` 식으로 설정합니다. `Lookup` 함수는 첫 번째 인수의 값(`ChannelKey` 매개 변수 값)을 가져오고, `Channels` 데이터 집합에서 `ChannelKey`가 동일한 행을 찾아 해당하는 `ChannelName`을 반환합니다.
* 또한 차트 헤더의 `텍스트 색`을 `#3da7a8`로, `글꼴 크기`를 `22pt`로, `글꼴 두께`를 `굵게`로 설정합니다.

보고서 출력을 미리 보고 차트 헤더에 `2007년의 월별 온라인 판매`가 표시되는지 확인할 수 있습니다.

드릴스루 하위 보고서 구성을 마쳤습니다. 보고서 디자인으로 돌아가 독립 실행형 보고서 디자이너의 [저장 버튼](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App#open-save-and-save-as-buttons)을 사용하여 진행 상황을 저장합니다.

다음으로, [파일 메뉴](/activereportsjs/docs/ReportAuthorGuide/QuickStart/Get-Started-With-Designer-App#file-menu)의 `열기` 버튼을 사용하여 이전에 저장한 `DrillThroughMainReport.rdlx-json`을 엽니다.

### 누적 세로 막대형 차트 추가 및 해당 차트의 도표, 모양, 헤더 구성

드릴다운 탐색의 주 보고서에서는 [누적 세로 막대형 차트](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column#stacked-column-and-bar)를 사용하여 연간 판매 데이터를 표시합니다.

* 도구 모음 왼쪽에 있는 `햄버거` 메뉴를 사용하여 [도구 상자](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#toolbox)를 확장합니다.
* `차트` 항목을 도구 상자에서 보고서 페이지 영역의 왼쪽 위로 끌어 놓습니다.
* 속성 검사자에서 속성 패널로 전환합니다.
* `도표 템플릿` 드롭다운 메뉴에서 `누적 세로 막대형`을 선택합니다. 속성 패널에 차트 도표 속성이 자동으로 표시됩니다.
* 속성 패널에서 오른쪽에 있는 `목록` 아이콘을 사용하여 `값` 편집기를 확장합니다.
* `항목 추가` 버튼을 클릭하고 오른쪽에 있는 `톱니 모양` 아이콘을 사용하여 새로 추가된 값 편집기를 엽니다.
* 오른쪽에 있는 `목록` 아이콘을 사용하여 `값` 목록을 확장합니다.
* 기본값의 오른쪽에 있는 회색 상자를 클릭하고 드롭다운 메뉴에서 `SalesAmount` 요소를 선택합니다.
* `집계` 드롭다운에서 `합계`를 선택합니다.
* `값 속성` 헤더 근처에 있는 `왼쪽 화살표` 아이콘을 사용하여 도표 속성으로 되돌아갑니다.
* 오른쪽에 있는 `목록` 아이콘을 사용하여 `인코딩` 섹션에서 `범주` 편집기를 확장합니다.
* 기본 범주 필드에 `{Year(DateKey)}`를 입력합니다.
* `범주 정렬 식` 필드에 `{Year(DateKey)}`를 입력합니다.
* `범주 정렬 방향` 드롭다운에서 `오름차순`을 선택합니다.

위의 `꺾은선형 차트 모양 구성` 섹션에서 설명한 것처럼 보고서 탐색기를 사용하여 `Chart1` 항목에 대해 다음 속성을 설정합니다.

| 속성 | 값 |
| --- | --- |
| 너비 | 7.5in |
| 높이 | 7.5in |

`X 축 - [도표 1]` 항목의 경우:

| 속성 | 값 |
| --- | --- |
| 제목 | 빈 문자열(기본값 재설정) |
| 선 표시 | False |

`Y 축 - [도표 1]` 항목의 경우:

| 속성 | 값 |
| --- | --- |
| 제목 | 빈 문자열(기본값 재설정) |
| 선 표시 | False |
| 레이블 색 | #3c3c3c |
| 레이블 형식 | c2(드롭다운에서 통화 선택) |
| 주 눈금선/눈금선 표시 | True |
| 주 눈금선/두께 | 0.25pt |
| 주 눈금선/스타일 | 파선 |
| 주 눈금선/색 | #ccc |
| 주 눈금선/주 간격 | 50000 |

`헤더` 항목의 경우:

| 속성 | 값 |
| --- | --- |
| 캡션 | 채널별 연간 판매 |
| 글꼴 크기 | 20pt |
| 글꼴 두께 | 굵게 |

### 누적 세로 막대형 차트 세부 정보 구성

이제 보고서 출력을 미리 보고 매년 판매 합계가 표시된 것을 확인할 수 있지만, 판매 채널 간에 각 열을 분할하고 범례를 표시해야 합니다. 이 작업을 위해 [세부 정보 인코딩](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column#details-encoding), [색 인코딩](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column#colors-encoding), [범례 구성](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)을 사용합니다.

* 보고서 디자인으로 돌아가 보고서 탐색기에서 `도표` 항목을 선택합니다.
* 오른쪽에 있는 `목록` 아이콘을 사용하여 `인코딩` 섹션에서 `세부 정보` 편집기를 확장합니다.
* `항목 추가` 버튼을 클릭하고 오른쪽에 있는 `톱니 모양` 아이콘을 사용하여 새로 추가된 값 편집기를 엽니다.
* 오른쪽에 있는 `목록` 아이콘을 사용하여 `값` 목록을 확장합니다.
* 기본값의 오른쪽에 있는 회색 상자를 클릭하고 드롭다운 메뉴에서 `ChannelKey` 요소를 선택합니다.
* `세부 정보 속성` 헤더 근처에 있는 `왼쪽 화살표` 아이콘을 사용하여 도표 속성으로 되돌아갑니다.
* 오른쪽에 있는 `목록` 아이콘을 사용하여 `인코딩` 섹션에서 `색` 편집기를 확장합니다.
* `항목 추가` 버튼을 클릭하고 새로 추가된 항목 필드에 `{Lookup(ChannelKey, ChannelKey, ChannelName, "Channels")}`를 입력합니다. 이와 같이 `Lookup` 함수를 사용하는 것은 앞에서 설명한 꺾은선형 차트 헤더에 대해 사용하는 것과 유사합니다.
* 보고서 탐색기에서 `범례 - 색` 항목을 선택합니다.
* `레이아웃` 섹션에서 `방향` 속성을 `가로`로, `위치` 속성을 `위쪽`으로 설정합니다.

### 도표 레이블 및 도구 설명 표시

이제 보고서 출력을 미리 보고 각 열이 판매 채널에 해당하는 컬러 부분 4개로 분할된 것을 확인할 수 있습니다. 범례를 보면 색과 채널 이름을 연결할 수 있습니다. 데이터 시각화를 개선하기 위해 [도표 레이블과 도구 설명](/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot/column#tooltip-and-labels-template) 모양을 구성합니다.

* 보고서 디자인으로 돌아가 보고서 탐색기에서 `도표` 항목을 선택합니다.
* `공통` 섹션의 `도구 설명 템플릿` 드롭다운에서 `색 필드 값` 항목을 선택합니다.
* 속성 패널의 `레이블 텍스트` 섹션에서 `템플릿` 편집기 오른쪽에 있는 회색 상자를 클릭하고 `식...` 항목을 선택합니다. [식 편집기](/activereportsjs/docs/ReportAuthorGuide/Report-Designer-Interface#expression-editor)가 나타납니다. 식 텍스트 영역에 `{valueField.value:C2}`를 입력하고 `저장` 버튼을 클릭합니다.
* `레이블 텍스트/위치` 속성을 `가운데`로 설정합니다.

DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 도표 도구 설명 및 레이블 구성 보기
DOC-SUMMARY-TAG-CLOSE
![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/4ed8c11f-8d09-4226-9c37-dd4595797443/reportauthor-guide/GetStartedWithDrillThroughReports/ConfiguringTemplatesAndLabels.gif)
DOC-DETAILS-TAG-CLOSE
이제 보고서 출력을 미리 보고 차트 열에 각 채널 및 연도에 대한 판매 금액이 표시되고, 열에 마우스를 올려놓으면 채널 이름 도구 설명이 표시되는 것을 확인할 수 있습니다.

### 드릴스루 링크 구성

마지막으로, 탐색을 위해 주 보고서와 하위 보고서 간에 링크를 구성합니다.

* 보고서 디자인으로 돌아가 보고서 탐색기에서 `도표` 항목을 선택합니다.
* `작업` 섹션의 `유형` 편집기에서 `보고서로 이동`을 선택합니다.
* `보고서로 이동` 편집기에서 `DrillThroughSubReport.rdlx-json` 항목을 선택합니다.
* 오른쪽에 있는 `목록` 아이콘을 사용하여 `매개 변수` 편집기를 확장합니다.
* `항목 추가` 버튼을 클릭하고 오른쪽에 있는 `톱니 모양` 아이콘을 사용하여 새로 추가된 값 편집기를 엽니다.
* `매개 변수 이름` 필드에 `ChannelKey`를 입력하고 `값` 드롭다운에서 `ChannelKey` 항목을 선택합니다.
* `매개 변수 속성` 헤더 근처에 있는 `왼쪽 화살표` 아이콘을 사용하여 도표 속성으로 되돌아갑니다.
* 유사한 방법으로 `SalesYear`를 이름으로, `{Year(DateKey)}`를 값으로 사용하여 다른 매개 변수를 추가합니다.

이제 보고서 출력을 미리 보고 아무 열이나 클릭하면 보고서 뷰어에 선택한 판매 연도 및 채널에 대한 세부 데이터가 드릴스루 구성에 따라 표시된 하위 보고서가 열립니다. `내역에서 이전 항목으로 돌아가기` [보고서 뷰어 도구 모음](/activereportsjs/docs/ReportAuthorGuide/Report-Viewer-Interface#toolbar) 버튼을 사용하여 돌아갈 수 있습니다. 또한 오른쪽 끝에 있는 `갤러리 모드` 버튼을 클릭할 수도 있습니다. 그러면 뷰어 모드를 전환하여 드릴스루 보고서를 읽기에 적합한, 페이지가 매겨지지 않은 출력을 표시합니다.

최종 보고서 버전은 [데모 웹 사이트](/activereportsjs/demos/Reports/GetStartedWithDrillThroughReports/purejs)에서 확인할 수 있습니다.