서식 문자열

SpreadJS에서는 사용자가 셀에 값과 수식을 동시에 설정할 수 있습니다. 셀의 수식을 기반으로 표시 텍스트를 서식화하는 것도 가능합니다. Style의 formatter에 설정된 서식 문자열은 수식 또는 텍스트 값 템플릿을 포함할 수 있으며, 셀에 표시되는 값을 사용자 지정된 형식으로 출력합니다. 셀의 값은 포맷터의 매개변수로 작용하여, 이미지나 업데이트된 텍스트로 렌더링됩니다.

fomatter는 아래와 같이 3가지 케이스로 나눌 수 있습니다:

Formatter 유형	구문 형식	예시
일반 셀 포맷터	표준 포맷터	"#,##0_);(#,##0)" `"h:mm AM/PM"`
서식 문자열 - 수식	표준 수식	`"=SUM(@, C1)"`, `"=AVERAGE(C4:C7)"`
서식 문자열 - 텍스트 값 템플릿	`"{{" "}}"` 사이에 수식을 포함한 문자열	`"After {{=@}} approval, Total Sales Were: {{=SUM(Sales4)}}"`, `"Hello, @"`

※ '@' 기호는 현재 셀 참조를 나타내며, 수식이나 텍스트 템플릿 내에서 직접 사용할 수 있습니다.

서식 문자열 - 수식

셀의 값 외에도, Style의 formatter에 수식을 설정할 수 있습니다. 이때 현재 셀은 @ 기호로 참조할 수 있습니다.

예를 들어, 셀 값은 A1:A2 범위의 합계로 설정할 수 있습니다:

style.formatter = '=SUM(@, A1:A2)';

서식 문자열 - 텍스트 값 템플릿

텍스트 값 템플릿은 대시보드나 데이터 요약 표시에 유용합니다. 텍스트와 수식을 조합해 하나의 문자열로 셀에 표시할 수 있으며, "{{" 와 "}}" 사이에 수식을 넣어 사용합니다.

셀 값은 요일 값, 합계 수식 및 고정 텍스트와 결합할 수도 있습니다.

Ask ChatGPT

style.formatter = "On {{=TEXT(TODAY(),"DDDD")}}, Total Sales Were: ${{=SUM(A1:A5)}}.";

포맷 문자열은 다음과 같은 시나리오에서 매우 유용하게 사용될 수 있습니다:

연결(concatenation) 수식을 사용하는 대신 긴 표시 문자열을 포맷팅할 때
실제 값은 변경하지 않고 다른 통화 또는 단위로 값을 표시할 때
바코드나 스파크라인 함수를 이용해 값이나 범위를 그래픽으로 표현할 때
숫자 값을 ‘숫자를 글자로(Number to Words)’ 기능으로 단어로 표시할 때
대시보드나 리포트에서 KPI 범위 템플릿으로 값을 표시할 때

사용 시나리오

사용 예시1

숫자 값을 단어로 변환하여 표시할 수 있으며, 셀의 값이 변경될 때마다 단어도 자동으로 업데이트됩니다.

다음 코드 샘플은 셀 값을 기준으로 숫자를 단어로 표시하는 사용자 지정 함수를 구현한 것입니다.

// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
// 숫자를 글자로 
var sheet1 = spread.getSheet(0);
sheet1.name('Number to Words');
spread.addCustomName('n_1', '{"";" One";" Two";" Three";" Four";" Five";" Six";" Seven";" Eight";" Nine";" Ten";" Eleven";" Twelve";" Thirteen";" Fourteen";" Fifteen";" Sixteen";" Seventeen";" Eighteen";" Nineteen"}');
spread.addCustomName('n_2', '{"";0;" Twenty";" Thirty";" Forty";" Fifty";" Sixty";" Seventy";" Eighty";" Ninety"}');
spread.addCustomName('n_3', '{"";"-One";"-Two";"-Three";"-Four";"-Five";"-Six";"-Seven";"-Eight";"-Nine"}');
var numberToWordsStyle = new GC.Spread.Sheets.Style();
numberToWordsStyle.formatter = '=TRIM(REPT(INDEX(n_1,1+INT(@/10^8))&" hundred",10^8<@)&IF(@-TRUNC(@,-8)<2*10^7,INDEX(n_1,1+MID(TEXT(@,"000000000"),2,2)),INDEX(n_2,1+MID(TEXT(@,"000000000"),2,2)/10)&INDEX(n_3,1+RIGHT(INT(@/10^6))))&REPT(" million",10^6<@)&IF(--RIGHT(INT(@/10^5)),INDEX(n_1,1+RIGHT(INT(@/10^5)))&" hundred","")&IF(@-TRUNC(@,-5)<2*10^4,INDEX(n_1,1+MID(TEXT(@,"000000000"),5,2)),INDEX(n_2,1+MID(TEXT(@,"000000000"),5,2)/10)&INDEX(n_3,1+RIGHT(INT(@/10^3))))&IF(--MID(TEXT(@,"000000000"),4,3)," thousand","")&IF(--RIGHT(INT(@/100)),INDEX(n_1,1+RIGHT(INT(@/100)))&" hundred","")&IF(MOD(@,100)<20,INDEX(n_1,1+RIGHT(@,2)),INDEX(n_2,1+RIGHT(@,2)/10)&INDEX(n_3,1+RIGHT(@))))';
numberToWordsStyle.name = 'NumberToWords';
numberToWordsStyle.backColor = "lightblue";
spread.addNamedStyle(numberToWordsStyle);
sheet1.setColumnWidth(1, 700);
sheet1.setStyleName(1, 1, 'NumberToWords');
sheet1.getCell(1, 1).value(765348921).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet1.setColumnWidth(1, 700);

