스프레드시트의 일반적인 요구 사항은 회사 및 개인 재무를 추적하는 재무 응용 프로그램을 만드는 데 사용하는 것입니다.

이 블로그에서는 JavaScript와 GrapeCity의 JavaScript 스크립트인 SpreadJS 그리고 SpreadJS의 TableSheet 기능을 사용하여 간단하지만 완벽하게 기능하는 예산 책정 응용 프로그램을 빌드합니다. 이 예제를 확장하여 개인 재무 추적에 사용할 수 있습니다.

그러면 시작해보겠습니다!

• 응용 프로그램 분석

• 헤더에 대한 템플릿 만들기

• 템플릿 로드

• 데이터 소싱

• DataManager로 데이터 로드

• TableSheet 및 설정 옵션 만들기

• 조건부 서식 지정 규칙 및 포맷터 만들기

• DataManager 보기 만들기

• 자유 헤더 영역 적용 및 데이터 보기 설정

여기를 클릭하여 샘플을 다운로드하고 따라 진행할 수 있습니다.

응용 프로그램 분석

이 응용 프로그램에서는 TableSheet를 사용하여 데이터를 표시하지만 자유 헤더 영역에서 수행할 몇 가지 다른 데이터 및 서식도 있습니다. 이는 본질적으로 TableSheet의 헤더로 사용되는 일반 스프레드시트이므로 TableSheet 데이터에 영향을 미치지 않고 셀 서식, 크기, 데이터를 사용자 정의할 수 있습니다. 또한 헤더 내에서 TableSheet 데이터를 참조할 수 있어 더 많은 정보와 계산을 제공할 수 있습니다.

더 쉽게 만들기 위해 다음 두 개의 별도 SpreadJS 통합 문서를 만들 수 있습니다.

• 템플릿을 로드한 다음 단일 시트를 JSON으로 저장할 통합 문서 한 개

• TableSheet를 만들 또 다른 통합 문서 한 개

헤더에 대한 템플릿 만들기

이 응용 프로그램의 경우 SpreadJS Designer에서만 템플릿을 만들었습니다.

이 템플릿에는 "#NAME?" 오류가 많은데, 수식이 아직 만들지 않은 TableSheet를 참조하기 때문입니다. 이 경우 TableSheet를 "BudgetSheet"라고 하고 어떤 데이터 요소를 사용할 수 있는지 알고 있으므로 각 셀에 대한 공식은 다음과 같습니다.

• Actual Total =SUM(BudgetSheet[Actual])

• Budget Total =SUM(BudgetSheet[Budget])

• Variance =SUM(BudgetSheet[Difference])

• Variance % =Variance / Budget Total

• Target Budget Sparkline =HBARSPARKLINE(ROUND(C10/MAX(C10,C11),2),"rgb(39,173,185)",FALSE)

• Actual Cost Sparkline =HBARSPARKLINE(ROUND(C11/MAX(C10,C11),2),"rgb(255,136,91)",FALSE)

• Over Budget = Target Budget - Actual Cost

템플릿 로드

만든 시트의 값과 스타일을 설정하여 코드에서 템플릿을 생성할 수 있으며 별도의 통합 문서에 템플릿을 로드하고 시트 JSON을 생성하는 것에 대해 걱정할 필요가 없습니다. Designer에서 템플릿을 통합 문서 SSJSON 파일로 저장할 수 있습니다. 이 파일은 HTML에서 참조할 수 있는 JS 파일로 내보낼 수 있습니다.

<script src="./template/BudgetHeader.js" type="text/javascript"></script>

참조되면 변수 BudgetHeader를 사용하여 간단하게 지칭할 수 있습니다. 이제 JSON을 숨겨진 SpreadJS 통합 문서 인스턴스로 로드할 수 있습니다(JSON 변환). 로드되면 특정 시트를 선택하여 JSON으로 변환할 수 있습니다. 이 시트는 나중에 헤더 템플릿을 설정하는 데 사용할 것입니다.

window.onload = function() {
   var templateSpread = new GC.Spread.Sheets.Workbook(document.getElementById("ssTemplate"), { sheetCount: 0 });
   createSheetTemplate(templateSpread);
};
​
// Load the SSJSON into a spread instance to convert
// a single sheet to a JSON format for use later
function createSheetTemplate(spread) {
   spread.suspendPaint();
   spread.fromJSON(BudgetHeader);
   spread.resumePaint();
   var budgetHeaderSheet = spread.getSheet(0);
   budgetHeaderSheet.options.keepUnknownFormulas = true;
   var template = budgetHeaderSheet.toJSON();
   initSpread(template);
}
​
// Perform the initialization of the TableSheet workbook
function initSpread(template) {
   var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 });
   spread.suspendPaint();
   spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader;
  (...)
}

데이터 소싱

간단한 응용 프로그램을 위해 JSON 파일에서 데이터를 로드하기만 하면 되는데, 원하는 경우에는 특정 URL에서 데이터를 로드할 수도 있습니다.

DataManager로 데이터 로드

