대화형 통신에서 차트 사용

대화형 커뮤니케이션의 차트를 사용하면 대량의 정보를 쉽게 분석하고 이해할 수 있는 시각적 형식으로 압축할 수 있습니다

차트나 그래프는 데이터를 시각적으로 나타냅니다. 이 플러그인은 대량의 정보를 이해하기 쉬운 시각적 형식으로 압축하여 인터랙티브 커뮤니케이션의 수신자가 복잡한 데이터를 보다 효과적으로 시각화하고 해석하고 분석할 수 있도록 합니다.

대화형 통신을 생성하는 동안 차트를 추가하여 Interactive Communication의 양식 데이터 모델에서 2차원 데이터를 시각적으로 나타낼 수 있습니다. 차트 구성 요소로 다음과 같은 유형의 차트를 추가하고 구성할 수 있습니다.

  • 파이
  • 도넛
  • 막대(웹 채널만)
  • Line
  • 선 및 점
  • 영역

대화형 통신에서 차트 추가 및 구성

대화형 통신에 차트를 추가하려면 다음 단계를 완료하십시오.

  1. AEM 세로 막대의 구성 요소에서 다음 대화형 통신 인쇄 또는 웹 채널 중 하나에 있는 차트 구성 요소를 드래그하여 놓습니다.

    • 인쇄 채널:Target 영역 및 이미지 필드
    • 웹 채널:패널 및 Target 영역

    드롭된 차트 구성 요소로 차트에 대한 자리 표시자가 만들어집니다.

  2. 대화형 통신 편집기에서 차트 구성 요소를 탭하고 구성 요소 도구 모음에서 구성( configure_icon)을 선택합니다.

    속성 사이드바가 포커스가 있는 차트의 기본 속성과 함께 나타납니다.

    인쇄 채널에서 라인 유형 차트의 기본 속성
    그림: 인쇄 채널에서 라인 유형 차트의 기본 속성

    웹 채널에서 라인 유형 차트의 기본 속성
    그림: 웹 채널의 라인 유형 차트의 기본 속성

  3. 인쇄 채널 및 웹 채널에 대한 차트의 기본 속성을 구성합니다. 일반적인 속성 외에도 인쇄 및 웹 채널과 차트 유형에 해당하는 속성이 있습니다.

    • 이름:차트 객체의 이름입니다. 여기에서 지정하는 차트의 이름은 차트 출력에 표시되지 않지만 차트를 참조하는 규칙에 사용됩니다.

    • 차트 유형:차트 유형을 지정합니다.파이, 열, 도넛, 선, 선 및 점, 점 또는 영역.

    • 개체 숨기기:최종 출력에서 차트를 숨기려면 선택합니다.

    • x축y축​에 대해 다음을 지정합니다.

      • 제목:대화형 통신에 표시할 X축과 Y축의 제목을 지정합니다.
      • **데이터 모델 개체 ***:대화형 통신을 생성하는 동안 지정된 양식 데이터 모델에서 차트의 X축과 Y축에 대한 데이터 모델 객체를 찾아보고 선택합니다. 차트의 X축과 Y축에서 플로팅할 수 있도록 서로 관련이 있는 동일한 상위 데이터 모델 개체의 모음/배열 유형 속성을 두 개 선택합니다.
      • 함수:통계적 함수를 사용하여 축에서 값을 계산하려면 X/Y축에 대한 함수를 선택합니다. 함수에 대한 자세한 내용은 차트예제 2:라인 차트에 합계 및 평균 함수 적용.
    노트

    인쇄 채널의 경우 X축에서 바인딩하는 데이터 모델 객체는 숫자, 문자열 또는 날짜 유형이어야 합니다. Y축에서 바인딩하는 데이터 모델 객체는 숫자 유형이어야 합니다. 인쇄 채널에서 오른쪽 범례를 사용하는 것이 좋습니다.

    차트 속성에 대한 자세한 내용은 차트의 기본 속성을 참조하십시오.

  4. (인쇄 채널만 해당) 에이전트 설정에서 에이전트가 이 차트를 반드시 사용해야 하는지 여부를 지정합니다. t는 에이전트가 이 차트 사용 옵션을 선택하지 않으면 에이전트는 에이전트 UI의 [콘텐트] 탭에서 차트에 대한 눈 아이콘을 탭하여 차트를 표시하거나 숨길 수 있습니다.

    chart_agentproperties

  5. 속성 사이드바에서 done_icon을(를) 누릅니다.

    미리 보기를 통해 차트의 모양과 데이터를 확인할 수 있습니다. 필요한 경우 차트의 속성을 재구성하려면 돌아갑니다.

  6. 인터랙티브 커뮤니케이션에서 다른 변경 작업을 수행하는 것으로 돌아갑니다.

