JavaScript 손익 계산서 분석 앱을 빌드하는 방법
페이지 정보
작성자 MESCIUS
작성일 2024-01-02 16:44 조회 98회
댓글 0건
본문
첨부파일
관련링크
이 Designer UI를 제공하려면
블로그 튜토리얼의 샘플을 다운로드하여 함께 따라와 주시길 바랍니다.
피벗 테이블 만들기
피벗 테이블을 만들기 전에 먼저 데이터 테이블을 만들어야 합니다.
이번 블로그의 경우 이미 자체 테이블을 만들어 두었습니다.
디자이너 컴포넌트에서 피벗 테이블을 시작하려면 먼저 전체 테이블을 선택하고 삽입 탭에서 '피벗 테이블' 버튼을 클릭하세요.
그러면 데이터 소스와 피벗 테이블을 놓을 위치를 지정할 수 있는 피벗 테이블 만들기 대화 상자가 열립니다.
기존 테이블을 사용하여 새 워크시트에서 피벗 테이블을 만들겠습니다.
다른 시트에 표준 설정이 되어 있는 피벗 테이블이 생성됩니다.
PivotPanel
이 샘플을 더 쉽게 만들기 위해 PivotPanel에서 Account Group, Account, Fiscal Year Actual, Fiscal Year Budget 필드만 선택하겠습니다.
이 패널은 피벗 테이블을 선택할 때 화면 오른쪽에 나타납니다.
해당 필드를 선택하면 선택한 필드가 포함된 피벗 테이블이 표시됩니다.
값 필드 설정
기본적으로 피벗 테이블의 값은 포맷되지 않으며, 일부 필드 헤더에는 “Sum of”와 같은 추가 단어가 표시되기도 합니다.
피벗 패널에서 값 필드를 마우스 오른쪽 버튼으로 클릭하여 값과 헤더의 서식을 변경할 수 있습니다.
그러면 값 필드 설정 대화 상자가 나타나며, 하단과 같이 헤더의 사용자 정의 이름 및 값의 숫자 형식 등을 설정할 수 있습니다.
계산된 항목
다음 단계는 계산된 일부 항목을 피벗 테이블에 추가하는 것입니다.
이는 기본적으로 원본 데이터에는 존재하지 않지만 해당 필드를 참조해야 하는 데이터 필드에 해당됩니다.
피벗 테이블 분석 탭에서 계산된 항목 대화 상자를 열면 작동 방식을 확인할 수 있습니다.
대화 상자를 열고 계산된 항목을 만들 수 있습니다.
이 경우에는 매출에서 판매 비용을 뺀 “총 수익”입니다.
이 수식을 채우려면 먼저 항목의 필드(계정 그룹)를 두 번 클릭한 후 항목(매출 또는 판매 비용)을 두 번 클릭해야 합니다.
그러면 올바르게 포맷된 참조가 포함된 수식 입력줄이 채워집니다.
이제 “추가”를 클릭합니다. 계산된 항목이 피벗 테이블에 추가됩니다.
“Fiscal Year Actual(실제 회계 연도) - Fiscal Year Budget(회계 연도 예산)” 인 분산 형식의 계산된 필드를 추가할 수도 있습니다.
테마 및 스타일 지정
피벗 테이블을 좀 더 이해하기 쉽게 만들기 위해 특정 섹션을 축소하고 테마를 적용할 수도 있습니다.
테마/스타일은 “피벗 테이블 스타일” 드롭다운에서 찾을 수 있습니다.
“설정” 탭 아래에서 “Grid Lines(눈금선)”을 클릭하고 가로 및 세로 옵션을 선택 취소함으로써 시트에서 눈금선을 제거하여 더 보기 좋게 만들 수도 있습니다.
조건부 서식
마지막으로 편집할 수 있는 사항은 특정 필드에 조건부 서식을 추가하여 데이터를 더 돋보이게 만드는 것입니다.
이 경우에는 분산 필드에 서식 규칙을 추가하여 예산을 초과하는지, 미달하는지 여부를 강조 표시할 수 있습니다.
먼저 조건부 서식을 적용할 셀을 선택한 다음, 홈 탭의 조건부 서식 드롭다운을 해 아이콘 설정 규칙을 추가해야 합니다.
SpreadJS Designer 내에 완벽한 JavaScript 손익 계산서 피벗 테이블이 만들어졌습니다!
SpreadJS 피벗 테이블로 할 수 있는 일은 이보다 더 많지만, 이 블로그에서는 일부 기능만을 보여 드렸습니다.
SpreadJS를 사용하여 이 파일을 다시 열거나 HTML 페이지에서 사용하려면 파일 > 저장으로 이동하여 SJS 파일로 저장하면 됩니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
