표와 행렬의 기능을 결합하는 것은 데이터를 구조화된 서식으로 구성하고 표시할 수 있는 아주 좋은 방법입니다.

Tablix 컨트롤은 복잡한 데이터를 사용하는 시나리오에서 특히 귀중하며, 사용자는 이를 통해 변화하는 데이터 조건에 적응할 수 있는 기능을 사용하여 유연한 보고서를 만들 수 있습니다.

ActiveReportsJS를 사용하면 JavaScript 보고서 디자이너를 사용하여 JavaScript 보고서에 Tablix 컨트롤을 간단하게 추가할 수 있습니다. 컨트롤 도구 상자를 사용하면 컨트롤을 보고서에 바로 끌어다 놓을 수 있습니다.

보고서 디자이너는 기본 제공 생성 마법사를 사용하여 데이터 소스를 쉽게 Tablix 컨트롤에 바인딩하고 몇 분 이내에 레이아웃의 서식을 지정할 수 있습니다.

이 문서에서는 ActiveReportsJS에 Tablix 컨트롤을 추가하고 사용자 정의하는 방법 및 다음과 같은 주제를 설명합니다.

• 보고서에 데이터 소스 및 Tablix 컨트롤 추가

• 데이터 소스를 바인딩하고 행, 열, 값 및 합계 할당

• Tablix 셀 레이아웃 서식 지정

보고서에 데이터 소스 및 Tablix 컨트롤 추가

가장 먼저 JavaScript 보고서 디자이너에 데이터 소스를 추가해야 합니다. 이를 사용하여 OData 소스에서 데이터를 가져올 것입니다.

JavaScript 보고서 디자이너의 오른쪽 상단에서 데이터 패널을 선택하고 데이터 소스 섹션 아래에서 추가 버튼을 클릭합니다.

이렇게 하면 JavaScript 보고서 디자이너가 OData 데이터 소스를 가리키도록 할 수 있는 마법사가 표시됩니다.

여기에서는 끝점을 https://demodata.mescius.io/contoso/odata/v1로 설정합니다.

이 링크를 테스트 목적으로 사용할 수도 있습니다.

다음으로 데이터 집합을 추가합니다. 이렇게 하면 가져온 데이터가 보관됩니다.

방금 만든 데이터 소스 옆의 더하기 버튼을 클릭하여 데이터 집합 생성 마법사를 엽니다.

여기에서는 몇 가지 속성을 더 설정해야 합니다.

첫째, Uri/경로 및 JSON 경로를 설정해야 합니다.

이렇게 하면 서버에서 데이터를 가져오는 특정 위치를 가리키고 해당 데이터로부터 표시할 내용을 필터링하게 됩니다.

서버에 전달될 매개변수도 설정합니다.

이렇게 하면 OData 소스에서 다음 일곱 개의 필드를 가져오게 됩니다.

다른 작업을 실행하기 전에 데이터의 유효성을 검사해야 합니다. 이렇게 하면 JavaScript 보고서 디자이너와 뷰어가 소스에서 데이터를 가져올 수 있다는 것을 확인할 수 있습니다.

유효성 검사 버튼을 클릭하고, 모든 것이 예상대로 실행되면 배열에 데이터베이스 필드 속성에 일곱 개의 항목이 표시됩니다.

변경 사항 저장 버튼을 클릭하기 전에, 마지막으로 계산된 필드를 설정해야 합니다. 이러한 필드에서는 가져올 값을 사용하여 새 값을 만듭니다.

이 보고서의 경우, 두 개의 계산된 필드를 만듭니다.

ProductCategory 계산된 필드의 경우, 제품 키를 사용하여 숫자 값을 다음과 같은 여러 문자열과 연결합니다. Audio, Cameras, Cell Phones, Computers 및 TV and Video.

한편, SalesChannel도 같은 일을 합니다. 단, 이 속성의 문자열 값은 Catalog, Online, Reseller 및 Store입니다.

이 작업이 완료되면 변경 사항 저장 버튼을 클릭할 수 있으며 데이터 집합이 완성됩니다.

