JavaScript로 재무 응용 프로그램 만들기
페이지 정보
작성자 GrapeCity
작성일 2020-11-10 15:51 조회 4,280회
댓글 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);
}나머지 시트도 동일한 로직에 따라 테이블, 범위 템플릿, 차트를 설정하게 됩니다.
댓글목록
등록된 댓글이 없습니다.
