실습 제작 버전 안내
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 실행
아이콘(
)을 클릭하여 프로세스 봇 창을 실행합니다.
- Refresh 동작 추가
- Refresh 동작 설정
6.2 도넛 차트 색상 설정
Module을 활용하여 도넛 차트의 색상을 설정합니다.
- Process Bot 실행
아이콘()을 클릭하여 프로세스 봇 창을 실행합니다. - 모듈 동작 추가
모듈 설정
- 차트 색상 프로세스 봇 설정 완료
6.3 도넛 차트 레이블 위치 변경
Module을 활용하여 도넛 차트의 레이블에 위치를 설정합니다.
- 모듈 동작을 추가 합니다.
- [모듈목록] 탭에서 '레이블' 로 검색하여 [PieChart 레이블 위치 변경] 모듈을 추가합니다.
- 레이블 위치를 변경할 차트를 선택합니다.
- 레이블이 표현될 [-15] 각도를 입력합니다.
- 차트 내부로 표현되고자 할 경우 - 를 포함하여 숫자를 입력합니다.
- 값이 증가할 수록 레이블이 차트 내부쪽으로 표현되며 양수 값이 증가할 수록 레이블은 차트 외부쪽으로 표현됩니다.
6. 아래와 같이 설정되었는지 확인 후 프로세스 봇 창을 종료합니다.
7. 보고서가 정상적으로 작동하는지 확인합니다.
