JavaScript로 재무 응용 프로그램 만들기 > 블로그 & Tips

본문 바로가기

SpreadJS

블로그 & Tips

JavaScript로 재무 응용 프로그램 만들기

페이지 정보

작성자 GrapeCity 작성일 20-11-10 15:51 조회 1,174회 댓글 0건

본문

첨부파일

중요한 재무 및 투자 계획을 선정할 때는 경비와 매출의 관점에서 비즈니스를 바라보는 것이 필수적입니다. 예를 들어 회사의 경비를 확인하면 비즈니스 확장에 따른 ROI를 판단하는 데 도움이 됩니다.

SpreadJS를 사용하여 비즈니스 경비 및 매출을 추적하기 위한 재무 응용 프로그램을 만들 수 있습니다. 이 게시물에서는 JavaScript로 재무 응용 프로그램을 만드는 방법을 안내합니다.

JavaScript로 재무 응용 프로그램 만들기

링크를 따라 이동하여 이 게시물에 사용된 샘플을 다운로드하십시오.


템플릿 만들기

SpreadJS Designer에서 셀 유형, 스타일, 간격을 설정하면 응용 프로그램을 더 쉽게 설계할 수 있습니다. 이 자습서에서 사용할 템플릿을 미리 만들어 두었습니다.

JavaScript로 재무 응용 프로그램 만들기

이 템플릿에는 다음과 같은 여러 시트가 있습니다.

  • CompanyDashboard: 몇 가지 차트가 포함된 다른 시트를 요약한 응용 프로그램의 기본 보기

  • Banking: 회사의 모든 결제 내역 및 현재 계좌 잔액에 대한 보기

  • Expenses: 회사에서 사용한 일일 경비 목록

  • SalesTransactions: 회사에서 고객에게 판매한 모든 판매 거래 목록

  • CheckingTemplate: "Banking" 시트의 계좌 잔액을 확인하기 위한 범위 템플릿

  • DashboardBalanceTemplate: "CompanyDashboard" 시트의 계좌 잔액을 확인하기 위한 범위 템플릿


JavaScript 응용 프로그램 설정

시작하려면 HTML 파일을 만들고 SJS 참조, JS 데이터 파일, 템플릿 등 필요한 모든 라이브러리와 파일을 로드해야 합니다.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>Spread JS</title>
​
​
  <link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
  <script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>
  <script type="text/javascript" src="./node_modules/@grapecity/spread-sheets-charts/dist/gc.spread.sheets.charts.min.js"></script>
​
  <script type="text/javascript" src="./FinancialTemplate.js"></script>
​
  <script type="text/javascript" src="./data/checkingRegisterData.js"></script>
  <script type="text/javascript" src="./data/expenses.js"></script>
  <script type="text/javascript" src="./data/salesTransactions.js"></script>
​
  <script type="text/javascript" src="./app.js"></script>
</head>
<body>
  <div id="spreadSheet" style="width: 1300px; height: 700px; border: 1px solid gray"></div>
</body>
</html>


이 사례에서는 NPM의 SpreadJS 파일을 사용합니다. 응용 프로그램 폴더에서 다음 명령을 실행하여 해당 응용 프로그램에 설치할 수 있습니다.

npm install @grapecity/spread-excelio @grapecity/spread-sheets @grapecity/spread-sheets-charts


그다음에는 방금 만든 템플릿으로 통합 문서를 초기화하고, 시트에 대해 몇 가지 변수도 설정합니다.

window.onload = function() {
  var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 3 });
  spread.fromJSON(FinancialTemplate);
  spread.options.allowDynamicArray = true;
  spread.setActiveSheetIndex(0);
​
  var bankingSheet = spread.getSheet(1);
  var expensesSheet = spread.getSheet(2);
  var salesTransactionsSheet = spread.getSheet(3);
}


나중에 몇 가지 함수를 만들어 각 시트를 로드하고 데이터와 수식도 설정해야 하지만, 여기서는 우선 함수를 호출만 하겠습니다.

spread.suspendPaint();
setBankingSheet(spread);
setExpensesSheet(expensesSheet);
setSalesTransactionsSheet(salesTransactionsSheet);
setDashboardSheet(spread);
sheetsInitialized[0] = true;
spread.resumePaint();


차트를 처음으로 설정해야 하는 시트인지 여부를 파악하기 위해 일부 로직에 "sheetsInitialized" 어레이를 사용했습니다. 이 통합 문서의 차트는 특정 셀의 픽셀 위치를 사용하여 초기화되므로 먼저 각 시트를 개별적으로 초기화한 다음 해당 시트의 차트를 초기화해야 합니다. "sheetsInitialized" 어레이를 사용하면 다음과 같이 ActiveSheetChanged 이벤트에서 이러한 차트를 설정하기 위한 함수를 호출할 수 있습니다.

