RangeBlock

rangeblock 스파크라인은 범위 템플릿에 바인딩하여 범위 템플릿 작업을 더 쉽게 할 수 있도록 범위 템플릿을 반환할 수 있습니다. 아래 통합 문서에서 RenderSheetTemplateSheet의 셀 범위를 템플릿으로 사용하는 방법과 OBJECT 함수를 사용하여 데이터 시트의 데이터에서 개체를 만드는 방법을 살펴보십시오.

설명
app.js
index.html
styles.css

=RANGEBLOCKSPAKLINE(template_range, data_expr)과 같이 수식에 RANGEBLOCKSPARKLINE 함수를 사용하여 rangeblock 스파크라인을 만들 수 있습니다.

이 함수에는 다음과 같은 매개 변수가 있습니다.

template_range: rangetemplate의 범위를 나타내는 참조입니다(예: Template!A1:E10).

data_expr: 데이터 바인딩에 대한 범위 템플릿의 개체 데이터를 나타내는 셀 참조 또는 OBJECT 함수의 결과입니다(예: A1 또는 OBJECT(E4:AB4, E5:AB5)).

예:

// the cell reference
renderSheet.setFormula(0, 0, 'OBJECT("name", "Peyton\'s Assets", "savings", 25000, "shares", 55000, "stocks", 15000, "house", 250000, "bonds", 11000, "car", 7500)');
renderSheet.setFormula(1, 0, '=RANGEBLOCKSPARKLINE(Template!A1:E10, A1)');

// the result of OBJECT function
renderSheet.setFormula(0, 0, 'RANGEBLOCKSPARKLINE(TemplateSheet!A2:F11, OBJECT(E4:AB4, E5:AB5))');

OBJECT 함수의 경우 수식에서 OBJECT 함수를 사용하여 개체를 만들 수 있습니다.
=OBJECT(prop1, expr1, prop2, expr2, …) // the 1->1 case
or =OBJECT(props_range, exprs_range) // the n1->n2 case
or =OBJECT(property1, expressionArray1, property2, expressionArray2, …) // the 1->n case.
개체를 정의하고 매개 변수는 키-값 순서여야 하며 쌍을 이루어야 합니다. 속성 및 값이 1->1, 1->n, n1->n2를 지원합니다(n1은 n2와 같음). 1->1 및 n1->n2의 케이스는 개체는 반환하고, 1->n의 케이스는 개체 배열을 반환합니다.

예:

sheet.setValue(0, 0, "name");
sheet.setValue(0, 1, "test");
sheet.setValue(1, 0, "sex");
sheet.setValue(1, 1, "M");
sheet.setValue(2, 0, "age");
sheet.setValue(2, 1, 20);

sheet.setFormula(3, 0, 'OBJECT(A1:A3, B1:B3)'); // the n1->n2 case

sheet.setFormula(3, 0, 'OBJECT(A1, B1, A2, B2, A3, B3)'); // the 1->1 case

sheet.setFormula(3, 0, 'OBJECT("name","test")'); // the 1->1 case



// The 1->n case
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 2 });
spread.options.allowDynamicArray = true;
var dataSheet = spread.getSheet(1);
dataSheet.name("Data");
var prefixes = ['a', 'b', 'c', 'd'];
var arrayValues = [], rowValues;
for (var i = 0; i < 6; i++) {
    rowValues = [];
    for (var j = 0; j < 4; j++) {
        rowValues[j] = prefixes[j] + (i + 1);
    }
    arrayValues[i] = rowValues;
}
dataSheet.setArray(0, 0, arrayValues);

var sheet = spread.getActiveSheet();
sheet.setRowCount(2);
sheet.setColumnCount(3);
for (var i = 0; i < 2; i++) {
    sheet.setRowHeight(i, 100);
    for (var j = 0; j < 3; j++) {
        sheet.setColumnWidth(j, 100);
    }
}
sheet.setFormula(0, 0, '=OBJECT("name", INDEX(Data!A1:D6,SEQUENCE(2,3,1),1), "age", INDEX(Data!A1:D6, SEQUENCE(2,3,1),2))');
=RANGEBLOCKSPAKLINE(template_range, data_expr)과 같이 수식에 RANGEBLOCKSPARKLINE 함수를 사용하여 rangeblock 스파크라인을 만들 수 있습니다. 이 함수에는 다음과 같은 매개 변수가 있습니다. template_range: rangetemplate의 범위를 나타내는 참조입니다(예: Template!A1:E10). data_expr: 데이터 바인딩에 대한 범위 템플릿의 개체 데이터를 나타내는 셀 참조 또는 OBJECT 함수의 결과입니다(예: A1 또는 OBJECT(E4:AB4, E5:AB5)). 예: OBJECT 함수의 경우 수식에서 OBJECT 함수를 사용하여 개체를 만들 수 있습니다. =OBJECT(prop1, expr1, prop2, expr2, …) // the 1->1 case or =OBJECT(props_range, exprs_range) // the n1->n2 case or =OBJECT(property1, expressionArray1, property2, expressionArray2, …) // the 1->n case. 개체를 정의하고 매개 변수는 키-값 순서여야 하며 쌍을 이루어야 합니다. 속성 및 값이 1->1, 1->n, n1->n2를 지원합니다(n1은 n2와 같음). 1->1 및 n1->n2의 케이스는 개체는 반환하고, 1->n의 케이스는 개체 배열을 반환합니다. 예:
var spreadNS = GC.Spread.Sheets; window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 }); spread.options.allowDynamicArray = true; initSpread(spread); }; function initSpread(spread) { var renderSheet = spread.getSheet(0); var templateSheet = spread.getSheet(1); var dataSheet = spread.getSheet(2); spread.options.scrollByPixel = true; spread.options.scrollPixel = 10; spread.suspendPaint(); initTemplateSheet(templateSheet); initDataSheet(dataSheet); initRenderSheet(renderSheet); spread.resumePaint(); } function initRenderSheet (renderSheet) { renderSheet.name("RenderSheet"); renderSheet.setColumnCount(50); renderSheet.setColumnWidth(0, 1200); renderSheet.getCell(0, 0).value("Top 5 Products (by units sold)") .font("20px Arial").vAlign(GC.Spread.Sheets.VerticalAlign.center) .foreColor("white").backColor("#82bc00"); renderSheet.setRowHeight(0, 35); for (var i = 1; i < 6; i++) { renderSheet.setRowHeight(i, 250); renderSheet.setFormula(i, 0, 'RANGEBLOCKSPARKLINE(TemplateSheet!A2:M11, OBJECT(product_table[#Headers], INDEX(product_table[#Data],ROW()-1,SEQUENCE(COUNTA(product_table[#Headers]),1))))'); } } function initTemplateSheet (templateSheet) { templateSheet.fromJSON(templateJson); templateSheet.name("TemplateSheet"); templateSheet.setFormatter(2,1,"=IMAGE(\"$DEMOROOT$/spread/source/images/products/\"&@)"); templateSheet.setBindingPath(2,1,"Image"); } function initDataSheet (dataSheet) { dataSheet.fromJSON(dataJson); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ko-kr"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/range-block-data.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/data/range-block-template.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" style="width:100%;height:100%"></div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }