드릴스루 차트는 데이터로부터 더 많은 정보를 수집하려고 하는 사용자에게 귀중한 도구가 되었습니다.

사용자는 이 차트를 사용하여 여러 데이터 레이어를 쉽게 탐색하고 특정 데이터 요소에 집중할 수 있습니다. 이러한 유형의 차트에 대한 필요는 사용자가 많은 양의 데이터를 처리해야 하는 복잡한 데이터 집합이 증가함에 따라 함께 증가했습니다. 

ActiveReportsJS를 통해 차트를 JavaScript 보고서에 쉽게 통합하고, 매개 변수가 있는 드릴스루 탐색을 사용하여 차트 데이터를 바인딩함으로써, 사용자가 여러 정보 간에 자유롭게 이동할 수 있습니다.

이 문서에서는 ActiveReportsJS를 사용하여 JavaScript 보고서에 드릴스루 차트 기능을 추가하는 방법을 살펴봅니다. 다음과 같은 주제를 다루게 됩니다.

• 보고서 만들기 및 데이터 소스 바인딩

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

• 꺾은선형 차트 및 누적 세로 막대형 차트 작성

• 보고서 간 드릴스루 탐색 설정

• 보고서를 JavaScript 응용 프로그램에 로드

완성된 응용 프로그램을 확인하려면 여기에서 리포지토리를 찾아보십시오.

보고서 만들기 및 데이터 소스 바인딩

가장 먼저 보고서의 기본 사항을 설정해야 합니다. 즉, 보고서를 데이터 소스에 바인딩해야 합니다. 보고서를 만들기 위해 ActiveReportsJS 독립 실행형 보고서 디자이너를 사용합니다.

ActiveReportsJS 독립 실행형 보고서 디자이너는 여기에서 다운로드할 수 있습니다.

디자이너의 오른쪽에는 보고서의 데이터 소스 및 데이터 집합을 설정하는 데 사용되는 데이터 패널이 있습니다.

위 섹션에서 데이터 소스 섹션에는 데이터를 가져올 위치를 표시하고, 데이터 집합 섹션에는 가져온 데이터를 저장하며, 매개 변수 섹션에는 보고서와 사용자 간의 상호 작용을 저장할 수 있습니다.

나중에 드릴스루 기능을 통합할 때 이에 대해 다시 설명하겠습니다. 

데이터 소스 섹션의 추가 버튼을 클릭하여 생성 마법사를 엽니다.

이 마법사를 사용하여 데이터를 가져올 위치를 선택할 수 있습니다.

이 경우, OData 데이터 소스에서 JSON 데이터를 가져오므로 JSON Format을 데이터 서식으로, Remote JSON Provider를 소스 유형으로 선택한 다음, 끝점의 URL을 추가합니다.

이렇게 설정한 후 변경 사항 저장을 누르면 데이터 소스가 연결됩니다.

이제 데이터 집합을 설정하기 위해, 소스 옆의 더하기 버튼을 클릭하여 데이터 생성 마법사를 엽니다.

가져온 데이터는 이 마법사에 표시됩니다. 하지만, 원하는 데이터를 가져오려면 아래와 같이 몇 가지 매개 변수를 설정해야 합니다.

Uri/경로는 OData 서비스에 데이터를 가져올 위치를 알려주고, 매개 변수 속성은 이 위치에서 데이터를 가져올 필드를 제한하며, Json 경로는 선택한 필드에서 가져올 데이터를 설명합니다(이 경우 모든 데이터).

이제 마법사를 닫기 전에 데이터의 유효성을 검사해야 합니다. 이 검사는 보고서에 데이터를 가져올 수 있는지 확인하는 것입니다. 모든 것이 올바로 작동하면 데이터베이스 필드 배열에 위의 이미지와 같은 항목이 표시됩니다.

이 작업을 다시 실행하여 새로운 데이터 집합을 만듭니다. 아래와 같은 설정이 표시됩니다.

이제 데이터 집합이 보고서에 바인딩되었습니다.

다음 섹션으로 이동하기 전에, 생성한 템플릿을 서로 다른 두 보고서로 저장합니다. 각 보고서는 차트를 표시하기 위해 사용됩니다.