예 1:인쇄 및 웹형식의 차트 출력

[기본] 탭에서 차트 유형, 데이터가 포함된 소스 양식 데이터 모델 속성, 차트의 x축 및 y축에 표시할 레이블, 차트에서 플로팅할 값을 계산하는 통계적 함수를 정의합니다(선택 사항).

인터랙티브 커뮤니케이션을 사용하여 생성된 신용카드 명세서의 도움으로 기본 속성에서 필요한 최소 정보를 자세히 이해하겠습니다. 명세서에서 서로 다른 비용의 양을 설명하는 차트를 생성하고자 합니다. 인터랙티브 커뮤니케이션의 인쇄 및 웹 출력을 위해 다양한 유형의 차트를 사용하고자 합니다.

이를 수행하려면 다음을 지정해야 합니다.

  • 차트 유형 - 이 예에서는 인쇄 채널의 열 및 웹 채널의 도넛입니다.

  • 데이터 모델 객체 차트의 X 및 Y축에 대한 출처 - 이 예에서는 X축에 대한 거래 금액 및 Y축에 대한 비용 이름

  • X 및 Y축의 제목(이 예에서만 인쇄 채널의 열 유형 차트의 경우) - 이 예에서는 X축에 대한 금액($)과 Y축에 대한 비용입니다.

  • 레이블 방향 (이 예에서만 인쇄 채널의 열 유형 차트의 경우) - 이 예 Tilt Left

  • 비용 위 마우스 위에 표시할 도구 설명(웹 채널만 해당) - 이 예에서 ${x}: $ ${y}와 같이 [Expense Label: $ Amount] (예:테마 파크 방문:$315)

대화형
통신 인쇄 출력의 열 차트 그림: 대화형 통신 인쇄 출력의 열 차트

A. Y축 - 양식 데이터 모델 속성 및 제목 속성이 금액($)으로 설정된 양($) B. 레이블 방향 기울기 왼쪽 C. X축 - 양식 데이터 모델 속성에서 가져오는 비용 설명 및 비용으로 설정된 제목 속성에서 가져오는 비용 설명

대화형
통신 의 웹 출력에 도넛형 차트 그림:대화형 통신 웹 출력에 도넛형 차트

도넛의 내부 반경 속성이 B로 설정되어 있습니다. 범례 표시 속성이 선택되고 범례 위치 속성이 오른쪽 C.로 설정되어 있습니다. 도구 설명 은 마우스 위에 있는 항목의 세부 정보를 표시합니다. 도구 설명은 ${x}로 설정됩니다.$

예 2:라인 차트에서 합계 및 빈도 함수 적용

차트에 함수를 적용하면 양식 데이터 모델에서 직접 제공하지 않는 데이터를 플롯할 수 있습니다. 이 예에서는 신용카드 명세서 예제를 사용하여 Sum 및 Frequency 함수가 차트에 어떻게 적용되는지 파악했습니다.

3개의 "Bed and Breakfast" 거래가 있는 기능이 없는 라인 차트
그림: Bed and Breakfast" 거래가 있는 기능이 없는 라인 차트

Sum 함수

합계 함수를 적용하여 동일한 데이터 속성의 여러 인스턴스 값을 추가하고 한 번만 표시할 수 있습니다. 예를 들어 다음 그래프에서 Sum 함수는 Y축에 적용하여 3개의 Bed and Breakfast 트랜잭션($99.45, $78 및 $12)의 양을 추가하고 하나의 트랜잭션($189.45)만 표시합니다.

Sum 함수는 동일한 데이터 속성의 여러 인스턴스에 대해 합계를 모으고 표시하려는 경우 그래프를 보다 유용하게 만들 수 있습니다.

