JavaScript로 재무 응용 프로그램 만들기
페이지 정보
작성자 GrapeCity 작성일 2020-11-10 15:51 조회 4,291회 댓글 0건본문
첨부파일
관련링크
중요한 재무 및 투자 계획을 선정할 때는 경비와 매출의 관점에서 비즈니스를 바라보는 것이 필수적입니다. 예를 들어 회사의 경비를 확인하면 비즈니스 확장에 따른 ROI를 판단하는 데 도움이 됩니다.
를 사용하여 비즈니스 경비 및 매출을 추적하기 위한 재무 응용 프로그램을 만들 수 있습니다. 이 게시물에서는 JavaScript로 재무 응용 프로그램을 만드는 방법을 안내합니다.
링크를 따라 이동하여 이 게시물에 사용된 샘플을 다운로드하십시오.
템플릿 만들기
SpreadJS Designer에서 셀 유형, 스타일, 간격을 설정하면 응용 프로그램을 더 쉽게 설계할 수 있습니다. 이 자습서에서 사용할 템플릿을 미리 만들어 두었습니다.
이 템플릿에는 다음과 같은 여러 시트가 있습니다.
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개가 포함되어 있습니다.
범위 템플릿을 사용하거나 차트를 설정하기 전에 우선 테이블의 데이터를 설정해야 합니다. 이 데모에서는 이 블로그에서 앞서 로드했던 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 속성이 설정되어 있습니다.
차트 만들기
정렬된 데이터가 준비되었으므로 이제 이 데이터에서 차트를 만들 수 있습니다. 기본 크기가 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); }
나머지 시트도 동일한 로직에 따라 테이블, 범위 템플릿, 차트를 설정하게 됩니다.
댓글목록
등록된 댓글이 없습니다.