디자이너 상단의 다른 이름으로 저장 버튼을 클릭하고 첫 번째 보고서를 DrillThroughReport.rdlx-json, 두 번째 보고서를 DrillThroughSubReport.rdlx-json으로 저장합니다.

다음으로 데이터를 바인딩할 차트를 몇 개 추가합니다.

하위 보고서 매개 변수 추가

이제 사용자가 주 보고서(마스터 차트)와 하위 보고서(하위 차트) 사이를 이동할 수 있도록 매개 변수를 설정합니다.

이전에 언급했듯이, 매개 변수는 사용자와 보고서 간에 일정한 수준의 상호 작용을 허용하기 위해 사용됩니다. 이 경우에는 사용자가 데이터를 드릴스루할 때 하위 보고서에 올바른 데이터를 표시하기 위해 매개 변수를 사용합니다.

보고서 디자이너에서 DrillThroughSubReports.rdlx-json 파일을 엽니다. 데이터 패널의 매개 변수 섹션에 있는 추가 버튼을 클릭하여 매개변수 보기를 엽니다.

여기에서는 매개 변수에서 허용되는 데이터의 유형을 정의할 수 있습니다.

이 매개 변수의 경우 다음과 같은 속성을 설정합니다.

여기서는 보고서에 이 매개 변수를 참조하기 위해 사용할 이름과 허용할 데이터의 형식을 지정합니다. 어떠한 이유에서든 이 매개 변수에 지정된 값에 문제가 있는 경우 표시할 기본값도 지정합니다.

또 한 가지 주목해야 할 항목은 숨김 속성입니다. 기본적으로, 보고서에서 매개 변수가 설정되면 보고서 뷰어에 사용자가 값을 설정할 수 있는 패널이 표시합니다.

그러나 이 경우에는 마스터 보고서에서 매개 변수에 값이 지정되므로 사용자가 이 매개 변수에 액세스하지 못하도록 숨김으로 설정합니다.

이제 두 번째 매개 변수를 첫 번째 매개 변수와 유사하게 설정합니다.

이제 이러한 매개 변수를 적절하게 사용하도록 하위 보고서의 데이터 집합을 설정할 수 있습니다.

보고서의 판매 데이터 집합 옆에 있는 연필 아이콘을 클릭하고, $select 필터를 설정할 때와 같이, $filter라는 다른 필터를 설정합니다.

$select 필터 아래 다른 필터를 추가하고, $filter라는 이름과 다음과 같은 값을 지정합니다.

ChannelKey+eq+{@ChannelKey}+and+Year(DateKey)+eq+{@SalesYear}

이제 유효성 검사를 클릭합니다. 이렇게 하면 다른 창이 열리고 이전에 설정한 기본값이 표시됩니다.

저장 및 실행을 클릭한 다음, 모든 것이 올바로 설정된 경우 유효성을 검사합니다.

꺾은선형 차트 및 누적 세로 막대형 차트 작성

이제 보고서에 사용할 차트를 포함할 수 있습니다. 이미 하위 보고서를 열었으므로 해당 보고서를 먼저 완료합니다.

먼저 왼쪽의 컨트롤 도구 상자에서 차트 컨트롤을 끌어 보고서 영역으로 끕니다. 차트 생성 마법사가 열립니다. 마법사를 닫을 수 있습니다. 속성 패널을 사용하여 차트를 설정합니다.

첫째, 차트를 선택하고, 속성 패널에서 도표 목록을 확장하고 연필 아이콘을 클릭합니다.

이렇게 하면 차트의 도표 개체가 열립니다. 그런 다음 값 목록을 확장하고 새 항목을 추가합니다. VALUE 속성을 {SalesAmount}, Aggregate를 Sum으로 설정합니다. 이렇게 하면 각 달의 총매출의 합계를 표시할 수 있습니다.

그런 다음 도표 속성으로 돌아가 다음 속성을 설정합니다.

이제 차트를 설정하고 표시할 데이터를 바인딩했으므로, X축과 Y축 및 헤더의 스타일과 서식을 추가로 지정합니다.

차트의 특정 요소를 선택하려면 보고서 디자이너 왼쪽 상단의 햄버거 버튼을 확장하고 탐색기를 클릭한 다음 편집할 요소를 선택합니다. 변경할 속성은 아래 표를 확인하십시오.

