첫번째앱만들기 16강. 간단한 차트 만들어 보기
페이지 정보
작성자 MESCIUS
작성일 2020-10-23 10:03 조회 2,206회
댓글 0건
본문
첨부파일
관련링크
이번 강의에서는 앞서 만든 월별 필터 기능에 더하여, 부서별로 휴가 인원을 한눈에 파악할 수 있도록 차트를 추가 해보겠습니다.
Excel에서 차트를 만들어 보셨다면 쉽게 익히실 수 있으며,
해당 기능은 포건시를 이용하여, 다양한 대시보드를 만드는데 활용하실 수 있습니다.
오늘도 코딩 없이 Excel 느낌 그대로 시작해봅시다~~!!
15강 월별필터 기능 만들어보기에 이어서 시작하겠습니다.
부서별 휴가 인원 계산하기 - COUNTIF 함수
Excel과 마찬가지로, 차트를 만들기 위한 데이터 정의를 먼저 해야 합니다.
부서 별로, COUNTIF 함수를 이용하여 휴가 인원을 계산하는 데이터 세트를 만들어 보겠습니다.
<주의사항>
차트를 만들기 전까지, 앞으로 만들 데이터 필드에는 "셀병합을 하지 말아주세요."
셀 병합으로 인하여, 차트 생성 시에 의도치 않은 값들이 들어갈 수 있습니다.
1. 좌측 "프로젝트 탐색기">"페이지 섹션"에서, "페이지2"시트를 더블 클릭하여 오픈합니다.
2. "G24:G30"의 범위의 셀 안에, 일전에 휴가 신청 페이지 생성 시 콤보박스에 직접 입력한 모든 부서명을 입력해줍니다.
- G24 = "부서명" 입력
- G25 = "영업1팀" 입력
- G26 = "영업2팀" 입력
- G27 = "고객지원1팀" 입력
- G28 = "고객지원2팀" 입력
- G29 = "개발1팀" 입력
- G30 = "개발2팀" 입력
3. "L24" 셀에 "휴가인원"이라는 값을 입력합니다.
4. 다음으로 "N25:N30" 셀 범위에, 실제 부서명을 기준으로 부서별 휴가 신청 인원을 계산하는 엑셀 수식을 입력합니다.
모든 직원의 휴가가 조회되는 리스트뷰의 "부서" 셀(R8)과 이전 단계에서 작성한 "부서명"을 비교하여 둘이 같을때만 카운트합니다.
리스트 뷰의 "부서" 컬럼은 기준값이기 때문에, "F4"키 또는 "$"기호를 입력하여 절대참조로 변경합니다.
- N25 = "=COUNTIF($R$8,G25)" 입력
- N26 = "=COUNTIF($R$8,G26)" 입력
- N27 = "=COUNTIF($R$8,G27)" 입력
- N28 = "=COUNTIF($R$8,G28)" 입력
- N29 = "=COUNTIF($R$8,G29)" 입력
- N30 = "=COUNTIF($R$8,G30)" 입력
5. 위에서 입력한 수식, "N25:N30"의 셀 영역의 텍스트를 오른쪽 정렬해 줍니다.
이후 "O25:O30"에 영역에 "명" 이라고 입력해줍니다.
6. "부서명"과 "휴가인원" 텍스트 셀의 아래 영역에 대해 셀 병합을 해줍니다.
- G24:K24 = 셀 병합 | 채우기색 : 파란색 | 글자색 : 흰색 | 굵은 글씨
- L24:O24 = 셀 병합 | 채우기색 : 파란색 | 글자색 : 흰색 | 굵은 글씨
7. 마지막으로 가독성을 높이기 위해, 아래와 같이 (또는 원하시는 방법으로) 테두리를 그려줍니다.
차트로 시각화 구현하기
이제 앞에서 정리한 표를 기반으로, 차트를 통해 사용자가 한눈에 부서별 휴가신청 동향을 볼 수 있도록 만들어 보겠습니다.
Excel에서 차트를 만드는 방법과 동일하며, 쉽게 이해하실 수 있습니다.
1. 먼저, 좌측 "프로젝트 탐색기">"페이지 섹션"에서, "페이지2" 시트를 더블 클릭하여 오픈합니다.
2. "G25:N30"셀을 선택한 후에, 상단 "삽입" 메뉴의 "차트 섹션 > 가로 막대형 > 묶은 가로막대형"을 클릭합니다. 이후 생성된 차트 영역을 원하는 위치에 끌어다 놓습니다.
3. 생성된 차트를 선택한 후, 상단 "디자인" 메뉴에서 "데이터 섹션 > 행/열 전환"을 클릭하여 원하는 형식으로 차트를 변경합니다.
4. 상단 "디자인" 메뉴에서 "데이터 섹션 > 데이터 선택"을 클릭하여, 올바른 차트를 그려주기 위한 데이터를 선택하기 위한 준비를 합니다.
5. "데이터 소스 선택" 창의 범례항목(계열)에 들어있는 "더미(Dummy)값"을 모두 삭제하여 줍니다.
6. 계열(Series) 데이터 추가를 위해, "추가" 버튼을 눌러줍니다.
7. "계열 추가" 팝업창에서, 휴가인원 계열 데이터를 선택 후, 확인 버튼을 클릭하여 창을 빠져나옵니다.
- 계열이름 = "휴가인원" 입력
- 계열 값 = "=페이지2!N25:N30" 선택 (셀 선택 버튼 이용)
8. "데이터 소스 선택" 창에서, "범례 항목"에 정상적으로 "휴가인원"이 추가되어 있는지 확인 후에, 확인 버튼을 클릭하여 완료합니다.
위의 작업이 완료되면, 아래와 같이 보여주고자 하는 데이터가 들어 있는 차트가 생성된 것을 볼 수 있습니다.
다음 섹션에서는 차트를 조금 더 보기 좋게 꾸며보겠습니다.
차트 꾸미기 - 가로축 단위 변경
조금 더 차트의 가독성을 높이기 위해, 몇 가지 추가 작업을 해보고자 합니다.
먼저, 차트의 가로축의 데이터 표현 간격을 "1(1일)" 단위로 변경해보겠습니다.
1. 생성한 "차트"를 선택한 후, 상단 "레이아웃" 메뉴 > 축 > 기본 가로 축 > 기타 기본 가로 축 옵션…"을 선택합니다.
2. 이후 나타나는 "축 서식" 창의 "축 옵션" 탭에 있는 "주 단위" 값을 "고정" 그리고 "1" 로 수정해 줍니다.
3. "확인" 버튼을 눌러 창을 빠져 나오면, 아래와 같이 가로축 단위가 1 단위로 변경된 것을 볼 수 있습니다.
차트 꾸미기 - 범례 숨기기 및 차트 영역 테두리 삭제
다음으로 "휴가인원"이라는 범례 표시를 차트 상에서 숨김 처리 하여, 최종 사용자가 심플하게 차트만 볼 수 있도록 만들어 보겠습니다.
1. "차트" 선택 후, "상단 "레이아웃" 메뉴 > 범례 > 없음"을 선택합니다. 이후 우측에 있던 범례가 사라진 것을 확인할 수 있습니다.
다음으로 차트의 영역을 보여주는 테두리를 제거해보겠습니다.
2. "차트" 선택 후, 마우스 오른쪽 버튼을 눌러, "차트 영역 서식" 메뉴로 들어갑니다.
3. "차트 영역 서식 창"에서 "테두리 스타일 탭"을 클릭한 후, 테두리 색을 "흰색(White)"으로 선택하고, "확인"을 눌러 설정을 마무리 합니다.
이제 모든 작업이 완료 되었으며, 실행 버튼을 눌러 아래와 같이 동작하는지 확인해 봅니다.
재미있는 것은 이전에 작업한 월별 필터 또는 검색 기능에 따라서 차트도 자동으로 함께 변경이 되는 것을 확인해볼 수 있습니다.
원활한 테스트를 위해, 미리 휴가신청자를 여러명 등록하였습니다.
Forguncy 사용 중 기술 문의 또는 구매에 대한 상담이 필요하실 경우, 언제든지 연락 부탁드립니다.
- 기술 문의 : Forguncy - Q&A | 토론
- 구매 문의 : sales-kor@grapecity.com
- 전화번호 : 1670-0583
댓글목록
등록된 댓글이 없습니다.
