향상된 서식 문자열 기능을 통해 수식 기반 값을 서식화하는 방법 > 블로그 & Tips

본문 바로가기

SpreadJS

블로그 & Tips

향상된 서식 문자열 기능을 통해 수식 기반 값을 서식화하는 방법

페이지 정보

작성자 GrapeCity 작성일 20-05-13 00:00 조회 1,066회 댓글 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 파일 및 스크립트가 준비되어 있습니다. 


7afb49cec303dbe540470eb1d5174fb3_1597970432_4943.jpg



텍스트 템플릿

서식 문자열의 첫 번째 유형에서는 텍스트 템플릿을 추가할 수 있습니다. 이 템플릿을 통해 기본적으로 데이터 및 텍스트에 대한 별도의 셀 없이 문자열 연결을 수행할 수 있습니다. 이 경우 "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);


이러한 스타일이 지정된 셀은 이제 이 수식의 계산 결과와 결합된 텍스트를 표시합니다. 


7afb49cec303dbe540470eb1d5174fb3_1597970443_7153.jpg


이 기능은 리포트나 대시보드와 같이 계산을 위해 추가 셀을 사용하지 않아도 되므로 많은 수의 다양한 수식과 값을 하나의 셀로 결합할 때 특히 유용합니다.


수식 및 "@" 기호


서식 문자열을 사용하는 또 다른 방식은 수식 및 데이터와 함께 사용하는 것입니다. 통합 문서의 셀에 어떤 데이터가 있는데 이 셀의 어떤 계산식에서 이 데이터를 사용하고 싶을 때가 있을 수 있습니다. "@" 기호가 나오는 경우가 이에 해당되는데, 이때는 이 셀에 대한 서식 문자열을 만들 때 셀 자체에서 이 데이터를 참조하면 됩니다. 이러한 작업의 한 가지 예를 들자면 이름이 지정된 범위를 통해 셀 범위 참조에 연결된 셀에 설정된 데이터의 이름을 이 데이터를 사용하여 참조할 수 있습니다.

이 범위의 이름을 사용할 때 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);


7afb49cec303dbe540470eb1d5174fb3_1597970460_0914.jpg


스파크라인은 데이터의 이름을 표시하지 않으므로 또 다른 서식 문자열을 설정하여 아래 셀에서 데이터 섹션 이름만 표시할 수 있습니다. 


sheet.getRange(11, 4, 1, 1).formatter('=E10');


사용 중인 이 모든 형식 문자열을 통해 JavaScript 코드 몇 줄만으로도 대화형 예산 시트를 만들 수 있음을 알 수 있습니다. 


7afb49cec303dbe540470eb1d5174fb3_1597970470_8098.gif


서식 문자열은 v13.1에서 SpreadJS에 추가한 다수의 새 기능 중 하나일 뿐입니다. 


  • 페이스북으로 공유
  • 트위터로  공유
  • 구글플러스로 공유
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그

인기글

더보기
  • 인기 게시물이 없습니다.
그레이프시티 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@grapecity.com | 전화 : 1670-0583 | 경기도 안양시 동안구 시민대로 230, B-703(관양동, 아크로타워) 그레이프시티(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 Copyright ⓒ 2021 GrapeCity inc.