creating cardchartsumfunctioncopy

주파수 함수

주파수 함수는 다른 축에 있는 주어진 값에 대해 X축이나 Y축에 있는 값의 수를 반환합니다. Y축(Amount/TransAmount)에 주파수 함수를 적용하면 Bed and Breakfast 트랜잭션과 나머지 트랜잭션 유형의 발생이 세 번 있음을 그래프로 표시합니다.

credit cardchartfrequency functioncopy

차트의 기본 속성

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

​이름차트 요소의 식별자입니다. 이름은 차트에는 표시되지 않지만 다른 구성 요소, 스크립트 및 SOM 표현식의 요소를 참조할 때 유용합니다.

제목(인쇄 채널만 해당) 차트의 제목을 지정합니다.

차트 유형생성할 차트 유형을 지정합니다. 사용 가능한 옵션은 파이, 열, 도넛, 막대(웹 채널만 해당), 선, 선 및 점, 점 및 영역입니다. 자세한 내용은 예제 1을 참조하십시오.인쇄 및 웹에서 차트 출력

X축 > 제목x축의 제목을 지정합니다.

X축 > 데이터 모델 개체 끝(&T); x축에 표시할 양식 데이터 모델 수집 항목의 이름을 지정합니다.

X축 > 기능X축의 값을 계산하는 데 사용할 통계/사용자 지정 함수를 지정합니다. 함수에 대한 자세한 내용은 차트에 함수 사용 및 예제 2를 참조하십시오.라인 차트에 합계 및 평균 함수 적용

X축 > 레이블 방향인쇄 채널의 차트에 있는 레이블의 방향입니다. 레이블의 방향을 [사용자 정의 회전]으로 선택하면 [사용자 정의 회전 각도(도)] 필드가 나타납니다. [사용자 정의 회전 각도(도)] 필드에서 15도 단계의 회전 각도를 선택할 수 있습니다.

Y축 > 제목y축의 제목을 지정합니다.

Y축 > 데이터 모델 개체 끝(& A);y축에 표시할 양식 데이터 모델 수집 항목을 지정합니다. 인쇄 채널에서 Y축에 대한 데이터 모델 개체는 Number 유형이어야 합니다.

Y축 > 함수y축의 값을 계산하는 데 사용할 통계/사용자 지정 함수를 지정합니다. 함수에 대한 자세한 내용은 차트에 함수 사용 및 예제 2를 참조하십시오.라인 차트에 합계 및 평균 함수 적용

범례 표시원형 또는 도넛 차트에 대한 범례를 표시할 수 있습니다.

범례 위치차트에 대한 범례 위치를 지정합니다. 사용 가능한 옵션은 오른쪽, 왼쪽, 위쪽 및 아래입니다.

높이(인쇄 채널만 해당) 차트의 픽셀 단위 높이입니다.

너비(인쇄 채널만) 차트의 픽셀 단위 폭입니다.

노트

스타일 레이어를 사용하거나 테마를 적용하여 웹 채널에서 차트의 너비를 제어할 수 있습니다.

도구 설명(웹 채널만) 웹 채널의 차트에 있는 데이터 포인트 위에 도구 설명이 마우스를 놓을 때 나타나는 형식을 지정합니다. 기본값은 ${x}(${y})입니다. 차트 유형에 따라 차트에서 포인트, 막대 또는 슬라이스를 마우스로 가리키면 변수 ${x} 및 ${y}이(가) X축 및 Y축에 해당하는 값으로 동적으로 대체되고 툴팁에 표시됩니다.

도구 설명을 비활성화하려면 도구 설명 필드를 비워 두십시오. 이 옵션은 라인 및 영역 차트에 적용되지 않습니다. 예를 들어 예제 1:인쇄 및 웹의 차트 출력.

CSS 클래스(웹 채널만 해당)CSS 클래스 필드에 CSS 클래스의 이름을 지정하여 차트에 사용자 정의 스타일링을 적용합니다.

이전 페이지 나누기 필수(인쇄 채널만 해당)차트 앞에 필수 페이지 나누기를 추가하고 차트를 새 페이지의 맨 위에 표시하려면 선택합니다.