이제 마지막으로 Tablix 컨트롤을 보고서에 추가할 수 있습니다. 이렇게 하려면, JavaScript 보고서 디자이너의 오른쪽에 있는 컨트롤 도구 상자에서 Tablix 컴포넌트를 끌어 보고서 영역에 놓습니다.

이렇게 하면 Tablix 생성 마법사가 표시됩니다.

데이터 소스를 바인딩하고 행, 열, 값 및 합계 할당

이제 Tablix 생성 마법사가 표시되었으므로 Tablix의 다양한 그룹에 필드를 할당할 수 있습니다. 데이터 소스가 여러 개 있는 보고서에서 Tablix를 만드는 경우, 보고서에 바인딩할 소스도 선택해야 합니다.

여기서는 데이터 집합이 하나뿐이므로 기본적으로 Tablix에 바인딩됩니다.

이 Tablix의 경우 다음 세 개의 데이터 필드를 사용합니다. SalesChannel, ProductCategory, SalesAmount.

SalesChannel 필드는 행 그룹, ProductCategory는 열 그룹의 역할을 하며, 실제로 SalesAmount를 값에 두 번 포함합니다.

각 SalesAmount 레이블 옆의 Aggregate 버튼을 사용하여 각 집계를 Sum으로 설정한 다음, 위쪽 레이블 옆에서 DisplayAs 버튼을 사용하여 % Column Group Total로 표시되도록 설정합니다.

이제 디자이너에서 보고서를 볼 때 보고서가 다음과 같이 표시됩니다.

그리고 미리 보기 버튼을 클릭하면 다음과 같이 표시됩니다.

각 판매 채널(Store, Reseller, Online, Catalog) 및 판매 채널이 기여한 각 제품의 총매출과 비율을 표시합니다.

보시다시피, 이제 모든 값이 바인딩되어 Tablix 컴포넌트에 표시됩니다. 하지만, 컨트롤이 지저분하게 보이고 표시되는 데이터의 서식이 제대로 지정되지 않았습니다.

다음 섹션에서는 Tablix 컨트롤의 서식을 지정하고 컨트롤의 모양을 사용자 정의할 수 있습니다.

Tablix 셀 레이아웃 서식 지정

이제 모든 것이 Tablix에 표시되었으므로, 사용자 정의를 통해 사용자가 표시된 데이터를 더 쉽게 파악할 수 있도록 컨트롤을 만듭니다.

가장 먼저 Tablix에서 두 번째 행을 제거해야 합니다. 행 헤더를 마우스 오른쪽 단추로 클릭하고 행 삭제 옵션을 선택합니다.

다음으로 표시된 SalesAmount 값의 서식을 업데이트합니다. 두 번째와 세 번째 행의 세 번째 열의 셀을 선택합니다.

이제 속성 패널 내부에서 서식 속성을 찾아 통화로 전환합니다. 기본적으로, 이렇게 하면 이러한 셀의 값이 통화 값으로 서식이 지정되고 두 번째 소수점이 됩니다.

다음으로 각 행 헤더를 선택하고 속성 패널에서 높이 속성을 0.25에서 0.4로 변경합니다. 이제 보고서 미리 보기를 하면 다음과 같이 표시됩니다.

보시다시피, Tablix 컨트롤의 모든 항목이 전보다 훨씬 더 깨끗하게 보입니다. 하지만, 여전히 보고서의 모양과 느낌을 개선하기 위해 할 수 있는 일이 몇 가지 더 있습니다.

다음으로 각 셀 주위에 테두리를 설정합니다. Shift 키를 누른 상태에서 표의 모든 셀을 클릭하고, 테두리 섹션 아래에서 다음 속성을 설정합니다.

헤더 열

헤더 행

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

결론

모두 완료되었습니다. 물론 ActiveReportsJS의JavaScript 보고서 디자이너에서 Tablix 컨트롤을 사용하여 훨씬 더 많은 일을 할 수 있지만, 이 내용은 좋은 출발점이 될 것이며 Tablix를 사용하면 얼마나 쉽게 데이터의 서식을 지정하고 표시할 수 있는지 보여줍니다.

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

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