# ActiveReportsJS: 버전 2.2의 새로운 기능 ## Content ActiveReportsJS v2.2는 개발자와 보고서 작성자 및 애플리케이션의 최종 사용자를 위한 제품 경험을 개선하는 새로운 기능과 개선 사항을 도입했습니다. ### 프로그래밍 방식으로 리포트 생성하기 ActiveReportsJS의 리포트 템플릿은 잘 정의된 구조를 준수하는 JSON 형식을 사용합니다. ActiveReportsJS v2.2에서는 Visual Studio Code 또는 TypeScript 선언을 지원하는 기타 IDE의 IntelliSense 기능을 사용하여 프로그래밍 방식으로 보고서를 쉽게 작성할 수 있도록 해당 구조에 대한 TypeScript 선언을 노출했습니다. ![gif](https://global-cdn.grapecity.com//blogs/activereports/20211006-whats-new-in-activereportsjs-v2-2/Gif1.gif) 런타임에 보고서를 작성하는 전체 예는 데모 웹 사이트에서 확인하실 수 있습니다. - [ActiveReportsJS 시작하기](https://demo.grapecity.co.kr/activereportsjs/docs/GettingStarted/Api/index) - [사용자 정의 테이블 디자이너](https://demo.grapecity.co.kr/activereportsjs/demos/features/table-builder/) - [사용자 정의 차트 디자이너](https://demo.grapecity.co.kr/activereportsjs/demos/features/chart-builder/) 전체 API는 [여기](https://demo.grapecity.co.kr/activereportsjs/api/modules/core.rdl.html)에서 확인하실 수 있습니다. ### ES 모듈 소개 모든 ActiveReportsJS npm 패키지는 이제 [네이티브 ES 모듈](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)을 노출합니다. Vite.js와 같은 최신 JavaScript 도구는 ES 모듈을 사용하여 애플리케이션 개발 및 구축을 위한 놀라운 성능을 제공합니다. Vite.js와 함께 ActiveReportsJS를 사용하는 방법에 대한 이 [튜토리얼](https://demo.grapecity.co.kr/activereportsjs/docs/GettingStarted/QuickStart/QuickStart-Vitejs)을 확인해 보세요. ### 새로운 차트 유형 레이더 차트 개념을 기반으로 하는 몇 가지 새로운 차트 유형이 있습니다. - [레이더 선형](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/radar-line) - [레이더 영역형](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/radar-area) - [레이더 분산형 및 버블형](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/radar-scatter-bubble) ![image2](https://global-cdn.grapecity.com//blogs/activereports/20211006-whats-new-in-activereportsjs-v2-2/2-MultipleLinesRadarLineExample.png) ### Chart Dynamic Rules 새로 도입된 차트 기능을 사용하면 다음과 같은 런타임 조건에 따라 시각적 속성의 하위 집합을 설정할 수 있습니다. - [막대형 차트 규칙](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/column#dynamic-rules) - [꺾은선형 차트 규칙](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/line-chart#dynamic-rules) - [원형 및 도넛형 차트 규칙](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/pie#dynamic-rules) - [분산형 및 버블형 차트 규칙](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/scatter-bubble#dynamic-rules) - [나선형 차트 규칙](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/spiral#dynamic-rules) - [극좌표 차트 규칙](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/polar#dynamic-rules) - [레이더 선형 차트 규칙](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/radar-line#dynamic-rules) - [레이더 분산형 및 버블형 차트 규칙](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Chart/radar-scatter-bubble#dynamic-rules) ![image3](https://global-cdn.grapecity.com//blogs/activereports/20211006-whats-new-in-activereportsjs-v2-2/3-LineRulesOutput.png) ### 테이블 열에 대한 자동 너비 설정 [테이블 열](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Table/index#table-columns)은 Visibility.Hidden 속성을 보고서 매개변수 값 또는 다른 실행에 의존하는 표현식으로 설정하여 미리보기 모드에서 동적으로 숨길 수 있습니다. 이제 숨겨진 열이 제거된 후 남은 공간을 차지하도록 다른 열의 크기를 자동으로 조정할 수 있습니다. [데모](https://www.grapecity.com/activereportsjs/demos/Reports/AutoTableColumnWidth/purejs)를 확인해 보세요. ### 고정 페이지 레이아웃 개선 사항 [고정 페이지 레이아웃](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Layouts/index#fixed-page-layout)은 픽셀 단위로 미리 정의된 양식 레이아웃을 구축하는 데 사용할 수 있습니다. 보고서 매개변수 값 또는 기타 런타임 변수에 따라 런타임에 일부 페이지를 동적으로 제외하거나 포함할 수 있는 기능을 추가하여 훨씬 더 유연해졌습니다. ### 서식 있는 텍스트에 대한 이미지 요소 지원 [RichText 보고서 항목](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Visualizers/RichText/index)은 이제 외부, 포함 또는 데이터세트 이미지를 표시하는 기능을 포함하여 **img** 태그를 지원합니다. 이미지 사용 예는 새로 도입된 튜토리얼을 확인하세요. ![image4](https://global-cdn.grapecity.com//blogs/activereports/20211006-whats-new-in-activereportsjs-v2-2/4-RichText.png) ### Tablix 디자이너 개선 사항 업데이트된 [Tablix 마법사 대화 상자](https://demo.grapecity.co.kr/activereportsjs/docs/ReportAuthorGuide/Report-Items/Data-Regions/Tablix/index#tablix-wizard)를 사용하면 전체 테이블릭스와 해당 열 및 행 그룹에 대한 필터를 쉽게 구성하고, "행 그룹 합계의 %"와 같은 요약 값에 대한 고급 수식을 즉시 설정할 수 있습니다. ![image5](https://global-cdn.grapecity.com//blogs/activereports/20211006-whats-new-in-activereportsjs-v2-2/5-TablixWizard.png)