! 제품 버전을 정확하게 입력해 주세요.
제품 버전이 정확하게 기재되어 있지 않은 경우,
최신 버전을 기준으로 안내 드리므로
더욱 빠르고 명확한 안내를 위해
제품 버전을 정확하게 입력해 주세요!

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

본문 바로가기

SpreadJS

블로그 & Tips

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

페이지 정보

작성자 GrapeCity 작성일 2020-05-13 00:00 조회 3,979회 댓글 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에 추가한 다수의 새 기능 중 하나일 뿐입니다. 


  • 페이스북으로 공유
  • 트위터로  공유
  • 링크 복사
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.

메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기

태그1

인기글

더보기
  • 인기 게시물이 없습니다.
메시어스 홈페이지를 통해 제품에 대해서 더 자세히 알아 보세요!
홈페이지 바로가기
이메일 : sales-kor@mescius.com | 전화 : 1670-0583 | 경기도 과천시 과천대로 7길 33, 디테크타워 B동 1107호 메시어스(주) 대표자 : 허경명 | 사업자등록번호 : 123-84-00981 | 통신판매업신고번호 : 2013-경기안양-00331 ⓒ 2024 MESCIUS inc. All rights reserved.