향상된 서식 문자열 기능을 통해 수식 기반 값을 서식화하는 방법
페이지 정보
작성자 GrapeCity 작성일 2020-05-13 00:00 조회 4,021회 댓글 0건본문
첨부파일
관련링크
SpreadJS는 셀에 서식을 지정하여 다양한 요구 사항을 충족할 수 있는 기능을 계속해서 지원해 왔습니다. 하지만 특수화된 서식 지정 외에도 수식 구현과 관련해 여러 셀을 사용해야 했습니다.
SpreadJS v13.1에서는 이러한 아이디어를 ‘서식 문자열’이라고 하는 기능으로 통합하였습니다.
여기에서는 서식 문자열의 기능과 이 기능을 응용 프로그램에서 활용하는 방법을 살펴보겠습니다.
이 세 가지 부분은 다음과 같습니다.
- 텍스트 템플릿
- 수식
- @ 기호
이 세 가지는 통합 문서의 셀 서식 지정에 대한 특정 요구 사항에 맞춰 별도로 또는 결합하여 사용할 수 있습니다. 이 블로그에서는 Excel 템플릿을 가져오고 서식 문자열을 몇 개의 셀에 추가하여 JavaScript 코드 몇 줄만으로 통합 문서를 개선할 방법을 보여줄 것입니다.
프로젝트 설정
서식 문자열 관련 작업을 시작하기 위해 먼저 SpreadJS 참조로 간단한 HTML 파일을 만들 수 있습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>SpreadJS Format Strings</title>
<link href="./node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js"></script>
<script type="text/javascript" src="./node_modules/@grapecity/spread-excelio/dist/gc.spread.excelio.min.js"></script>
</head>
<body>
<div id="spreadSheet" style="width: 1300px; height: 800px; border: 1px solid gray"></div>
</body>
</html>
SpreadJS NPM 파일을 참조하므로 명령 프롬프트를 이용해 프로젝트 폴더로 이동하여 다음 명령을 실행할 것입니다.
npm install @grapecity/spread-sheets @grapecity/spread-sheets-excelio
이 데모에서는 Excel 템플릿을 사용하고 이 템플릿을 SpreadJS로 가져올 수 있습니다. 단순성을 위해 SpreadJS Designer를 사용해 Excel 템플릿에서 JS 파일을 만들고 이 파일을 데모 zip 파일에 포함하였습니다. 이 파일을 HTML 페이지에 로드하려면 다음 줄만 추가하면 됩니다.
<script type="text/javascript" src="./ExcelTemplate.js"></script>
또한 스크립트 코드를 추가하여 SpreadJS 인스턴스를 초기화하고 템플릿을 그 안에 로드할 수도 있습니다.
<script>
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("spreadSheet"), { sheetCount: 1 });
spread.fromJSON(ExcelTemplate);
var sheet = spread.getActiveSheet();
}
</script>
이제 서식 문자열을 추가할 HTML 파일 및 스크립트가 준비되어 있습니다.
텍스트 템플릿
서식 문자열의 첫 번째 유형에서는 텍스트 템플릿을 추가할 수 있습니다. 이 템플릿을 통해 기본적으로 데이터 및 텍스트에 대한 별도의 셀 없이 문자열 연결을 수행할 수 있습니다. 이 경우 "Projected Monthly Income(예상 월수입)"과 "Actual Monthly Income(실제 월수입)" 섹션의 금액을 합한 총액을 추가할 수 있습니다. 두 섹션에는 두 금액의 합계를 내는 수식이 없으므로 수식을 만들고 서식을 지정할 문자열을 정의하면 됩니다.
각 셀에 별도의 스타일을 만들어 다음 네 가지를 정의할 수 있습니다.
- 포맷터
- 배경색
- 글꼴
- 세로 정렬
표시된 텍스트는 일반적으로 텍스트 템플릿을 정의할 때 작성할 수 있습니다. 하지만 값을 구하기 위한 수식은 다음과 같이 "$" 기호로 시작하고 뒤이어 대괄호가 나와야 합니다.
"Formulas go within the brackets like this: ${{ FORMULA HERE }}"
이 경우에 추가하려는 SUM 수식이 각 월수입의 총액이 되도록 지정해야 하므로 스타일을 다음과 같이 정의할 수 있습니다.
var textTemplateStyle1 = new GC.Spread.Sheets.Style();
textTemplateStyle1.formatter = "Total projected monthly income is ${{=SUM(C5:C6)}}";
textTemplateStyle1.backColor = "#91e0ff";
textTemplateStyle1.font = "bold 12pt Lucida Sans";
textTemplateStyle1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
그런 다음, 셀에 대해 스타일을 다음과 같이 설정할 수 있습니다.
sheet.setStyle(6, 1, textTemplateStyle1);
이러한 스타일이 지정된 셀은 이제 이 수식의 계산 결과와 결합된 텍스트를 표시합니다.
이 기능은 리포트나 대시보드와 같이 계산을 위해 추가 셀을 사용하지 않아도 되므로 많은 수의 다양한 수식과 값을 하나의 셀로 결합할 때 특히 유용합니다.
수식 및 "@" 기호
서식 문자열을 사용하는 또 다른 방식은 수식 및 데이터와 함께 사용하는 것입니다. 통합 문서의 셀에 어떤 데이터가 있는데 이 셀의 어떤 계산식에서 이 데이터를 사용하고 싶을 때가 있을 수 있습니다. "@" 기호가 나오는 경우가 이에 해당되는데, 이때는 이 셀에 대한 서식 문자열을 만들 때 셀 자체에서 이 데이터를 참조하면 됩니다. 이러한 작업의 한 가지 예를 들자면 이름이 지정된 범위를 통해 셀 범위 참조에 연결된 셀에 설정된 데이터의 이름을 이 데이터를 사용하여 참조할 수 있습니다.
이 범위의 이름을 사용할 때 SpreadJS는 스파크라인을 만들 때 사용할 수 있는 셀 범위 참조를 반환합니다.
먼저 이 셀 범위 참조에 몇 가지 사용자 정의 이름을 추가할 수 있습니다.
sheet.addCustomName('Housing', '=$C$15:$C$24', 0, 0);
sheet.addCustomName('Entertainment', '=$H$15:$H$23', 0, 0);
sheet.addCustomName('Loans', '=$H$27:$H$32', 0, 0);
이 셀 범위 참조는 개인 월 예산 시트의 여러 섹션 각각의 "Projected Cost(예상 비용)"에 상응합니다. 사용자가 스파크라인의 데이터를 더 쉽게 변경할 수 있도록 다음과 같이 각 섹션의 이름에 대한 드롭다운 목록을 만들어 각 섹션의 이름이 정의한 사용자 정의 이름과 일치하게 만들 수 있습니다.
var formulaStyle = new GC.Spread.Sheets.Style();
formulaStyle.backColor = '#fff2cc';
formulaStyle.cellButtons = [
{
imageType: GC.Spread.Sheets.ButtonImageType.dropdown,
command: "openList",
useButtonStyle: true
}
]
formulaStyle.dropDowns = [
{
type: GC.Spread.Sheets.DropDownType.list,
option: {
items: [
{
text: 'Housing',
value: 'Housing'
},
{
text: 'Entertainment',
value: 'Entertainment'
},
{
text: 'Loans',
value: 'Loans'
}
]
}
}
];
이제 조회 표, 수식, "@" 기호를 사용하여 서식 문자열이 있는 동적 스파크라인을 만드는 데 필요한 모든 것이 준비되었습니다. 이 문자열은 다음과 같이 3가지 부분으로 되어 있습니다.
@
- 현재 셀 값(이 경우 데이터 섹션 이름)을 사용하여 이름이 지정된 범위에서 해당되는 셀 범위 참조 문자열을 가져옵니다.
INDIRECT(<위 셀 범위 참조 문자열)
- 셀 범위 참조 문자열에서 셀 범위 참조를 가져옵니다.
COLUMNSPARKLINE(, 0)
- 셀 범위 참조에서 열 스파크라인을 만듭니다.
모두 함께 포매터로 결합되면 다음과 같이 정의됩니다.
formulaStyle.formatter = '=COLUMNSPARKLINE(INDIRECT(@),0)';
끝으로 셀에서 포매터로 다음과 같은 스타일을 설정할 수 있습니다.
sheet.setStyle(9, 4, formulaStyle);
스파크라인은 데이터의 이름을 표시하지 않으므로 또 다른 서식 문자열을 설정하여 아래 셀에서 데이터 섹션 이름만 표시할 수 있습니다.
sheet.getRange(11, 4, 1, 1).formatter('=E10');
사용 중인 이 모든 형식 문자열을 통해 JavaScript 코드 몇 줄만으로도 대화형 예산 시트를 만들 수 있음을 알 수 있습니다.
서식 문자열은 v13.1에서 SpreadJS에 추가한 다수의 새 기능 중 하나일 뿐입니다.
댓글목록
등록된 댓글이 없습니다.