SpreadJS 快速创建前端财务应用程序

收藏

本帖最后由 Fiooona 于 2020-9-23 15:11 编辑

一般在做出重要的财务和投资计划选择时，了解企业的财务状况、销售额至关重要。例如，查看公司的财务情况可以帮助您在扩展业务时判断投资回报率。

SpreadJS可用于创建财务应用程序，以帮助您跟踪公司的支出和销售额。本文将演示如何使用JavaScript创建财务应用程序。

image.png865887145.png

附件中可下载本文中使用的示例。
创建模板
为了使应用程序的设计更加容易，我们可以使用SpreadJS 设计器设置单元格类型，样式和间距。就本教程而言，我已经创建了可以使用的模板：
image.png48702086.png

该模板有一下几个工作表：

CompanyDashboard：应用程序的主视图，使用一些图表总结其他工作表
Banking：查看公司的所有付款以及帐户的当前余额
Expenses：公司每天的支出清单
SalesTransactions：公司对客户的所有销售列表
CheckingTemplate：“银行”工作表上支票账户余额的范围模板
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>
<blockquote> <link href="gc.spread.sheets.excel2013white.13.0.0.css" rel="stylesheet" type="text/css" />

复制代码

在这种情况下，我使用的是来自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;

复制代码

初始化Sheet
该工作簿中的大多数工作表都具有相似的结构：1个或多个图表，一个范围模板和一个数据绑定表：
image.png646273193.png

在使用范围模板或设置图表之前，我们需要在表格中设置数据。在本示例中，我整理了一些样本数据，这些样本数据包含在3个不同的JS文件中，这些文件已在本文的前面加载。从每个文件中，我们可以为tableColumns 创建一个数组来初始化表，以及格式化表中的数据：

function setBankingSheet(spread) {
var sheet = spread.getSheet(1);
// 冻结行头
sheet.frozenRowCount(16);
// 设置数据从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);
// 将string转换为number
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,'')));
}
// 格式化
sheet.getRange(16, 3, checkingRegisterData.data.length, 3).formatter('_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)');
}

复制代码

图表数据排序
为了更轻松地创建图表，我们可以使用公式对数据进行排序，并且仅使用值，而无需在图表中设置格式：

sheet.setText(0, 9, "Date");
sheet.setText(0, 10, "Date String");
sheet.setText(0, 11, "Total");
// 排序日期并按毫秒获取所有唯一值
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
});
// 创建一个单独的列，以将那些唯一的排序毫秒值格式化为字符串
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属性。
image.png760717773.png

创建图表
获得排序的数据后，我们可以根据该数据创建图表。这些图表仅在工作表中的位置0、0处初始化，默认大小为（100 px x 100 px）。我们之前绑定的activeSheetChanged事件将与自定义函数一起使用，以在初始加载工作表后更改每个图表的大小和位置：

// 创建图表
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);
}

复制代码

其他工作表遵循相同的逻辑来设置表格，范围模板和图表。
image.png680503844.png

以上就是创建自己的财务应用程序的全部步骤，SpreadJS还有更多的功能等待您来发现！

		自动登录	找回密码
密码			立即注册

SpreadJS 快速创建前端财务应用程序

0 个回复

微信认证勋章