spread.bind(GC.Spread.Sheets.Events.ActiveSheetChanged, function(sender, args) {
  switch (args.newSheet.name()) {
      case "Banking":
          (!sheetsInitialized[1]) && setBankingChartLocations(bankingSheet);
          sheetsInitialized[1] = true;
          break;
      case "Expenses":
          (!sheetsInitialized[2]) && setExpensesChartLocations(expensesSheet);
          sheetsInitialized[2] = true;
          break;
      case "SalesTransactions":
          (!sheetsInitialized[3]) && setSalesChartLocations(salesTransactionsSheet);
          sheetsInitialized[3] = true;
          break;
  }
});


범위 템플릿 시트를 숨기고 통합 문서의 스크롤바 설정도 지정합니다.

spread.getSheet(4).visible(false);
spread.getSheet(5).visible(false);
​
spread.options.scrollbarMaxAlign = true;


시트 초기화

이 통합 문서의 시트는 대부분 구조가 비슷하여 차트 1개 이상, 범위 템플릿 1개, 데이터 바인딩된 테이블 1개가 포함되어 있습니다.

JavaScript로 재무 응용 프로그램 만들기

범위 템플릿을 사용하거나 차트를 설정하기 전에 우선 테이블의 데이터를 설정해야 합니다. 이 데모에서는 이 블로그에서 앞서 로드했던 3가지 JS 파일의 샘플 데이터 일부를 통합했습니다. 각 파일에서 테이블 초기화에 사용할 테이블 열의 어레이를 만들고, 테이블 내 데이터의 서식을 지정할 수 있습니다.

function setBankingSheet(spread) {
  var sheet = spread.getSheet(1);
​
  // Freeze the top area of the sheet
  sheet.frozenRowCount(16);
​
  // Set Table data from checkingRegisterData.js
  var tableColumns = [],
      names = ['Date', 'Payee', 'Memo', 'Payment', 'Deposit', 'Balance', 'Type', 'Account', 'Added in Banking'],
      labels = ['Date', 'Payee', 'Memo', 'Payment', 'Deposit', 'Balance', 'Type', 'Account', ' Added in Banking'];
  var table = sheet.tables.add('checkingRegisterTable', 15, 0, checkingRegisterData.data.length, 8, GC.Spread.Sheets.Tables.TableThemes.medium21);
  table.autoGenerateColumns(false);
  names.forEach(function (name, index) {
      var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
      tableColumn.name(labels[index]);
      tableColumn.dataField(name);
      tableColumns.push(tableColumn);
  });
  table.bind(tableColumns, 'data', checkingRegisterData);
​
  // Convert strings to numbers
  for (var r = 16; r < 16 + checkingRegisterData.data.length; r++) {
      sheet.setValue(r, 0, new Date(sheet.getValue(r, 0)));
      (sheet.getValue(r, 3) != "") && sheet.setValue(r, 3, parseFloat(sheet.getText(r, 3).replace(/,/g,'')));
      (sheet.getValue(r, 4) != "") && sheet.setValue(r, 4, parseFloat(sheet.getText(r, 4).replace(/,/g,'')));
      (sheet.getValue(r, 5) != "") && sheet.setValue(r, 5, parseFloat(sheet.getText(r, 5).replace(/,/g,'')));
  }
  // Format currency
  sheet.getRange(16, 3, checkingRegisterData.data.length, 3).formatter('_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)');
}


차트용 데이터 정렬

수식을 사용하여 데이터를 정렬하고 차트에 서식 없이 값만 사용하면 차트를 만들기가 더 쉬워집니다.

// Create sorted combined data for line chart
sheet.setText(0, 9, "Date");
sheet.setText(0, 10, "Date String");
sheet.setText(0, 11, "Total");
// Sort the dates and get all unique values by millisecond
sheet.setFormula(1, 9, "SORT(UNIQUE(checkingRegisterTable[[#Data],[Date]]))");
sheet.setFormula(1, 11, "SUMIF(checkingRegisterTable[[#Data],[Date]],$J2,checkingRegisterTable[[#Data],[Balance]]");
startRange = new GC.Spread.Sheets.Range(1, 11, 1, 1);
wholeRange = new GC.Spread.Sheets.Range(1, 11, 25, 1);
sheet.fillAuto(startRange, wholeRange, {
  fillType: GC.Spread.Sheets.Fill.FillType.auto,
  series: GC.Spread.Sheets.Fill.FillSeries.column,
  fillDirection:GC.Spread.Sheets.Fill.FillDirection.down
});
​
// Create a separate column for formatting those unique sorted millisecond values as strings
for (var r = 1; r < 26; r++) {
  sheet.setValue(r, 10, formatDateString(sheet.getValue(r, 9)));
}
​
sheet.setText(0, 13, "Type");
sheet.setText(0, 14, "Payment");
sheet.setFormula(1, 13, "SORT(UNIQUE(checkingRegisterTable[[#Data],[Type]]))");
sheet.setFormula(1, 14, "SUMIF(checkingRegisterTable[[#Data],[Type]],$N2,checkingRegisterTable[[#Data],[Payment]])");
var startRange = new GC.Spread.Sheets.Range(1, 14, 1, 1);
var wholeRange = new GC.Spread.Sheets.Range(1, 14, 10, 1);
sheet.fillAuto(startRange, wholeRange, {
  fillType: GC.Spread.Sheets.Fill.FillType.auto,
  series: GC.Spread.Sheets.Fill.FillSeries.column,
  fillDirection:GC.Spread.Sheets.Fill.FillDirection.down
});


