! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

JavaScript 피벗 테이블을 사용하여 손익계산서 만들기 > 온라인 스터디

본문 바로가기

고급기능 JavaScript 피벗 테이블을 사용하여 손익계산서 만들기

페이지 정보

작성자 GrapeCity 작성일 2022-04-21 16:21 조회 731회 댓글 0건

본문

첨부파일

소매 손익계산서는 많은 비즈니스의 성과와 성공을 측정하기 위해 정기적으로 발행됩니다. 이 블로그는 해당 유형의 재무 보고서를 만들어 사내 또는 상업용 JavaScript 응용 프로그램에 추가하는 방법을 보여줍니다.


이 블로그에서는 강력한 데이터 분석 도구인 피벗 테이블과 동적 손익계산서 보고서를 만들고 상호 작용하는 피벗 테이블 슬라이서를 사용합니다.


이제 시작해 보겠습니다!

손익계산서를 만들려면 아래와 같은 순서로 진행합니다.

  • 데이터 설정

  • 피벗 테이블 삽입

  • 피벗 테이블 빌드

  • 계산된 항목 추가

  • 계산된 필드 추가

  • 슬라이서 추가

  • 일부 모양 조정

  • 최종 보고서

샘플 파일을 여기에서 다운로드하고 따라해 보세요.



데이터 설정

첫 번째 해야 할 일은 데이터가 표 형식인지 확인하는 것입니다. 즉, 데이터가 다음 조건을 따른다는 것입니다.


  1. 모든 레코드가 하나의 행으로 배치되어 있습니다.

  2. 각 열에 데이터 유형이 포함되어 있습니다.

  3. 빈 행이나 열이 없습니다.

  4. 데이터에 소계나 합계가 없습니다.


이 예에서는 보고서의 다양한 섹션을 나타내기 위해 계정 그룹 열을 추가했으며 tblIncome 데이터를 포함한 표의 이름을 지정했습니다.


JavaScript 손익계산서

피벗 테이블 삽입

[디자이너 컴포넌트]

디자이너 컴포넌트를 사용 중인 경우 다음 단계에 따라 피벗 케이블을 삽입하십시오.

  1. tblIncome 표를 선택합니다.

  2. 삽입 탭에서 피벗 테이블을 클릭합니다.

  3. "새 워크시트"를 선택합니다.

  4. 마지막에 확인을 누릅니다.

JavaScript 손익계산서

[Code]

또는 JavaScript를 사용 중인 경우 아래 코드를 사용하여 추가할 수 있습니다.

let pivotTable = sheet.pivotTables.add("myPivotTable", "tblIncome", 1, 1);

피벗 테이블 빌드


피벗 테이블을 정확하게 빌드하기 위해 피벗 테이블 패널을 사용하겠습니다. 디자이너를 사용 중인 경우 피벗 테이블을 클릭할 때마다 시트의 오른쪽에 패널이 표시됩니다.


아래 코드를 사용하여 JavaScript 인스턴스에 추가할 수도 있습니다.

var pt = spread.getActiveSheet().pivotTables.all()[0];
​
var panel = new GC.Spread.Pivot.PivotPanel('myPivotPanel', pt, document.getElementById("panel"));
​
panel.sectionVisibility(GC.Spread.Pivot.PivotPanelSection.fields |GC.Spread.Pivot.PivotPanelSection.area);


이제 오른쪽 영역에 필드를 끌어 놓아 피벗 테이블을 빌드합니다. 사용할 예에서는 계정 그룹계정 필드를 행에 추가하고 실제예산을 값에 추가합니다.


JavaScript 손익계산서

공지 사항: 피벗 테이블은 피벗 패널 없이 작업할 수 있으며 여기에서는 편의를 위해 추가했습니다.



계산된 항목 추가


피벗 테이블 필드의 기존 항목 외에도 사용자 정의 수식을 사용하여 하나 이상의 계산된 항목을 만들 수 있습니다.


  1. 피벗 테이블 분석을 클릭합니다.

  2. 필드, 항목 및 집합 → 계산된 항목

  3. 이름을 3. 총 수익으로 설정하고 수식으로 ='Account Group'['1. Revenue']-'Account Group'['2. COGS']를 설정합니다

JavaScript 손익계산서

