[]
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");