DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 새 보고서 작성 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 데이터 바인딩 [데이터 바인딩](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/v2.1/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
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
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/v2.1/ReportAuthorGuide/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
DOC-DETAILS-TAG-CLOSE
### 하위 보고서 매개 변수 추가 주 보고서와 하위 보고서 간 드릴스루 링크에는 다음 두 가지 속성이 있습니다. * 하위 보고서 이름 * 하위 보고서 [매개 변수](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Parameters) 값의 컬렉션 하위 보고서는 이러한 매개 변수 값을 수락하고 이에 따라 시각화된 데이터를 필터링합니다. 이 단계에서는 ```DrillThroughSubReport.rdlx-json``` 보고서에 표시되는 데이터를 필터링하는 매개 변수 2개를 추가합니다. * 데이터 패널에서 ```매개 변수``` 섹션의 ```+ 추가``` 버튼을 클릭합니다. * ```이름``` 필드에 ```SalesYear```를 입력합니다. * ```데이터 유형``` 드롭다운에서 ```정수```를 선택합니다. * ```숨김``` 스위치를 클릭하여 입력한 매개 변수가 보고서 구독자에게 표시되지 않도록 합니다. * ```기본값``` 섹션에서 ```쿼리 안 됨``` 탭을 선택하고 ```값``` 컬렉션을 확장한 다음 ```항목 추가``` 버튼을 클릭하고 새로 추가된 필드에 ```2007```을 입력합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 SalesYear 매개 변수 추가 보기DOC-SUMMARY-TAG-CLOSE
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/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/line-chart)를 사용합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 [도구 상자](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#toolbox)를 확장합니다. * ```차트``` 항목을 도구 상자에서 보고서 페이지 영역의 왼쪽 위로 끌어 놓습니다. * 속성 검사자에서 [속성 패널](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#properties-panel)로 전환합니다. * ```도표 템플릿``` 드롭다운 메뉴에서 ```꺾은선형``` 항목을 선택합니다. 속성 패널에 [차트 도표](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/plot)의 속성이 자동으로 표시됩니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 꺽은선형 차트 추가 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
### 꺾은선형 차트 도표 구성 도표 속성은 차트 내 실제 데이터의 시각화를 정의합니다. 다음 단계에 따라 꺾은선형 차트 도표를 구성하십시오. * 속성 패널에서 오른쪽에 있는 ```목록``` 아이콘을 사용하여 ```값``` 편집기를 확장합니다. * ```항목 추가``` 버튼을 클릭하고 오른쪽에 있는 ```톱니 모양``` 아이콘을 사용하여 새로 추가된 값 편집기를 엽니다. * 오른쪽에 있는 ```목록``` 아이콘을 사용하여 ```값``` 목록을 확장합니다. * 기본값의 오른쪽에 있는 회색 상자를 클릭하고 드롭다운 메뉴에서 ```SalesAmount``` 요소를 선택합니다. * ```집계``` 드롭다운에서 ```합계```를 선택합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 도표 값 구성 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
같은 방식으로 도표 범주를 구성합니다. * ```값 속성``` 헤더 근처에 있는 ```왼쪽 화살표``` 아이콘을 사용하여 도표 속성으로 되돌아갑니다. * 오른쪽에 있는 ```목록``` 아이콘을 사용하여 ```인코딩``` 섹션에서 ```범주``` 편집기를 확장합니다. * 기본 범주 필드에 ```{MonthName(Month(DateKey))}```를 입력합니다. * ```범주 정렬 식``` 필드에 ```{Month(DateKey)}```를 입력합니다. * ```범주 정렬 방향``` 드롭다운에서 ```오름차순```을 선택합니다. 따라서 도표에 많은 ```DateKey``` 값에서 추출한 각 월에 대한 판매 금액 합계가 표시됩니다. 월은 1월부터 12월까지 자연스러운 순서대로 나타납니다. 다음으로 선 모양을 구성합니다. * ```스타일``` 섹션까지 아래로 스크롤하고 ```선 색```을 ```검은색```으로, ```선 두께```를 ```2pt```로 설정합니다. * ```기호``` 섹션에서 ```기호 셰이프``` 속성에 대해 ```점선```을, ```배경색``` 속성에 대해 ```흰색```을, ```스타일``` 속성에 대해 ```단색```을 선택합니다. 이제 보고서 출력을 [미리 보고](/activereportsjs/docs/v2.1/ReportAuthorGuide/Get-Started-With-Designer-App#preview-button) 방금 구성한 도표에서 선과 연결된 점을 사용하여 월별 판매가 어떻게 표시되는지 확인할 수 있습니다. ### 꺾은선형 차트 모양 구성 [보고서 탐색기](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#report-explorer)에서는 편리한 방법으로 보고서의 여러 부분을 탐색하고 수정을 위해 보고서 속성을 로드할 수 있습니다. 도구 상자에서 ```탐색기``` 아이콘을 클릭하고 탐색기 패널을 고정합니다. 보고서 계층 구조를 볼 수 있는데, 노드를 선택하면 속성 패널에 해당 속성이 나타납니다. ```차트``` 항목을 클릭하고 속성 패널에서 ```너비``` 속성을 ```7.5in```로, ```높이``` 속성을 ```6in```로 설정합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 차트 차원 설정 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
비슷한 방식으로, 아래 표에 따라 ```X 축 - [도표 1]``` 및 ```Y 축 - [도표 1]``` 차트 하위 항목의 속성을 설정합니다. 이러한 속성에 대한 자세한 내용은 [차트 축](/activereportsjs/docs/v2.1/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/v2.1/ReportAuthorGuide/Expressions)을 사용할 수 있으며, ```ChannelKey```는 정수 값이고 실제 판매 채널 이름을 표시하려고 합니다. [Lookup](/activereportsjs/docs/v2.1/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/v2.1/ReportAuthorGuide/Get-Started-With-Designer-App#open-save-and-save-as-buttons)을 사용하여 진행 상황을 저장합니다. 다음으로, [파일 메뉴](/activereportsjs/docs/v2.1/ReportAuthorGuide/Get-Started-With-Designer-App#file-menu)의 ```열기``` 버튼을 사용하여 이전에 저장한 ```DrillThroughMainReport.rdlx-json```을 엽니다. ### 누적 세로 막대형 차트 추가 및 해당 차트의 도표, 모양, 헤더 구성 드릴다운 탐색의 주 보고서에서는 [누적 세로 막대형 차트](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/column#stacked-column-and-bar)를 사용하여 연간 판매 데이터를 표시합니다. * 도구 모음 왼쪽에 있는 ```햄버거``` 메뉴를 사용하여 [도구 상자](/activereportsjs/docs/v2.1/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/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/column#details-encoding), [색 인코딩](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/column#colors-encoding), [범례 구성](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/legend)을 사용합니다. * 보고서 디자인으로 돌아가 보고서 탐색기에서 ```도표``` 항목을 선택합니다. * 오른쪽에 있는 ```목록``` 아이콘을 사용하여 ```인코딩``` 섹션에서 ```세부 정보``` 편집기를 확장합니다. * ```항목 추가``` 버튼을 클릭하고 오른쪽에 있는 ```톱니 모양``` 아이콘을 사용하여 새로 추가된 값 편집기를 엽니다. * 오른쪽에 있는 ```목록``` 아이콘을 사용하여 ```값``` 목록을 확장합니다. * 기본값의 오른쪽에 있는 회색 상자를 클릭하고 드롭다운 메뉴에서 ```ChannelKey``` 요소를 선택합니다. * ```세부 정보 속성``` 헤더 근처에 있는 ```왼쪽 화살표``` 아이콘을 사용하여 도표 속성으로 되돌아갑니다. * 오른쪽에 있는 ```목록``` 아이콘을 사용하여 ```인코딩``` 섹션에서 ```색``` 편집기를 확장합니다. * ```항목 추가``` 버튼을 클릭하고 새로 추가된 항목 필드에 ```{Lookup(ChannelKey, ChannelKey, ChannelName, "Channels")}```를 입력합니다. 이와 같이 ```Lookup``` 함수를 사용하는 것은 앞에서 설명한 꺾은선형 차트 헤더에 대해 사용하는 것과 유사합니다. * 보고서 탐색기에서 ```범례 - 색``` 항목을 선택합니다. * ```레이아웃``` 섹션에서 ```방향``` 속성을 ```가로```로, ```위치``` 속성을 ```위쪽```으로 설정합니다. ### 도표 레이블 및 도구 설명 표시 이제 보고서 출력을 미리 보고 각 열이 판매 채널에 해당하는 컬러 부분 4개로 분할된 것을 확인할 수 있습니다. 범례를 보면 색과 채널 이름을 연결할 수 있습니다. 데이터 시각화를 개선하기 위해 [도표 레이블과 도구 설명](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Items/Data-Regions/Chart/column#tooltip-and-labels-template) 모양을 구성합니다. * 보고서 디자인으로 돌아가 보고서 탐색기에서 ```도표``` 항목을 선택합니다. * ```공통``` 섹션의 ```도구 설명 템플릿``` 드롭다운에서 ```색 필드 값``` 항목을 선택합니다. * 속성 패널의 ```레이블 텍스트``` 섹션에서 ```템플릿``` 편집기 오른쪽에 있는 회색 상자를 클릭하고 ```식...``` 항목을 선택합니다. [식 편집기](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Designer-Interface#expression-editor)가 나타납니다. 식 텍스트 영역에 ```{valueField.value:C2}```를 입력하고 ```저장``` 버튼을 클릭합니다. * ```레이블 텍스트/위치``` 속성을 ```가운데```로 설정합니다.DOC-DETAILS-TAG-OPEN
DOC-SUMMARY-TAG-OPEN
확장하여 실행 중인 도표 도구 설명 및 레이블 구성 보기DOC-SUMMARY-TAG-CLOSE
DOC-DETAILS-TAG-CLOSE
이제 보고서 출력을 미리 보고 차트 열에 각 채널 및 연도에 대한 판매 금액이 표시되고, 열에 마우스를 올려놓으면 채널 이름 도구 설명이 표시되는 것을 확인할 수 있습니다. ### 드릴스루 링크 구성 마지막으로, 탐색을 위해 주 보고서와 하위 보고서 간에 링크를 구성합니다. * 보고서 디자인으로 돌아가 보고서 탐색기에서 ```도표``` 항목을 선택합니다. * ```작업``` 섹션의 ```유형``` 편집기에서 ```보고서로 이동```을 선택합니다. * ```보고서로 이동``` 편집기에서 ```DrillThroughSubReport.rdlx-json``` 항목을 선택합니다. * 오른쪽에 있는 ```목록``` 아이콘을 사용하여 ```매개 변수``` 편집기를 확장합니다. * ```항목 추가``` 버튼을 클릭하고 오른쪽에 있는 ```톱니 모양``` 아이콘을 사용하여 새로 추가된 값 편집기를 엽니다. * ```매개 변수 이름``` 필드에 ```ChannelKey```를 입력하고 ```값``` 드롭다운에서 ```ChannelKey``` 항목을 선택합니다. * ```매개 변수 속성``` 헤더 근처에 있는 ```왼쪽 화살표``` 아이콘을 사용하여 도표 속성으로 되돌아갑니다. * 유사한 방법으로 ```SalesYear```를 이름으로, ```{Year(DateKey)}```를 값으로 사용하여 다른 매개 변수를 추가합니다. 이제 보고서 출력을 미리 보고 아무 열이나 클릭하면 보고서 뷰어에 선택한 판매 연도 및 채널에 대한 세부 데이터가 드릴스루 구성에 따라 표시된 하위 보고서가 열립니다. ```내역에서 이전 항목으로 돌아가기``` [보고서 뷰어 도구 모음](/activereportsjs/docs/v2.1/ReportAuthorGuide/Report-Viewer-Interface#toolbar) 버튼을 사용하여 돌아갈 수 있습니다. 또한 오른쪽 끝에 있는 ```갤러리 모드``` 버튼을 클릭할 수도 있습니다. 그러면 뷰어 모드를 전환하여 드릴스루 보고서를 읽기에 적합한, 페이지가 매겨지지 않은 출력을 표시합니다. 최종 보고서 버전은 [데모 웹 사이트](/activereportsjs/demos/Reports/GetStartedWithDrillThroughReports/purejs)에서 확인할 수 있습니다.