다음과 같은 코드만 사용하여 계산된 항목을 추가합니다.

pivotTable.addCalcItem("Account Group", "3. Gross Profit","='Account Group'['1. Revenue']-'Account Group'['2. COGS']");


위의 단계에 따라 계산된 다른 항목을 추가합니다. 관련 수식은 아래 표에 나와 있습니다.

항목수식
'3. 총 수익'='Account Group'['1. Revenue']-'Account Group'['2. COGS']
'5. EBIT'='Account Group'['3. Gross Profit']-'Account Group'['4. Expenses']
'7. 연속 작업의 수입'='Account Group'['5. EBIT']-'Account Group'['6. Interests and Taxes']
'9. 순이익'='Account Group'['7. Income from Continuing Operations']+'Account Group'['8. Below the Line Items']

결과적으로 사용자가 더 잘 이해할 수 있는 손익계산서가 만들어집니다.



계산된 필드 추가


손익계산서는 종종 성과 비교를 위해 분산 분석을 사용합니다. 실제 수익률이 예산 예측보다 높거나 비용이 예산보다 낮은 경우 예산 변동은 양수이거나 유리합니다.


차이차이 %을 피벗 테이블에 추가하기 위해 계산된 필드 기능을 사용하겠습니다.


  1. 피벗 테이블 분석을 클릭합니다.

  2. 필드, 항목 및 집합 → 계산된 필드.

  3. 계산된 필드의 이름 차이를 설정합니다.

  4. 수식에 필드를 추가하려면 필드를 선택한 다음 필드 삽입을 클릭합니다.

  5. 추가 버튼을 클릭합니다.

JavaScript 손익계산서


JavaScript 코드:

pivotTable.addCalcField('diff', '=Actual-Budget');
pivotTable.add("diff", "Difference", GC.Spread.Pivot.PivotTableFieldType.valueField);
​
pivotTable.addCalcField('diff%', '=Actual/Budget-1');
pivotTable.add("diff%", "Difference %", GC.Spread.Pivot.PivotTableFieldType.valueField);


추가한 두 개의 필드는 차이 및 차이 %입니다. 사용된 수식은 다음과 같습니다.

필드수식
차이=Actual-Budget
차이 %=Actual/Budget-1

슬라이서 추가


SpreadJS v15 릴리스에서 피벗 테이블을 필터링하는 데 사용되는 새로운 기능으로 슬라이서를 추가했습니다. 이 기능을 사용하여 지역 및 회계 연도별로 데이터를 필터링합니다.


디자이너 컴포넌트를 사용 중인 경우 다음과 같이 수행합니다.

  1. 피벗 테이블 분석을 클릭합니다.

  2. 슬라이서를 삽입합니다.

  3. 지역회계 연도를 선택합니다.

JavaScript 손익계산서

javascript에서 슬라이서를 추가하려면 아래 코드를 사용합니다.