사용 예시2

드롭다운에서 통화를 선택하여 월별 매출 수익을 USD, CNY, JPY, EURO로 표시할 수 있는 사례를 생각해보겠습니다. 선택된 통화의 환율을 기준으로 각 월의 수익 값이 업데이트되며 환율이 변경될 경우 매출 수익 값도 동적으로 갱신됩니다.

다음 코드 샘플은 다양한 통화의 환율을 기반으로 매출 수익을 업데이트하는 포맷 문자열을 구현한 것입니다.

window.onload = function () {
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
        sheetCount: 1
    });
    initSpread(spread);
};

function initSpread(spread) {
    var gcns = GC.Spread.Sheets;
    spread.suspendPaint();
    var sheet = spread.getActiveSheet();
    var data = [
        [, "FY 2019"],
        [, "Sales"],
        [, "Monthly", "Cumulative"],
        ["Apr", 188897, 188897],
        ["May", 208146, 397043],
        ["Jun", 226196, 623239],
        ["Jul", 277318, 900557],
        ["Aug", 263273, 1163830],
        ["Sep", 259845, 1423675],
        ["Oct", 241047, 1664722],
        ["Nov", 256306, 1921028],
        ["Dec", 195845, 2116873],
        ["Jan", 204934, 2321808],
        ["Feb", 257852, 2579660],
        ["Mar", 227779, 2807439]
    ];
    sheet.setArray(3, 1, data);
    sheet.setColumnWidth(2, 110);
    sheet.setColumnWidth(3, 110);
    sheet.setRowCount(20);
    sheet.setColumnCount(9);
    sheet.options.gridline.showHorizontalGridline = false;
    sheet.options.gridline.showVerticalGridline = false;
    sheet.getRange(3, 1, 15, 3).setBorder(
        new gcns.LineBorder("black", gcns.LineStyle.medium),
        { all: true });
    sheet.addSpan(3, 2, 1, 2);
    sheet.addSpan(4, 2, 1, 2);
    sheet.getRange(3, 2, 3, 2).backColor('#CFE1F3').hAlign(gcns.HorizontalAlign.center);
    sheet.getRange(6, 1, 12, 1).backColor('#CCC1DA');

    var cMapSource = [
        { "Currency": "USD", "Value": 1, "Symbol": "$" },
        { "Currency": "CNY", "Value": 7.02, "Symbol": "¥" },
        { "Currency": "JPY", "Value": 108.8, "Symbol": "¥" },
        { "Currency": "EURO", "Value": 0.91, "Symbol": "€" },
    ];
    sheet.tables.addFromDataSource('cT', 3, 5, cMapSource);
    [5, 6, 7].forEach((col) => { sheet.setColumnWidth(col, 80); });

    sheet.getCell(1, 2).value("Unit:").hAlign(gcns.HorizontalAlign.right);
    sheet.getRange(1, 3, 1, 1).backColor("yellow").setBorder(
        new gcns.LineBorder("blue", gcns.LineStyle.medium),
        { all: true });

    var dv1 = gcns.DataValidation.createFormulaListValidator('=cT[[#Data], [Currency]]');
    sheet.setDataValidator(1, 3, dv1);
    sheet.getCell(1, 3).hAlign(gcns.HorizontalAlign.center).value("USD");

    sheet.getRange(6, 2, 12, 2)
        .hAlign(gcns.HorizontalAlign.center)
        .formatter('=VLOOKUP($D$2,cT[#Data],3,FALSE)&"  "&TEXT(@*VLOOKUP($D$2,cT[#Data],2,FALSE),"###,###")');
    spread.resumePaint();

제한 사항

Excel은 포맷 문자열을 지원하지 않으므로 Excel I/O는 지원되지 않습니다.
포맷 문자열은 셀 상태를 지원하지 않습니다.

서식 문자열

서식 문자열 - 수식

서식 문자열 - 텍스트 값 템플릿

사용 시나리오

제품

고객 서비스

메시어스 정보

정책(Policy)