이후 페이지 나누기를 필수 로 설정(인쇄 채널만 해당)차트 뒤에 필수 페이지 나누기를 추가하고 새 페이지의 맨 위에 차트 다음의 컨텐트를 배치하려면 선택합니다.

들여쓰기(인쇄 채널만 해당)페이지 왼쪽에서 차트의 들여쓰기를 지정합니다.

차트별 구성일반적인 구성 외에도 다음과 같은 차트별 구성을 사용할 수 있습니다.

  • 내부 반경:도넛형 차트에서 차트에서 내부 원의 반경(픽셀 단위)을 지정할 수 있습니다.

  • 선 색상:차트의 선에 대한 색상의 16진수 값을 지정하는 선, 선 및 점, 영역 차트에 사용할 수 있습니다.

  • 점 색상:[점] 및 [선] 및 [점] 차트에서 차트에 있는 점에 대한 색상의 16진수 값을 지정할 수 있습니다.

  • 영역 색상:[영역] 차트에서 차트의 선 아래 영역에 대한 색상의 16진수 값을 지정할 수 있습니다.

차트에 함수 사용

통계적 함수를 사용하여 차트에서 플로팅할 소스 데이터의 값을 계산하도록 차트를 구성할 수 있습니다. 차트에 함수를 적용하면 양식 데이터 모델에서 직접 제공하지 않는 데이터를 플롯할 수 있습니다.

차트 구성 요소에는 몇 가지 내장 기능이 포함되어 있지만, 고유한 기능을 작성하여 웹 채널의 차트 구성에서 사용할 수 있도록 만들 수 있습니다.

기능 차트

노트

함수를 사용하여 차트의 X축 또는 Y축에 대한 값을 계산할 수 있습니다.

기본 함수

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

평균(평균) X 또는 Y축에 있는 값의 평균을 다른 축에 있는 주어진 값에 반환합니다.

합계 X축이나 Y축에 있는 다른 축에 있는 주어진 값에 대한 모든 값의 합계를 반환합니다.

최대값 X축이나 Y축에 있는 값의 최대값을 다른 축에 반환합니다.

주파수 다른 축에 있는 주어진 값에 대해 X축이나 Y축에 있는 값의 수를 반환합니다.

​범위다른 축에 있는 주어진 값에 대한 X 또는 Y축에 있는 값의 최대값과 최소값 간의 차이를 반환합니다.

중간값이 다른 축에 있는 주어진 값에 대해 X축이나 Y축에서 높은 값과 낮은 값을 구분하는 값을 반환합니다.

최소값 이 다른 축에 있는 주어진 값에 대한 X축이나 Y축에 있는 값의 최소값을 반환합니다.

모드 X축이나 Y축에 있는 값이 다른 축에 있는 주어진 값에 대해 가장 많이 나타나는 값을 반환합니다.

웹 채널의 사용자 지정 함수

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

함수는 배열 또는 값과 범주 이름을 입력으로 가져와서 값을 반환합니다. 예:

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

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

  1. 관련 대화형 통신과 연결된 클라이언트 라이브러리에 사용자 지정 함수를 추가합니다. 자세한 내용은 제출 작업 구성클라이언트측 라이브러리 사용을 참조하십시오.

  2. 함수 드롭다운에 사용자 지정 함수를 표시하려면 CRXDe Lite에서 다음 속성을 사용하여 앱 폴더에 nt:unstructured 노드를 만듭니다.

    • fd/af/reducer 값으로 guideComponentType 속성을 추가합니다. (mandatory)
    • 사용자 지정 JavaScript™ 함수의 정규화된 이름에 value 속성을 추가합니다. (필수) 값을 곱하기 등의 사용자 지정 함수의 이름으로 설정합니다.
    • 함수 드롭다운에 나타나는 사용자 지정 함수의 이름으로 표시할 값과 함께 jcr:description 속성을 추가합니다. 예: 곱하기.
    • 사용자 지정 함수에 대한 간단한 설명이 될 값이 있는 qtip 속성을 추가합니다. 포인터를 함수 드롭다운 목록에서 함수 이름 위로 가져가면 도구 설명으로 나타납니다.
  3. 모두 저장​을 클릭하여 구성을 저장합니다.

이제 이 함수를 차트에서 사용할 수 있습니다.

이 페이지에서는