JavaScript 스프레드시트를 사용하여 금융 보고서를 만드는 방법
페이지 정보
작성자 GrapeCity
작성일 2021-09-27 10:50 조회 2,056회
댓글 0건
본문
관련링크
재무제표는 회사의 비즈니스 활동 및 재무 성과를 보여주는 데 필요한 재무 레코드입니다. 이러한 문서는 경영진, 투자자 및 재무 분석가를 비롯한 이해 관계자가 과거 및 현재 성과를 비교하고, 미래 성과를 예측하며, 자원 할당에 관한 결정을 내림으로써 전략적 결정을 평가하고 내리는 데 도움이 됩니다.
이 포스팅에서는 JavaScript를 사용하여 간단하면서도 강력한 재무 보고서를 만드는 방법을 보여 드릴 것입니다. 또한 개발자가 여러 API에서 최종 데이터를 가져와 이러한 보고서를 쉽게 만들 수 있는 몇 가지 방법도 알려 드릴 것입니다.
스프레드시트의 경우 GrapeCity의 Excel과 유사한 JavaScript 스프레드시트 솔루션인 SpreadJS를 사용합니다.
개요
연간 재무 보고서에는 일반적으로 다음 3가지 보고서가 포함됩니다.
- 손익계산서
- 대차 대조표
- 현금 흐름표
아래에서 설명하는 요소에 대한 링크가 포함된 페이지를 만들었습니다. 해당 요소는 다른 페이지에 있을 수 있습니다.
우선, 시작하려면 해야 합니다.
또한 이 포스팅에서는 SpreadJS 디자이너를 사용합니다. 이 디자이너는 다운로드에 포함되어 있으며 "\SpreadJS.Release.x.x.x\Designer\Designer Runtime" 폴더에서 설치할 수 있습니다.
디자이너는 WYSIWYG 표준 독립형 데스크톱 응용 프로그램으로, JavaScript 개발자가 점 및 클릭 인터페이스를 사용하여 순식간에 스프레드시트를 디자인할 수 있도록 지원합니다.
다음 단계는 셀을 다른 페이지와 연결하는 방법을 보여 줍니다.
시트 이름이 포함된 셀을 선택한 다음 삽입 탭으로 이동하고 하이퍼링크 메뉴를 선택합니다.
하이퍼리크 텍스트를 입력합니다.
링크 및 방문한 링크에 대해 원하는 색상을 입력합니다.
이 문서를 선택하고 오른쪽 페이지를 가리킵니다.
소개 페이지의 모양은 아래와 같습니다. 요소 셀을 클릭하면 해당 페이지를 가리킵니다.
시트에는 다음 코드를 추가하여 SpreadJS에서 사용할 수 있는 몇 가지 도형이 포함되어 있습니다.
<head> ... <script src='.../spreadjs/gc.spread.sheets.all.x.x.x.min.js' type='text/javascript'></script> <script src='.../spreadjs/plugins/gc.spread.sheets.shapes.x.x.x.min.js' type='text/javascript'></script> </head>
요약
데모의 두 번째 페이지에는 회사에 대한 보고서 및 데이터의 가장 중요한 재무 데이터 중 일부에 대한 요약이 포함되어 있습니다.
에서 제공하는 몇 가지 데모 데이터를 사용하여 보고서를 만듭니다. API가 회사 정보, 재무 비율 및 지정된 보통주에 대한 기타 주요 지표를 반환합니다. 데이터는 일반적으로 회사가 최신 수입 및 재무 상태를 보고하는 당일에 새로 고침됩니다.
SpreadJS에서 API 데이터를 사용하기 위해 SpreadJS의 강력한 다음 기능을 사용합니다.
WEBSERVICE(URL)는 CORS(Cross-Origin Resource Sharing)를 지원하는 인터넷 또는 인트라넷의 웹 서비스에서 문자열 데이터를 반환합니다. 요청이 동일 원본 정책을 따르지 않고 대상 웹사이트가 원본 출처에서 CORS를 지원하지 않는 경우 #VALUE! 오류를 반환합니다. 이 함수의 결과는 문자열입니다.
FILTERJSON(json_string)은 JSON 문자열을 스칼라 값, 객체 또는 객체의 (세로로 나눌 수 있는) 배열로 구문 분석할 수 있습니다.
*FILTERJSON 함수와 WEBSERVICE 함수를 사용하여 서버에서 JSON 객체를 가져와 SpreadJS에서 사용할 수 있습니다.
PROPERTY(json_object, property_name)는 JSON 객체의 속성 값을 가져옵니다.
코드의 행을 몇 개만 사용하여 모든 API 데이터를 가져와 SpreadJS에서 연속으로 사용할 수 있습니다.
아래 단계에 따라 보고서의 요약 페이지를 만들었습니다.
API 데이터를 가져와 특정 셀(나중에 숨겨짐)에 삽입합니다. FILTERJSON을 사용하여 데이터를 수직으로 나누면 템플릿 모양이 보기 좋지 않기 때문에 이 방법으로 진행합니다.
=FILTERJSON(WEBSERVICE("https://www.alphavantage.co/query?function=OVERVIEW&symbol=IBM&apikey=demo")) - 이 수식은 웹에서 JSON을 가져와 구문 분석하여 SpreadJS에서 사용이 가능합니다.
원하는 셀에서 =IFERROR(PROPERTY(JSON Ob Reference,"property_name"),"")을 사용하여 객체 속성의 값을 삽입합니다.
function initsheet1(sheet) {
//executive summary page
sheet.suspendPaint();
var properties =[["Symbol","Address","Sector","Industry","FiscalYearEnd","EBITDA","ProfitMargin"],
["BookValue","SharesOutstanding","Beta","PERatio","DividendYield","ExDividendDate","ShortPercentFloat"],
["MarketCapitalization","AnalystTargetPrice","RevenuePerShareTTM","EPS","DividendPerShare","ShortRatio","PayoutRatio"]];
sheet.setFormula(35,0,'=FILTERJSON(WEBSERVICE("https://www.alphavantage.co/query?function=OVERVIEW&symbol=IBM&apikey=demo"))');
var index = 0;
for(var i=9;i<28;i=i+3)
{
//company profile section
sheet.setFormula(i,2,'=IFERROR(PROPERTY(A36,"'+properties[0][index]+'"),"")');
//key values section - first part
sheet.setFormula(i,12,'=IFERROR(PROPERTY(A36,"'+properties[1][index]+'"),"")');
//key values section - second part
sheet.setFormula(i,16,'=IFERROR(PROPERTY(A36,"'+properties[2][index]+'"),"")');
index++;
}
sheet.setRowVisible(35, false);// hide the json object
sheet.resumePaint();
};요약 페이지의 모양은 아래와 같고 API에 대한 데이터가 변경될 때마다 샘플도 변경됩니다.
손익계산서
손익계산서는 회사의 재무 성과를 보고하는 데 사용되는 재무제표입니다. 이 보고서는 운영, 관리 효율성, 부분의 성과 및 동종 기업 기준 회사 성과에 관한 중요한 정보를 제공합니다.
이 보고서에는 일반적으로 성과 비교를 위해 여러 재무 기간(회계 연도)의 데이터가 포함되어 있습니다.
이 포스팅에서는 를 고려했습니다. API에는 여러 연도에 대한 손익계산서 요소의 정보가 포함되어 있지만, 지난 5년 간의 데이터를 사용할 것입니다.
작업이 수월하게 진행되도록 요소의 이름이 포함된 속성 배열을 사용합니다. 손익계산서의 일부 행에는 API에서 가져와야 하는 데이터가 없습니다. 따라서 해당 행은 계산에서 제외합니다. 또한 지난 5년 간의 데이터를 사용한다는 점을 명심하세요.
수익 보고서에 값을 추가하기 위해 다음 단계를 수행합니다.
WEBSERVICE 및 FILTERJSON을 사용하여 서버에서 JSON 객체를 가져와 SpreadJS에서 사용합니다.
=FILTERJSON(WEBSERVICE(""))
명령문 속성을 사용하여 배열 만들기
PROPERTY(A40,"annualReports.'+i+'.'+properties[index]+'")를 사용합니다. 여기서 A40은 JSON 객체가 있는 셀입니다.
위 API에서 보고서를 데이터로 채우는 코드를 첨부합니다.
function initsheet2(sheet) {
//income statement
sheet.suspendPaint();
var properties =["fiscalDateEnding", "totalRevenue","costOfRevenue","costofGoodsAndServicesSold","researchAndDevelopment",
"sellingGeneralAndAdministrative","depreciationAndAmortization","interestIncome","interestExpense","otherNonOperatingIncome","incomeTaxExpense"];
var index = 0;
//GET the json
sheet.setFormula(39,0,'=FILTERJSON(WEBSERVICE("https://www.alphavantage.co/query?function=INCOME_STATEMENT&symbol=IBM&apikey=demo"))');
for(var j=4;j<22;j++)
{
//these rows are empty or are needed for calculations
if([5,8,9,11,12,16,17].includes(j)){
continue;
}
else {
for(var i=0;i<5;i++)
{
//set the value of the json property on the right cell
sheet.setFormula(j,8-i,'=IFERROR(1*PROPERTY(A40,"annualReports.'+i+'.'+properties[index]+'"),0)');
}
index ++;
}
}
sheet.resumePaint();
};아래 사진에서는 손익계산서 데이터가 포함된 열을 숨겼습니다. 수익을 지난 5년 간의 순 수익으로 변환하는 방법을 보여주는 계단식 배열 스파크라인과 이전 데이터의 값과 실제 값 간의 차이를 보여 주는 분산 차트를 만들었습니다.
대차 대조표
대차 대조표는 지정된 기간 동안 회사의 자산, 부채, 주주 지분(또는 소유권)을 보여 줍니다.
대차 대조표는 재무 안정성을 보여 주는 보고서입니다.
실제 데이터로 작업하는 경우: 자산 = 부채 + 주주 지분.
이 예에서는 를 사용합니다.
SpreadJS 함수 WEBSERVICE 및 FILTERJSON을 사용하여 서버에서 JSON 객체를 가져와 SpreadJS에서 사용합니다.
=FILTERJSON(WEBSERVICE(""))
코드를 더 깔끔하게 표현하기 위해 문 속성을 사용하여 배열을 만듭니다. PROPERTY(A43,"annualReports.'+i+'.'+properties[index]+'")를 사용합니다. 여기서 A43은 JSON 객체가 있는 셀입니다.
위 API에서 보고서를 데이터로 채우는 코드를 첨부합니다.
function initsheet3(sheet) {
//balance sheet
sheet.suspendPaint();
var properties =["fiscalDateEnding", "cashAndCashEquivalentsAtCarryingValue","cashAndShortTermInvestments","otherCurrentAssets","inventory",
"currentNetReceivables","investments","propertyPlantEquipment","accumulatedDepreciationAmortizationPPE",
"intangibleAssets","intangibleAssetsExcludingGoodwill","longTermInvestments","goodwill",
"otherNonCurrrentAssets","currentAccountsPayable","shortTermDebt","deferredRevenue",
"otherCurrentLiabilities","longTermDebt","otherNonCurrentLiabilities","treasuryStock","retainedEarnings"];
var index = 0;
sheet.setFormula(42,0,'=FILTERJSON(WEBSERVICE("https://www.alphavantage.co/query?function=BALANCE_SHEET&symbol=IBM&apikey=demo"))');
for(var j=5;j<38;j++)
{
if([6,12,13,21,22,23,24,29,30,33,34,35].includes(j)){
continue;
}
else {
for(var i=0;i<5;i++)
{
sheet.setFormula(j,6-i,'=IFERROR(1*PROPERTY(A43,"annualReports.'+i+'.'+properties[index]+'"),0)');
}
index ++;
}
}
sheet.setRowVisible(42, false);
sheet.resumePaint();
};대차 대조표 보고서의 보기는 다음과 같을 수 있습니다.
아래에서 대차 대조표의 요소를 표시하는 treemap 차트를 만들었습니다. 이 차트는 SpreadJS 디자이너에서 직접 만들 거나 아래 수식을 사용하여 만들 수 있습니다.
var chart = sheet.charts.add('treeMap_assets', GC.Spread.Sheets.Charts.ChartType.treemap, 30, 100, 400, 300, 'BalanceSheet!$G$8:$G$12,BalanceSheet!$G$15:$G$21');
현금 흐름표
현금 흐름표는 여러 거래 중 현금에서 더하거나 뺀 모든 금액을 포함하여 재무 기간 중 생성된 현금의 양을 측정하는 재무제표입니다.
달리 말하면, 이 표는 특정 기간 동안의 현금 유입과 유출을 모두 보여줌으로써 회사가 단기 의무를 이행하거나 회사에 투자하거나 주주에게 배당금을 지급할 수 있는 능력에 대한 정보를 제공합니다.
이 예에서는 를 사용합니다. SpreadJS 함수 WEBSERVICE 및 FILTERJSON을 사용하여 서버에서 JSON 객체를 가져와 SpreadJS에서 사용합니다.
=FILTERJSON(WEBSERVICE("https://www.alphavantage.co/query?function=CASH_FLOW&symbol=IBM&apikey=demo"))
코드를 더 깔끔하게 표현하기 위해 명령문 속성을 사용하여 배열을 만듭니다.
PROPERTY(A41,"annualReports.'+i+'.'+properties[index]+'")를 사용합니다. 여기서 A41은 JSON 객체가 있는 셀입니다. 앞에서 언급한 대로 API에서 지난 5년 간의 연간 보고서 객체만 가져와 재무 보고서에 사용할 것입니다.
다음은 현금 흐름 시트를 올바른 데이터로 채우기 위해 사용한 코드입니다.
function initsheet4(sheet) {
//cashflow
sheet.suspendPaint();
var properties =["fiscalDateEnding","netIncome","paymentsForOperatingActivities",
"proceedsFromOperatingActivities","depreciationDepletionAndAmortization","changeInReceivables",
"changeInInventory","changeInOperatingLiabilities","changeInOperatingAssets",
"capitalExpenditures","proceedsFromRepaymentsOfShortTermDebt","paymentsForRepurchaseOfCommonStock",
"paymentsForRepurchaseOfEquity","paymentsForRepurchaseOfPreferredStock","dividendPayout",
"proceedsFromIssuanceOfCommonStock","proceedsFromIssuanceOfLongTermDebtAndCapitalSecuritiesNet",
"proceedsFromIssuanceOfPreferredStock","proceedsFromRepurchaseOfEquity","proceedsFromSaleOfTreasuryStock",
"changeInCashAndCashEquivalents","operatingCashflow"];
var index = 0;
sheet.setFormula(40,0,'=FILTERJSON(WEBSERVICE("https://www.alphavantage.co/query?function=CASH_FLOW&symbol=IBM&apikey=demo"))');
for(var j=4;j<35;j++)
{
if([5,14,15,16,18,19,20,31,32,35,36].includes(j)){
continue;
}
else {
for(var i=0;i<5;i++)
{
sheet.setFormula(j,6-i,'=IFERROR(1*PROPERTY(A41,"annualReports.'+i+'.'+properties[index]+'"),0)');
}
index ++;
}
}
// hide the cell that has the json object
sheet.setRowVisible(40, false);
sheet.resumePaint();
};더욱 눈길을 끄는 보고서를 만들기 위해 조건부 서식 및 스파크라인을 통해 모양을 개선할 수 있습니다.
조건부 서식은 사용자가 현금 유입 및 유출 보기를 더 잘 만들 수 있도록 도와줍니다. 파란색을 사용하여 현금 더하기를 표시하고 노란색을 사용하여 공제를 표시합니다. SpreadJS 디자이너를 사용하여 아래 단계에 따라 서식을 추가합니다.
영역을 선택합니다. 이 경우에는 다음과 같이 선택합니다. $C$7:$G$15,$C$18:$G$18,$C$22:$G$32,$C$34:$G$35
조건부 서식 > 새 규칙으로 이동합니다.
셀 값을 기준으로 모든 셀의 서식 지정을 선택합니다.
서식 스타일에서 3가지 색조를 선택하고 원하는 색을 입력합니다. 중간값 섹션에서 숫자를 선택하고 중간값으로 0을 입력합니다.
"확인"을 클릭합니다.
관리자가 추세를 보다 쉽게 파악할 수 있도록 COLUMNSPARKLINE 몇 개가 포함된 5 YEAR TREND 열을 추가합니다. 의사 결정권자는 비즈니스와 관련해 권고하거나 선택할 때 이러한 추세를 사용할 수 있습니다.
스파크라인을 추가하려면 스프레드시트에서 다음 수식을 사용합니다.
=COLUMNSPARKLINE(C7:G7,1,,,"{negativeColor:#fbdd5f,seriesColor:#a7ccdc,displayEmptyCellsAs:0,displayXAxis:true,showNegative:true,maxAxisType:0,minAxisType:0}")
JavaScript를 통해 추가하려면 다음 코드를 사용합니다.
sheet.setFormula(6, 7, '=COLUMNSPARKLINE(C7:G7,1,,,"negativeColor:#fbdd5f,seriesColor:#a7ccdc,displayEmptyCellsAs:0,displayXAxis:true,showNegative:true,maxAxisType:0,minAxisType:0}")');
완료되면 보고서의 모양은 다음과 같습니다.
요점
재무제표는 숫자를 지표로 사용하여 기업의 재무 상태 정보를 표시하기 때문에 기업 보고서의 가장 중요한 부분 중 하나입니다.
SpreadJS v14.1(서비스 팩 1) 릴리스에서는 웹 서비스에서 데이터 가져오기 또는 JSON 문자열에서 데이터 구문 분석이 그 어느 때보다 쉬워졌습니다. WEBSERVICE 및 FILTERJSON 수식을 사용하면 손쉽게 재무 데이터에 액세스하여 재무 보고서를 만드는 데 사용할 수 있습니다.
차트, 스파크라인, 조건부 서식 등 SpreadJS에서 제공하는 강력한 방법을 사용하여 보고서를 개선할 수 있습니다.
SpreadJS는 엔터프라이즈 JavaScript 개발을 위한 가장 포괄적인 스프레드시트입니다. 이 컴포넌트를 FintTech JavaScript 응용 프로그램에 포함하여 재무 보고서를 만들고 Excel과 유사한 완벽한 경험을 누릴 수 있습니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