범위 템플릿 만들기

CheckingTemplate 시트에 정의된 범위용 템플릿 시트를 사용하여 범위 템플릿 셀 유형을 만들고 시트에 이러한 범위를 설정할 수 있습니다.

// Create range template
var templateSheet = spread.getSheetFromName("CheckingTemplate");
var cellType = new GC.Spread.Sheets.CellTypes.RangeTemplate(templateSheet);
sheet.setCellType(0, 0, cellType, GC.Spread.Sheets.SheetArea.viewport);
​
​
// Bind data for the range template
var balanceInfo = {
  CurrentBalance: sheet.getValue(16, 5)
};
// The value for the cell is used as the data source for the range template
sheet.setValue(0, 0, balanceInfo);


범위 템플릿에서는 해당 셀 유형으로 된 셀의 값을 사용하는데, 여기서는 CurrentBalance라는 한 가지 속성만 가진 개체입니다. 템플릿 시트에는 데이터 소스 템플릿만 정의되어 있고, 셀 중 하나에 CurrentBalance 속성이 설정되어 있습니다.

JavaScript로 재무 응용 프로그램 만들기

차트 만들기

정렬된 데이터가 준비되었으므로 이제 이 데이터에서 차트를 만들 수 있습니다. 기본 크기가 100픽셀 X 100픽셀인 시트의 위치 0, 0에서 시트가 초기화되었습니다. 시트가 처음으로 로드되면 앞서 바인딩한 activeSheetChanged 이벤트와 사용자 정의 함수를 사용하여 각 차트의 크기와 위치를 변경해 보겠습니다.

// Create charts
var lineChart = sheet.charts.add('line', GC.Spread.Sheets.Charts.ChartType.line, 0, 0, 100, 100, "K1:L26");
var lineTitle = lineChart.title();
lineTitle.text = "Balance Over Time";
lineChart.title(lineTitle);
var lineLegend = lineChart.legend();
lineLegend.visible = false;
lineChart.legend(lineLegend);
lineChart.ignoreHidden(false);
lineChart.useAnimation(true);
​
var pieChart = sheet.charts.add('pie', GC.Spread.Sheets.Charts.ChartType.pie, 0, 100, 100, 100, "N1:O11");
var pieTitle = pieChart.title();
pieTitle.text = "Payments by Type";
pieChart.title(pieTitle);
var pieLegend = pieChart.legend();
pieLegend.position = GC.Spread.Sheets.Charts.LegendPosition.right;
pieChart.legend(pieLegend);
pieChart.ignoreHidden(false);
pieChart.useAnimation(true);
Once the sheet is navigated to and set as the active sheet, the ActiveSheetChanged event calls the function to set the size and position manually:
​
function setBankingChartLocations(sheet) {
  var lineChart = sheet.charts.all()[0];
  var lineStartCell = sheet.getCellRect(5, 0);
  var lineEndCell = sheet.getCellRect(15, 5);
  lineChart.x(lineStartCell.x);
  lineChart.y(lineStartCell.y);
  lineChart.width(lineEndCell.x - lineStartCell.x);
  lineChart.height(lineEndCell.y - lineStartCell.y);
​
​
  var pieChart = sheet.charts.all()[1];
  var pieStartCell = sheet.getCellRect(0, 5);
  var pieEndCell = sheet.getCellRect(15, 8);
  pieChart.x(pieStartCell.x);
  pieChart.y(pieStartCell.y);
  pieChart.width(pieEndCell.x - pieStartCell.x);
  pieChart.height(pieEndCell.y - pieStartCell.y);   
}


나머지 시트도 동일한 로직에 따라 테이블, 범위 템플릿, 차트를 설정하게 됩니다. JavaScript로 재무 응용 프로그램 만들기

이 정도만 알아도 업무용 재무 응용 프로그램을 직접 만들 수 있지만, SpreadJS로 할 수 있는 작업은 이 밖에도 무궁무진합니다. 아래에 여러분의 의견을 남겨 주시고 즐겁게 코딩하세요!

  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.