이제 SpreadJS DataManager로 데이터를 로드해야 합니다. 이렇게 하려면 DataManager를 만들고 이 경우에는 여기에 앞서 만든 JSON 파일을 참조하는 표를 추가합니다.

// Initialize the data manager and add a table
var dataManager = spread.dataManager();
​
var budgetTable = dataManager.addTable("budgetTable", {
   remote: {
       read: {
           url: "./data/Budget.json"
      }
  }
});

그러면 제공한 JSON의 데이터를 포함하는 "budgetTable"이라는 새 표가 추가됩니다.

TableSheet 및 설정 옵션 만들기

DataManager에서 표를 만들면 통합 문서에 새 TableSheet를 추가할 수 있습니다. 또한 작업 열 비활성화, 새 행 버튼 비활성화, 시트에 테마 적용 등과 같은 몇 가지 옵션을 설정해야 합니다.

// Add a new TableSheet to the workbook and set some options
var budgetSheet = spread.addSheetTab(0, "BudgetSheet", GC.Spread.Sheets.SheetType.tableSheet);
budgetSheet.options.allowAddNew = false;
budgetSheet.actionColumn.options({ visible: false });
budgetSheet.applyTableTheme(GC.Spread.Sheets.Tables.TableThemes.professional3);    

조건부 서식 지정 규칙 및 포맷터 만들기

TableSheet에서 몇 가지 데이터 막대 규칙을 추가하고 통화 숫자 서식을 지정할 것이므로 이러한 규칙 및 포맷터를 만들 수 있습니다. 이 경우 예산 및 실제 데이터 요소에 색상과 방향이 다른 별도의 데이터 막대 규칙이 필요합니다.

// Create Conditional Format DataBar Rules
// DataBar rule for the Budget data point
var budgetRule = {
   ruleType: "dataBarRule",
   color: "#FFD7C7",
   gradient: true
};
​
// DataBar rule for the Actual data point
var actualRule = {
   ruleType: "dataBarRule",
   color: "#B1E9EE",
   gradient: true,
   barDirection: "rightToLeft"
}

통화 형식은 숫자 값의 서식을 지정하는 데 사용되는 간단한 문자열일 수 있습니다.

// A formatter for the currency values in the table
var currencyFormatter = "$#,##0.00";

DataManager 보기 만들기

표를 설정하고, 조건부 규칙과 포맷터를 만들었으므로 이제 표 보기를 만들 수 있습니다. 데이터 소스에는 데이터 요소가 Expense, Budget, Actual 등 3개뿐입니다. 이 보기의 경우 Difference, Difference % 및 Variance에 대한 몇 개의 계산 열도 만들고 싶습니다. 계산 열은 열의 value 속성 내에서 수식을 사용하여 만들고 "@" 기호를 사용하여 다른 데이터 요소를 참조할 수 있습니다. 각 데이터 요소에 대한 수식은 다음과 같습니다.

• Difference = Actual - Budget

• Difference % = (Actual - Budget) / Budget

• 분산의 경우 VARISPARKLINE 스파크라인 함수를 사용합니다.

또한 만든 통화 포맷터를 통화 금액을 나타내는 각 데이터 요소에 적용합니다.

// Create the view from the DataManager table we created earlier
var budgetView = budgetTable.addView("budgetView", [
  { value: "Expense", style: {formatter: currencyFormatter}, width: 120 },
  { value: "Budget", style: {formatter: currencyFormatter}, width: 100, conditionalFormats: [budgetRule] },
  { value: "Actual", style: {formatter: currencyFormatter}, width: 100, conditionalFormats: [actualRule] },
  { value: "=[@Actual] - [@Budget]", caption: "Difference", style: {formatter: currencyFormatter}, width: 120 },
  { value: "=([@Actual] - [@Budget]) / [@Budget]", caption: "Difference %", style: {formatter: "[#27ADB9]0.0% ▲;[#FF885B]0.0% ▼"}, width: 140 },
  { value: "=VARISPARKLINE(ROUND((([@Actual] - [@Budget]) / [@Budget]), 3),,,,,,TRUE,\"#27ADB9\", \"#FF885B\"", caption: "Variance", width: 120 }
]);

설정한 대로 적용되면 이 보기의 모양은 다음과 같을 것입니다.

자유 헤더 영역 적용 및 데이터 보기 설정

마지막으로 이 블로그의 앞부분에서 만든 시트 템플릿을 자유 헤더 영역에 적용하고 방금 만든 데이터 보기를 설정합니다. 이는 코드 2~3줄로 완료할 수 있습니다.

// Set the free header area and the view we just created in the TableSheet
budgetView.fetch().then(function() {
   budgetSheet.applyFreeHeaderArea(template);
   budgetSheet.setDataView(budgetView);
});

헤더 영역과 데이터 보기를 둘 다 설정하면 그 결과는 다음과 같습니다.

이제 SpreadJS와 SpreadJS의 TableSheet 기능만 사용하여 예산 책정 응용 프로그램을 성공적으로 만들었습니다.

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

• SpreadJS 공식 홈페이지
• SpreadJS 튜토리얼 및 샘플
• SpreadJS Q&A
• SpreadJS FAQ