실습 제작 버전 안내
Release No : 7.0.500.20240516
실습 예제 |차트를 활용한 경영 현황 대시보드 화면 |
---|
|
경영 현황 Template 실습 Template 다운로드 위 실습 예제를 학습하기 위한 실습 Template는 아래의 보고서를 다른 이름으로 저장하여 사용합니다.
|
Step 1. 조회 조건 컨트롤 생성하기
데이터 조회를 위한 컨트롤을 생성합니다.
1.1 Calendar 생성
- 상단 메뉴 영역에서 [UI Bot] > [Calendar] > [Month]를 클릭해 Calendar 컨트롤을 생성합니다.
- 우측의 컨트롤 속성 편집 영역에서 다음과 같은 속성을 설정합니다.
- Name: VS_YEAR
- InitValue : 202204
1.2 ComboBox 생성
- 상단 메뉴 영역에서 [UI Bot] > [ComboBox] > [Combo]를 클릭해 ComboBox 컨트롤을 생성합니다.
- 우측의 컨트롤 속성 편집 영역에서 다음과 같은 속성을 설정합니다.
- Name : VS_PRODUCT
- DataSource : 제품
- UseAllItems 활성화
- AutoRefresh 활성화
Step 2. 제품별 판매수량
차트 속성을 활용하여 데이터를 Olap-Grid와 연결합니다.
2.1 Olap-Grid 설정
- Olap-Grid 컨트롤 생성
- 컨트롤 속성 변경
- Name : OlapGrid1
- DataSource : OLAP
- AutoRefresh 활성화
- Olap-Grid 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.
- 필드 변경
- Column : MONTH_CD
- Row : NM
- Data : 판매수실적
- 설정
- 자동 선택 영역 활성화
- 범위 : 오른쪽 12, 아래쪽 9
- Olap-Grid 컨트롤 숨기기
2.2 Chart 설정
- Chart 컨트롤 생성
- 컨트롤 속성 변경
- Name : Chart1
- Olap-Grid : Form.OlapGrid1
- 차트 유형 변경
- 차트 유형 : 직선형
- Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.
- 범례
- 위치 : Middle, Right
- 방향 : Vertical
보고서가 정상적으로 작동하는지 확인합니다.
Step 3. 월별 계획대비 판매현황
차트 속성을 활용하여 데이터를 Olap-Grid와 연결합니다.
3.1 Olap-Grid 설정
- Olap-Grid 컨트롤 생성
- 컨트롤 속성 변경
- Name : OlapGrid2
- DataSource : OLAP
- AutoRefresh 활성화
- Olap-Grid 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.
- 필드 변경
- Column : MONTH_CD
- Row : Measure
- Data : 판매실적금액, 판매계획금액
- 설정
- 자동 선택 영역 활성화
- 범위 : 오른쪽 12, 아래쪽 2
- Olap-Grid 컨트롤 숨기기
3.2 Chart 설정
- Chart 컨트롤 생성
- 컨트롤 속성 변경
- Name : Chart2
- Olap-Grid : Form1.OlapGrid2
- Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.
- 계열
- 판매계획금액 차트 유형 : 직선형
- 범례
- 위치 : Top, Center
보고서가 정상적으로 작동하는지 확인합니다.
Step 4. 지역별 판매액 vs 영업이익률
이중 축으로 구성된 차트를 설정합니다.
- Chart 컨트롤 생성
- 컨트롤 속성 변경
- Name : Chart3
- DataSource : 이중 축 차트
- AutoRefresh 활성화
- Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.
- 계열
- 영업이익률 차트 유형 : 직선형
- 영입이익률 축 : Y2
- 영업이익률 차트 유형 : 직선형
- 축
- Y2 표시 활성화
보고서가 정상적으로 작동하는지 확인합니다.
Step 5. 제품군별 판매현황
도넛 차트와 막대형 차트를 생성합니다.
5.1 도넛 차트
- Pie-Chart 컨트롤 생성
- 컨트롤 속성 변경
- Name : Chart4
- DataSource : 도넛&BAR 차트
- AutoRefresh 활성화
- 차트 유형 변경
- 차트 유형 : 도넛형
- Pie-Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.
- 기본
- 데이터 레이블 : Value
- 계열
- 레이블 필드 : 제품중분류명
- 값 필드 : PER
- 서식 : {0:N1}%
- 범례
- 표시 비활성화
보고서가 정상적으로 작동하는지 확인합니다.
5.2 막대 차트
- Chart 컨트롤 생성
- 컨트롤 속성 변경
- Name : Chart5
- DataSource : 도넛&BAR 차트
- AutoRefresh 활성화
- 차트 유형 변경
- 차트 유형 : 묶은 가로 막대형
- Chart 컨트롤을 우 클릭하여 디자인 창을 실행한 후 디자인 속성을 변경합니다.
- 기본
- 데이터 레이블 : Value
- 계열
- PER, PER2 계열 표시 비활성화
- 범례
- 표시 비활성화
보고서가 정상적으로 작동하는지 확인합니다.
Step 6. Process Bot 설정하기
Process Bot을 활용하여 보고서의 동작을 설정합니다.
6.1 조회 버튼 생성
보고서를 조회할 수 있는 버튼을 설정합니다.
- Button 컨트롤 생성
- 컨트롤 속성 변경
- Name : BTN_REFRESH
- Text : 조회
- Process Bot 아이콘()을 클릭하여 프로세스 봇 창을 실행하고, 버튼 컨트롤을 더블 클릭합니다.
- Activities 탭을 클릭 후 Refresh 모듈을 더블 클릭합니다.
- 모듈 파라미터 설정 아이콘()을 클릭하여, Refresh 동작을 설정합니다.
6.2 도넛 차트 색상 설정
Module을 활용하여 도넛 차트의 색상을 설정합니다.
- Process Bot 아이콘()을 클릭하여 프로세스 봇 창을 실행하고, Report 를 더블 클릭합니다.
- Activities > Modules > 컨트롤별 > Chart > '차트 색상 팔렛트 지정 하기' 모듈을 선택하고 값을 설정합니다.
- 차트 선택
- 색상 값 입력
- Report > OnDocumentLoadComplete 이벤트에 '차트 색상 팔렛트 지정하기' 모듈을 연결합니다.
6.3 도넛 차트 레이블 위치 변경
Module을 활용하여 도넛 차트의 레이블 위치를 설정합니다.
- Activities 탭에서 '레이블' 로 검색하여 'PieChart 레이블 위치 변경' 모듈을 더블 클릭합니다.
- 모듈 파라미터 설정 아이콘()을 클릭하여, 'PieChart 레이블 위치 변경' 동작을 설정합니다.
- 차트 선택 : Chart4
- 레이블이 표현될 각도 입력 : -15
- 차트 내부로 표현되고자 할 경우 - 를 포함하여 숫자를 입력합니다.
- Report > OnDocumentLoadComplete 이벤트에 'PieChart 레이블 위치 변경' 모듈을 연결합니다.
4. 아래와 같이 설정되었는지 확인 후 프로세스 봇을 저장하고 종료합니다.
5. 보고서가 정상적으로 작동하는지 확인합니다.