X축

Y축

헤더

헤더의 Caption에서 만든 Lookup 함수는 첫 번째 인수의 값(ChannelKey 매개 변수 값)을 가져오고, Channels 데이터 집합에서 ChannelKey가 동일한 행을 찾아 해당하는 ChannelName을 반환합니다.

디자이너에서는 차트가 왜곡되어 보이지만, 미리 보기 버튼을 누르면 런타임 시 차트의 모양을 미리 볼 수 있습니다.

이제 차트가 설정되고 하위 보고서의 매개 변수에 바인딩되었으므로, 보고서를 저장하고 DrillThroughMainReport.rdlx-json 파일을 열 수 있습니다.

이제 이 보고서에 차트를 추가하고, 하위 보고서의 차트를 드릴다운하는 데 사용합니다.

이전 차트와 마찬가지로, 차트 컨트롤을 주 보고서에 끌어다 놓고 차트 생성 마법사를 닫습니다. 먼저 보고서의 유형을 설정합니다. 차트를 선택하고, 도표 템플릿 속성에서 누적 세로 막대형 차트를 선택합니다.

이제 속성 패널에서 도표 목록을 확장하고 연필 아이콘을 클릭하여, 차트의 도표 개체를 엽니다.

값 목록에 새 항목을 추가하고 이전 보고서와 마찬가지로 VALUE 속성을 {SalesAmount}, Aggregate를 Sum으로 설정합니다.

그런 다음 도표 속성으로 돌아가 다음 속성을 설정합니다.

이제 마지막 차트와 마찬가지로, X축과 Y축 및 헤더의 스타일과 서식을 추가로 지정합니다.

X축

Y축

헤더 

이제 보고서 미리 보기를 하면 다음과 같이 표시됩니다.

하지만 아직 끝나지 않았습니다. 차트에서는 각 열이 여러 판매 채널 사이에 분할되고 범례가 표시됩니다. 이렇게 하려면 몇 가지 속성을 추가로 설정해야 합니다.

뒤로 돌아가 차트 컨트롤의 도표를 선택하고, 도표의 세부 정보 목록에 새 항목을 추가합니다. 이 세부 정보 항목의 경우, 값을 {ChannelKey}로 설정합니다.

그리고 뒤로 화살표를 눌러 도표의 속성 목록으로 돌아갑니다.

인코딩 - 색 섹션의 색 속성에서 새 항목을 추가하고 값을 다음과 같이 설정합니다.

{Lookup(ChannelKey, ChannelKey, ChannelName, "Channels")}

여기서 Lookup은 이전에 하위 보고서에서 차트의 헤더에서와 동일하게 사용됩니다.

이제 보고서 탐색기에서 범례 - 색 항목을 선택합니다. 방향 속성을 가로, 위치를 위쪽으로 설정합니다. 이제 보고서 미리 보기를 하면 각 열이 개별 섹션으로 구분되어 표시됩니다.

두 보고서를 바인딩하기 전에 마지막으로, 사용자가 더 쉽게 데이터를 사용할 수 있도록 차트에 레이블과 도구 설명을 표시해야 합니다.

도표 항목으로 돌아가, 도구 설명 템플릿에서 색 필드 값을 선택합니다. 그런 다음 레이블 텍스트 섹션 아래 템플릿 속성에서 값을 {valueField.value:C2}, 위치 속성을 가운데로 설정합니다.

이제 보고서 미리 보기에서 완전하게 구분된 데이터를 확인할 수 있습니다.

보고서 간 드릴스루 탐색 설정

이제 두 보고서가 모두 설정되고 매개 변수가 올바로 설정되었으므로, 주 보고서와 하위 보고서 사이의 링크를 구성하여 사용자가 드릴스루 탐색을 사용할 수 있도록 해야 합니다.

차트의 도표 컴포넌트로 돌아가, 속성 패널의 작업 섹션에서 유형 속성을 보고서로 이동으로 설정하고, 보고서로 이동 속성을 DrillThroughSubReport.rdlx-json으로 설정합니다.

