적응형 양식 차트 af-charts

차트 또는 그래프는 데이터를 시각적으로 표현한 것입니다. 많은 양의 정보를 이해하기 쉬운 시각적 형식으로 압축할 수 있으므로 복잡한 데이터를 더 잘 시각화, 해석 및 분석할 수 있습니다.
AEM Forms 추가 기능 패키지는 기본 차트 구성 요소를 제공합니다. 적응형 양식 및 문서에서 반복 가능한 패널 및 테이블 ​에 있는 2차원 데이터의 시각적 표현을 사용할 수 있습니다. 차트 구성 요소를 사용하여 다음 유형의 차트를 추가하고 구성할 수 있습니다.

차트 구성 요소는 차트에서 값을 계산하고 그래프로 나타낼 수 있는 내장 통계 함수(합계, 평균, 최대, 최소, 모드, 중간값, 범위 및 빈도)를 지원하고 제공합니다. 즉시 사용할 수 있는 함수 외에도 사용자 정의 함수를 작성하여 차트에서 사용할 수 있도록 할 수 있습니다.

이제 차트 구성 요소를 추가하고 구성하는 방법을 살펴보겠습니다.

차트 추가 add-chart

차트 구성 요소는 기본적으로 AEM 사이드바에서 사용할 수 있습니다. 작성 모드에서 차트 구성 요소를 AEM 사이드바에서 적응형 양식 또는 문서로 드래그 앤 드롭할 수 있습니다. 구성 요소를 놓으면 차트의 자리 표시자가 만들어집니다.

차트 구성 configure-chart

차트를 구성하려면 차트 구성 요소를 클릭하고 을 클릭하여 [차트 편집] 대화 상자를 엽니다. 이 대화 상자에는 차트를 구성할 수 있는 제목 및 텍스트, 구성, 고급 옵션 및 스타일 지정 탭이 포함되어 있습니다.

기본 basic

기본 탭에서 다음 속성을 구성할 수 있습니다.

구성 configuration

기본 탭에서 차트 유형, 데이터가 포함된 소스 패널 또는 테이블 행, 차트의 X축 및 Y축에 표시되는 값, 선택적으로 차트에 표시되는 플로팅의 값을 계산하는 통계 함수를 정의합니다.

신용 카드 설명서에 있는 반복 가능한 테이블의 예를 통해 이 탭에 나타나는 정보에 대해 자세히 알아보겠습니다. 아래와 같이 신용 카드 명세서의 명세서 세부 정보 섹션에 총 경비를 다른 범주로 표시하고 상호 연관시킬 차트를 생성한다고 가정해 보겠습니다.

이를 위해서는 X축에 범주를 그리고 Y축에 각 범주의 총 지출을 그려야 합니다.

이 예에 사용된 신용 카드 명령문은 적응형 양식 문서이고 명령문 세부 사항 섹션은 작성 모드에서 다음과 같이 표시되는 테이블입니다.

차트를 생성하기 위한 다음 요구 사항 및 조건을 고려하겠습니다.

범례와 도구 팁은 다음과 같이 표시됩니다.

스타일링 styling

스타일 모드에서는 차트의 폭(폼이나 문서에서 사용할 수 있는 총 폭의 백분율)과 높이(픽셀 단위)를 구성할 수 있습니다. 기타 옵션에는 텍스트, 배경, 테두리, 효과 및 CSS 무시가 포함됩니다.

스타일 모드로 전환하려면 페이지 도구 모음에서 탭>>스타일 ​을 클릭하세요.

차트에서 함수 사용 use-functions

차트에서 플로팅할 소스 데이터의 값을 계산하기 위해 통계 함수를 사용하도록 차트를 구성할 수 있습니다. 차트 구성 요소에는 몇 가지 내장 함수가 있지만 사용자 고유의 함수를 작성하여 차트 구성에서 사용할 수 있도록 할 수 있습니다.

기본 함수 default-functions

차트 구성 요소에서는 기본적으로 다음 기능을 사용할 수 있습니다.

사용자 정의 함수 custom-functions

차트에서 기본 함수를 사용하는 것 외에도 JavaScript에서 사용자 지정 함수를 작성하여 차트 구성 요소의 함수 목록에서 사용할 수 있도록 할 수 있습니다.

함수는 배열 또는 값과 카테고리 이름을 입력으로 취하여 값을 반환합니다. 예:

Multiply(valueArray, category) {
    var val = 1;
    _.each(valueArray, function(value) {
        val = val * value;
    });
    return val;
}

사용자 지정 함수를 작성했으면 다음을 수행하여 차트 구성에서 사용할 수 있도록 합니다.

차트 자동 새로 고침 auto-refresh-chart

사용자가 다음 중 하나를 수행하면 차트가 자동으로 새로 고쳐집니다.

적응형 양식 규칙에서 차트 유형 사용 chart-in-rules

chartType 속성은 차트의 유형을 지정합니다. 가능한 값은 원형, 도넛, 막대, 선, 선점, 점 및 영역입니다. 이는 스크립팅 가능한 속성입니다. 즉, 적응형 양식 규칙에서 차트 구성을 조작할 수 있습니다. 예시의 도움을 받아 그것을 이해해봅시다.

세로 막대형 차트를 구성했다고 가정합니다. 그러나 드롭다운 목록에서 다른 차트 유형을 선택하고 차트를 다시 그릴 수 있는 옵션을 사용자에게 제공할 수도 있습니다. 다음과 같이 규칙의 chartType 속성을 사용하여 이를 수행할 수 있습니다.

이제 드롭다운 목록에서 차트 유형을 선택하고 새로 고침 을 클릭하여 차트를 다시 그릴 수 있습니다.