var regionSlicer = sheet.slicers.add("Region", pivotTable.name(), "Region", GC.Spread.Sheets.Slicers.SlicerStyles.dark1(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable); 
var yearSlicer = sheet.slicers.add("Financial Year", pivotTable.name(), "Financial Year", GC.Spread.Sheets.Slicers.SlicerStyles.dark4(), GC.Spread.Sheets.Slicers.SlicerType.pivotTable);

일부 모양 조정

피벗 테이블을 더욱 쉽게 읽을 수 있도록 다음과 같이 일부를 조정합니다.


계산된 항목 축소

이렇게 하면 계산된 항목의 값을 표시하도록 요약된 계정이 숨겨집니다.

JavaScript 손익계산서



그룹 상단에 소계 표시
  1. 디자인 탭으로 이동합니다.

  2. 소계를 클릭합니다.

  3. "그룹 상단에 모든 소계 표시"를 선택합니다.

JavaScript 손익계산서




각 항목 뒤에 빈 줄 삽입

  1. 디자인 탭으로 이동합니다.

  2. 빈 행을 클릭합니다.

  3. "각 항목 뒤에 빈 줄 삽입"을 선택합니다.

JavaScript 손익계산서


버튼 및 필드 헤더 숨기기

  1. 피벗 테이블 분석 탭으로 이동합니다.

  2. 버튼필드 헤더를 클릭합니다.

JavaScript 손익계산서




피벗 레이아웃 변경

  1. 디자인 탭으로 이동합니다.

  2. 보고서 레이아웃을 클릭합니다.

  3. "개요 형식으로 표시"를 선택합니다.

JavaScript 손익계산서



위에 언급된 수정 사항은 코드를 통해 쉽게 변경할 수 있습니다.


SpreadJS에서는 응용 프로그램의 필요에 따라 피벗 테이블의 모양과 기능을 사용자 정의할 수 있는 여러 가지 옵션을 제공합니다.


아래와 같이 피벗 테이블 옵션과 레이아웃을 변경할 수 있습니다.

let option = pivotTable.options;
option = {
       allowMultipleFiltersPerField: true,
       insertBlankLineAfterEachItem: true, // Insert Blank Line after Each Item *
       grandTotalPosition: GC.Spread.Pivot.GrandTotalPosition.row,
       subtotalsPosition: GC.Spread.Pivot.SubTotalsPosition.top, // Show SubTotals at the Top of the Group *
       displayFieldsInPageFilterArea: GC.Spread.Pivot.DisplayFields.downThenOver,
       reportFilterFieldsPerColumn: 1,
       bandRows:true,
       bandColumns: true,
       showRowHeader: true,
       showColumnHeader: true,
       showDrill: true, // Collapse Buttons *
       showMissing: true,
       showToolTip: true,
       missingCaption: 'something',
       fillDownLabels: false,
       repeatAllItemLabels: false,
       rowLabelIndent: 4,
       mergeItem: false,
       showHeaders: true // Collapse Field Headers *
  };
pivotTable.layoutType(1); // Change the Pivot Layout to Outline Form *



조건부 및 사용자 정의 서식 지정


다음으로 피벗 테이블 필드의 서식을 지정하겠습니다. 아래와 같이 피벗 패널을 사용하여 서식을 설정할 수 있습니다.


  1. 값 - > 값 필드 설정으로 이동합니다.

  2. 숫자 형식을 클릭합니다.

  3. 서식을 설정합니다. 이 경우: $#,##0

  4. 확인합니다.

JavaScript 손익계산서


코드별로 수행하려면 아래를 참조하십시오.

//identify the area
var areaActual= {
           dataOnly: true,
           references: [
              {
                   fieldName: "Actual",
                   items: [fieldName]
              }
          ]
      };

var style = new GC.Spread.Sheets.Style();
style.formatter = "$#,##0";
//set style to the area
pivotTable.setStyle(areaActual, style);


다른 필드에 대해 동일한 로직을 사용할 수 있습니다. 아래 표에 해당하는 서식을 사용합니다.

필드서식
예산$#,##0
차이[Green]$#,##0;[Red]-$#,##0
차이 %[Green]0.00%;[Red]-0.00%


조건부 서식을 사용하여 뷰어가 가장 큰 계정을 볼 수 있도록 더욱 빠르게 설정하는 것이 좋습니다. 피벗 테이블에서는 조건부 규칙을 지정된 치수로 설정할 수 있는 기능을 제공합니다. 피벗 테이블 레이아웃이 어떻게 변경되더라도 조건부 규칙은 지정된 치수만 따릅니다.


디자이너를 사용 중인 경우 아래 단계에 따라 조건부 서식 규칙을 추가하십시오.


  1. 셀을 선택합니다. G7:H11

  2. 홈 → 조건부 서식 → 새 규칙.

  3. "셀 값을 기준으로 모든 셀의 서식 지정"을 선택합니다.

  4. 서식 스타일: 2-색상 배율(가장 높은 값은 파란색, 가장 낮은 값은 흰색).

JavaScript 손익계산서


비용은 노란색, 수입은 파란색을 사용하는 것을 염두에 두고 다른 계정 그룹에도 동일한 단계를 반복합니다.



최종 보고서


아래에는 손익계산서 보고서가 최종적으로 어떤 모습인지 보여주는 스크린샷이 있습니다.

JavaScript 손익계산서


이는 JavaScript 컴포넌트를 사용하여 필요한 재무 보고서를 생성하여 소매 비즈니스 성과를 평가하고 의사결정에 영향을 미치고 변화를 주도할 수 있는 통찰력을 발견할 수 있는 단계를 설정하는 방법입니다.





지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!

 
  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.