JavaScript Excel 스프레드시트 사용 사례: 정부 기관
페이지 정보
작성자 MESCIUS
작성일 2024-01-02 16:58 조회 164회
댓글 0건
본문
첨부파일
관련링크
이번 블로그에서는 정부 입찰 추적기, 규정 준수 체크리스트, 계약 관리 대시보드를 만들어 볼 것입니다.
샘플을 다운로드하여 튜토리얼을 함께 따라와 주시길 바랍니다!
템플릿 만들기
먼저 데스크톱 SpreadJS 디자이너 컴포넌트에 템플릿 통합 문서를 추가합니다.
이 통합 문서에는 세 개의 시트가 포함됩니다.
[SpreadJS Designer의 입찰 추적기 시트]
코드에 데이터를 추가할 것이기 때문에 테이블에는 행 수의 제한이 없습니다.
다음 시트는 규정 준수 체크리스트로, 사용자가 데이터를 추가할 수 있는 간단한 양식입니다.
따라서 사용자가 변경하지 못하도록 특정 셀을 잠가야 합니다.
사용자가 데이터를 추가할 수 있는 셀을 선택하고 홈 > 셀 > 서식 > 셀 잠금 해제로 이동하면 됩니다.
[SpreadJS Designer에서 셀 잠금 해제]
편집할 모든 셀에 대해 작업을 완료한 후, 홈 > 셀 > 서식 > 시트 보호… 로 이동하여 '잠금 해제된 셀 선택' 옵션만 선택합니다.
동일한 대화 상자에서 시트 보호를 해제하기 위해 암호를 설정할 수 있습니다.
[SpreadJS Designer에서 시트 보호]
마지막으로 추가하는 시트는 간단한 테이블이 있는 계약 관리 시트입니다.
코드에서 나머지 부분을 추가해 보겠습니다.
[SpreadJS Designer의 계약 관리 시트]
입찰 추적기
입찰 추적기 시트는 일부 조건부 서식이 포함된 간단한 테이블이므로, 계속 진행하여 'data.js'의 데이터를 테이블에 로드할 수 있습니다.
var bidSheet = spread.sheets[0];
var bidColumns = [],
bidNames = ['bidNumber', 'item', 'bidDate', 'amount', 'deadline'],
bidLabels = ['Bid #', 'Item', 'Date of Bid', 'Amount', 'Deadline'];
var bidTable = bidSheet.tables.findByName("BidTable");
bidTable.autoGenerateColumns(false);
bidNames.forEach(function(name, index) {
var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
tableColumn.name(bidLabels[index]);
tableColumn.dataField(name);
bidColumns.push(tableColumn);
});
bidTable.bindColumns(bidColumns);
bidTable.bindingPath('bids');
bidSheet.setDataSource(source);Amount 열에 통화 서식을 추가할 수도 있습니다.
var bidSheet = spread.sheets[0];
bidSheet.getRange("E5:E14").formatter("$0,0");마지막으로 Amount 열에 조건부 서식, 이 경우 데이터 막대를 추가할 수 있습니다.
function addConditionalFormatting(spread) {
var bidSheet = spread.sheets[0];
var r = 3;
var c = 4;
var w = 1;
var h = 11
bidSheet.getRange(r, c, h, w).setBorder(new GC.Spread.Sheets.LineBorder("Black", GC.Spread.Sheets.LineStyle.dashed), { all: true });
var dataBarRule = bidSheet.conditionalFormats.addDataBarRule(GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.lowestValue, null,
GC.Spread.Sheets.ConditionalFormatting.ScaleValueType.highestValue, null,
"orange", [new GC.Spread.Sheets.Range(r + 1, c, h - 1, w)]);
dataBarRule.gradient(true);
dataBarRule.showBorder(false);
dataBarRule.showBarOnly(false);
}
[최종 입찰 추적기 시트]
규정 준수 체크리스트
규정 준수 체크리스트와 관련하여 SpreadJS Designer에서 작업이 완료되었습니다.
텍스트를 추가하고, 셀의 서식을 지정하고, 특정 셀을 잠금 해제하고, 시트를 보호할 수 있었으므로, 추가 작업은 필요하지 않습니다.
[완료된 규정 준수 체크리스트 시트]
SpreadJS 디자이너 컴포넌트에서 변경한 옵션으로 인해, 특정 셀, 특히 데이터를 입력해야 하는 셀만 선택하고 변경할 수 있습니다.
계약 관리
계약은 정부에서 큰 비중을 차지하는데, 특히 정부가 구매하는 제품 및 서비스의 양이 많기 때문입니다.
모든 계약을 추적하면 응용 프로그램에서 계약과 그 금액을 보여 주는 시트를 만들 수 있기 때문에 매우 유용합니다.
다른 시트와 마찬가지로 별도의 'data.js' 파일데 데이터가 있습니다.
해당 데이터를 우리가 만든 테이블에 로드할 수 있습니다.
var contractSheet = spread.sheets[2];
var contractColumns = [],
contractNames = ['contract', 'vendor', 'date', 'originalAmount', 'forecastedAmount', 'invoicedAmount', 'status'],
contractLabels = ['Contract', 'Vendor', 'Date', 'Original Amount', 'Forecasted Amount', 'Invoiced Amount', 'Status'];
var contractTable = contractSheet.tables.findByName("ContractTable");
contractTable.autoGenerateColumns(false);
contractNames.forEach(function(name, index) {
var tableColumn = new GC.Spread.Sheets.Tables.TableColumn();
tableColumn.name(contractLabels[index]);
tableColumn.dataField(name);
contractColumns.push(tableColumn);
});
contractTable.bindColumns(contractColumns);
contractTable.bindingPath('contracts');
contractSheet.setDataSource(source);또한 Original, Forecasted 및 Invoiced Amount 열에 통화로 서식을 지정해야 합니다.
포맷터를 설정할 수 있습니다.
var contractSheet = spread.sheets[2];
contractSheet.getRange("E16:G36").formatter("$0,0");마지막으로 계약 관리 시트에 Invoice Amount 열을 위한 도넛형 차트, 모든 계약 금액을 위한 세로 막대형 차트 등 차트를 추가해야 합니다.
도넛형 차트부터 시작할 수 있습니다.
Invoice Amount 열을 기반으로 차트를 만들고 Contract 열을 차트의 레이블로 설정해야 합니다.
var contractSheet = spread.sheets[2];
var doughnutChart = contractSheet.charts.add('doughnut', GC.Spread.Sheets.Charts.ChartType.doughnut, 25, 25, 475, 225, 'G15:G29');
var doughnutSeriesItem = doughnutChart.series().get(0);
doughnutSeriesItem.xValues = "B16:B29";
doughnutSeriesItem.doughnutHoleSize = 0.4;
doughnutSeriesItem.dataPoints = {
0: {
backColor: "rgb(91, 155, 213)"
},
1: {
backColor: "rgb(237, 125, 49)"
},
2: {
backColor: "rgb(165, 165, 165)"
},
3: {
backColor: "rgb(255, 192, 0)"
},
4: {
backColor: "rgb(68, 114, 196)"
},
5: {
backColor: "rgb(112, 173, 71)"
},
6: {
backColor: "rgb(255,20,128)"
},
7: {
backColor: "rgb(91, 155, 213)"
},
8: {
backColor: "rgb(237, 125, 49)"
},
9: {
backColor: "rgb(165, 165, 165)"
},
10: {
backColor: "rgb(255, 192, 0)"
},
11: {
backColor: "rgb(68, 114, 196)"
},
12: {
backColor: "rgb(112, 173, 71)"
},
13: {
backColor: "rgb(255,20,128)"
},
14: {
backColor: "rgb(91, 155, 213)"
}
}
doughnutChart.series().set(0, doughnutSeriesItem);
doughnutChart.legend({position:GC.Spread.Sheets.Charts.LegendPosition.right});
doughnutChart.title({text: "Invoiced Amount"});세로 막대형 차트의 경우, 금액당 하나씩 세 개의 서로 다른 계열을 표시하려고 합니다.
따라서 전체 테이블를 기반으로 세로 막대형 차트를 만든 다음 차트의 각 계열에 대해 xValues 및 yValues를 설정할 수 있습니다.
var columnChart = contractSheet.charts.add('column', GC.Spread.Sheets.Charts.ChartType.columnStacked100, 550, 25, 475, 225, 'B15:G29');
var columnSeriesItem = columnChart.series().get(0);
columnSeriesItem.name = "Original Amount";
columnSeriesItem.xValues = "B16:B29";
columnSeriesItem.yValues = "E16:E29";
columnChart.series().set(0, columnSeriesItem);
columnSeriesItem = columnChart.series().get(1);
columnSeriesItem.name = "Forecasted Amount";
columnSeriesItem.xValues = "B16:B29";
columnSeriesItem.yValues = "F16:F29";
columnChart.series().set(1, columnSeriesItem);
columnSeriesItem = columnChart.series().get(2);
columnSeriesItem.name = "Invoiced Amount";
columnSeriesItem.xValues = "B16:B29";
columnSeriesItem.yValues = "G16:G29";
columnChart.series().set(2, columnSeriesItem);
columnChart.legend({position:GC.Spread.Sheets.Charts.LegendPosition.right});
columnChart.title({text: "Contract Amounts"});
[차트가 있는 최종 계약 관리 시트]
간단한 정부 응용 프로그램을 만들었습니다.
이 블로그에서 작업한 내용은 간단한 시작점으로 사용할 수 있으며, 추후 훨씬 더 많은 기능과 보안으로 확장될 수 있습니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.
