스프레드시트 라이브러리를 사용하여 JavaScript 예산 애플리케이션을 만드는 방법
이 블로그에서는 JavaScript 및 SpreadJS, JavaScript 스프레드시트 및 SpreadJS의 TableSheet 기능을 사용하여 단순하지만 완전한 기능을 갖춘 예산 책정 애플리케이션을 구축할 것입니다. 이 예를 확장하여 개인 재무 추적에 사용할 수 있습니다.
시작하자!
이 블로그의 샘플을 다운로드하고 따라할 수 있습니다.
애플리케이션 분류
In this application, we will use a TableSheet 데이터를 표시할 수 있지만 적용할 다른 데이터와 서식도 있으므로 Free Header Area에서 수행합니다. 기본적으로 TableSheet의 헤더로 사용되는 일반 스프레드시트이므로 TableSheet 데이터에 영향을 주지 않고 셀 서식, 크기 및 데이터를 사용자 지정할 수 있습니다. 헤더 내에서 해당 TableSheet 데이터를 참조하여 더 많은 정보와 계산을 제공할 수도 있습니다.작업을 더 쉽게 하기 위해 두 개의 별도 SpreadJS 통합 문서를 만들 수 있습니다.
머리글용 템플릿 만들기
For this application, I have created a template purely in the SpreadJS Designer:
이 템플릿에는 "#NAME?"이 많이 있습니다. 수식이 아직 생성하지 않은 TableSheet를 참조하기 때문에 오류가 발생합니다. 이 경우 TableSheet의 이름이 "BudgetSheet"이고 사용 가능한 데이터 요소가 무엇인지 알고 있으므로 각 셀에 대한 공식은 다음과 같습니다.
템플릿 로드
It should be noted that you can create a template just in code by setting values and styles for a sheet you created, and you would not have to worry about loading a template in a separate workbook and creating a sheet JSON. We can save the template from the Designer as a workbook SSJSON file. We can export this as a JS file that we can then reference in the HTML:
<script src="./template/BudgetHeader.js" type="text/javascript"></script>
Once we have that referenced, we can simply refer to it with the variable BudgetHeader. Now we can load that JSON into a hidden SpreadJS workbook instance (just to convert the JSON). Once it is loaded, you can select the specific sheet and convert that to JSON, which we will use later for setting the header template:
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;
(...)
}
소싱 데이터
For the purposes of this simple application, we will just be loading data from a JSON file, but you could load data from a specific URL if you wanted to.
DataManager에 데이터 로드
Now we need to load the data into the SpreadJS DataManager. To do that, we need to create the DataManager and add a table to it, in this case, referencing the JSON file that we created earlier:
// Initialize the data manager and add a table
var dataManager = spread.dataManager();
var budgetTable = dataManager.addTable("budgetTable", {
remote: {
read: {
url: "./data/Budget.json"
}
}
});
This will add a new table called “budgetTable” containing the data from the JSON we provided.
TableSheet 생성 및 옵션 설정
Once the table is created in the DataManager, we can add a new TableSheet to the workbook. We also need to set a few options, such as disabling the action column, disabling the new row button, and applying a theme to the sheet:
// 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);
조건부 서식 규칙 및 포맷터 만들기
In our TableSheet, we will be adding some data bar rules and formatting currency numbers so that we can create those rules and the formatter. In this case, we want a separate data bar rule for the budget and actual data points, with different colors and different directions:
// 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"
}
The currency format can just be a simple string that will be used to format numerical values:
// A formatter for the currency values in the table
var currencyFormatter = "$#,##0.00";
DataManager 보기 만들기
With the table set up, conditional rules, and formatters created, we can now create a view of the table. There are only 3 data points in our data source: Expense, Budget, and Actual. For this view, we also wanted to create some calculated columns for Difference, Difference %, and Variance. These calculated columns are created by using formulas within the value property of the column, and we can reference other data points using the “@” symbol. The formulas for each of these are as follows:
- Difference = Actual - Budget
- Difference % = (Actual - Budget) / Budget
- For variance, we will utilize the VARISPARKLINE sparkline function
We will also apply the currency formatter we created to each data point that is a monetary amount:
// 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 }
]);
This view would look something like this one when we set it:
자유 헤더 영역 적용 및 데이터 보기 설정
The last step is to apply the sheet template we created earlier in this blog to the free header area and set the data view we just created. This can be done with just a couple of lines of code:
// Set the free header area and the view we just created in the TableSheet
budgetView.fetch().then(function() {
budgetSheet.applyFreeHeaderArea(template);
budgetSheet.setDataView(budgetView);
});
Setting both the header area and the data view would result in this:
이제 SpreadJS와 해당 TableSheet 기능만 사용하여 예산 애플리케이션을 성공적으로 만들었습니다!
Reference
이 문제에 관하여(스프레드시트 라이브러리를 사용하여 JavaScript 예산 애플리케이션을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/grapecity/how-to-create-a-javascript-budgeting-application-using-a-spreadsheet-library-3m4b텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