* DrillThroughSubReport를 드롭다운에 표시하려면 보고서를 동일한 디렉토리에 저장해야 합니다.

이제 주 보고서에서 하위 보고서로 값을 전달하기만 하면 됩니다. 하위 보고서에 매개 변수가 두 개 있으므로, 여기에서 두 매개 변수를 설정합니다.

작업 섹션의 매개 변수 속성 아래에서 두 매개 변수를 추가합니다.

첫 번째 매개변수 이름은 ChannelKey, 값은 {ChannelKey}로 설정하고,

두 번째 매개 변수의 이름은 SalesYear, 값은 {Year(DateKey)}로 설정합니다.

이제 보고서 미리 보기에서 누적 세로 막대형 차트의 여러 열을 클릭할 수 있으며, 열을 클릭하면 하위 보고서로 이동하여 꺾은선형 차트의 드릴스루 데이터가 표시됩니다.

보고서를 JavaScript 응용 프로그램에 로드

이제 보고서가 설정되고 드릴스루 기능이 구현되었으므로, 마지막으로 JavaScript 응용 프로그램에서 보고서를 표시합니다. 이렇게 하기 위해 ActiveReportsJS JavaScript 보고서 뷰어를 사용합니다.

첫째, ActiveReportsJS 라이브러리를 응용 프로그램에 추가해야 합니다. 이를 위해 MESCIUS CDN을 사용하여 JavaScript 파일을 로드합니다.

<head> 태그 안에 다음 <script> 태그를 추가하기만 하면 됩니다:

<link rel="stylesheet" href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-ui.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.mescius.com/activereportsjs/4.latest/styles/ar-js-viewer.css" type="text/css" />
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-core.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-viewer.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-pdf.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-tabular-data.js"></script>
<script src="https://cdn.mescius.com/activereportsjs/4.latest/dist/ar-js-html.js"></script>

이렇게 하면 ActiveReportsJS의 CSS 파일 및 JavaScript 보고서 뷰어에 필요한 모든 JavaScript 파일과 내보내기 설정이 로드됩니다.

다음으로 아래에 <script> 태그를 추가해주세요:

<style>
  #viewer-host {
    width: 100%;
    height: 100vh;
  }
</style>

그리고 <body> 태그 안에 다음 마크업을 추가합니다.

<div id="viewer-host"></div>

이렇게 하면 JavaScript 보고서 뷰어가 포함될 큰 영역이 있는 div가 생성됩니다.

이제 보고서 뷰어 컨트롤을 응용 프로그램에 추가합니다. <body> 태그 아래에 다음을 추가합니다.

<script>
  var viewer = new ActiveReports.Viewer(#viewer-host);
  viewer.open(DrillThroughReport.rdlx-json);
</script>

이렇게 하면 생성된 div에 컨트롤이 로드되고 이전 단계에서 만든 DrillThroughReport.rdlx-json 보고서가 열립니다.

보고서 파일이 보고서 파일을 로드하는 HTML 파일과 같은 위치에 있는지, 또는 보고서의 경로를 적절히 나타내고 있는지 확인합니다. 하위 보고서도 이 위치에 있어야 합니다.

이제 브라우저에서 응용 프로그램을 실행하고 마스터 보고서를 볼 수 있습니다.

Visual Studio Code용 Live Server 플러그인을 사용하여 응용 프로그램을 실행합니다.

응용 프로그램이 시작하고 모든 것이 올바로 설정된 경우 다음과 같이 표시됩니다.

결론

이제 마지막 단계를 완료하여 응용 프로그램이 완성되었습니다. 이 문서에서는 많은 내용을 다루었지만, 실행된 단계를 살펴보면, ActiveReportsJS를 사용하여 드릴스루 기능을 쉽게 구현할 수 있다는 것을 알 수 있습니다.

이 문서에서 만든 보고서와 응용 프로그램을 다운로드하려면 아래에서 찾아볼 수 있습니다.

• 샘플 리포트 다운로드

지금 바로 ActiveReportsJS를 다운로드하여 직접 테스트해보세요!

• ActiveReportsJS 공식 홈페이지
• ActiveReportsJS 튜토리얼 및 샘플
• ActiveReportsJS Q&A
• ActiveReportsJS FAQ