[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

도형 속성 연결

SpreadJS는 수식을 통해 도형의 속성을 워크시트 셀에 바인딩할 수 있도록 지원합니다. 셀의 내용이 변경되면, 해당 셀과 연결된 도형의 속성도 자동으로 업데이트됩니다.



setFormula 메서드는 text, height, width 등의 도형 속성과 해당 속성에 바인딩할 수식을 문자열로 받아들입니다. 이를 통해 도형의 속성을 수식에 따라 셀 값과 연동할 수 있습니다.

또한 SpreadJS는 도형이나 텍스트 상자에 참조된 수식을 포함하는 Excel 파일의 가져오기 및 내보내기를 지원하며, 수식을 통해 연결된 셀과 도형 간의 링크도 유지됩니다.

참고: SpreadJS에서는 API를 통해 셀 데이터를 링크 텍스트 또는 일반 텍스트 중 하나로만 설정할 수 있습니다.

사용 사례 시나리오

염료 화학 공장에서 매년 부산물로 발생하는 화학 폐수를 시각적으로 표현하고자 하는 경우를 예로 들 수 있습니다. 원형 기둥(cylinder) 도형과 셀을 동적으로 연결하여, 셀의 값에 따라 기둥의 높이가 변경되도록 하면 폐수의 양을 시각적으로 쉽게 표현할 수 있습니다.

이와 같은 방식으로 원시 데이터를 시각적으로 효과적인 정보로 변환할 수 있으며, 아래 GIF는 그 예시를 보여줍니다.



다음 예제 코드는 셀과 원기둥(cylinder) 도형 간에 링크를 설정하는 방법을 보여줍니다. 각 셀은 원기둥의 높이를 참조하고, 셀 값이 변경될 때마다 생산된 폐수의 양을 강조 표시할 수 있습니다.

Ask ChatGPT

spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getSheet(0);
sheet.name("BuildInShape");
sheet.setArray(0, 0, [
    ["DyeStuff Chemical Industry Water Wastage Analysis"],
    ["Waste Water / Year", "Million Litre(s)"],
    [2017, 8.1],
    [2018, 9.5],
    [2019, 10.2],
    [2020, 11],
    [2021, 11.6]
]);

var shape1 = sheet.shapes.add("shape1", GC.Spread.Sheets.Shapes.AutoShapeType.can, 150, 100, 70, 50);
shape1.setFormula("height", "=BuildInShape!B3*15");
shape1.setFormula("text", "=BuildInShape!A3");
shape1.setFormula("y", "=221.5-BuildInShape!B3*15");

var shape2 = sheet.shapes.add("shape2", GC.Spread.Sheets.Shapes.AutoShapeType.can, 230, 78, 70, 50);
shape2.setFormula("height", "=BuildInShape!B4*15");
shape2.setFormula("text", "=BuildInShape!A4");
shape2.setFormula("y", "=221.5-BuildInShape!B4*15");

var shape3 = sheet.shapes.add("shape3", GC.Spread.Sheets.Shapes.AutoShapeType.can, 310, 65, 70, 50);
shape3.setFormula("height", "=BuildInShape!B5*15");
shape3.setFormula("text", "=BuildInShape!A5");
shape3.setFormula("y", "=221.5-BuildInShape!B5*15");

var shape4 = sheet.shapes.add("shape4", GC.Spread.Sheets.Shapes.AutoShapeType.can, 390, 52, 70, 50);
shape4.setFormula("height", "=BuildInShape!B6*15");
shape4.setFormula("text", "=BuildInShape!A6");
shape4.setFormula("y", "=221.5-BuildInShape!B6*15");

var shape5 = sheet.shapes.add("shape5", GC.Spread.Sheets.Shapes.AutoShapeType.can, 470, 40, 70, 50);
shape5.setFormula("height", "=BuildInShape!B7*15");
shape5.setFormula("text", "=BuildInShape!A7");
shape5.setFormula("y", "=221.5-BuildInShape!B7*15");