[]
스파크라인은 일반적으로 작고 단순하며 데이터 중심의 그래픽으로 정보를 시각적으로 매력적인 방식으로 전달하는 데 사용됩니다. 그러나 SpreadJS에서는 스파크라인을 도형 또는 이미지로 창의적으로 렌더링할 수 있어 다양한 상황에서 시각적 디자인을 향상시키거나 의미를 전달할 수 있습니다. 이러한 스파크라인은 이동, 확대/축소, 회전할 수 있으며, 프레젠테이션에서 정보를 간결하고 이해하기 쉽게 전달하거나, 사용자 인터페이스에서 작업 진행 상황을 보여주는 데 사용할 수 있습니다.
스파크라인을 이미지로 렌더링하려면, 그림 채우기 속성의 src
또는 style.fill.src
속성에 스파크라인 수식을 바인딩하면 됩니다. 이와 유사하게, 자동 도형(auto shape)에 대해서도 style.fill.src
속성에 스파크라인 수식을 바인딩할 수 있습니다. 또한 SpreadJS는 스파크라인에 그라데이션, 단색, 기타 채우기 스타일을 추가할 수 있도록 지원합니다.
다음 예제 코드는 도형을 추가한 후 Column Sparkline 수식을 바인딩하는 방법을 보여줍니다:
// auto shape 추가
var rect = sheet.shapes.add("rect", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 0, 300, 142, 162);
// 그림 채우기 설정
var style = rect.style();
style.fill = { src: '' };
rect.style(style);
sheet.setValue(11,0,"Sales: ");
sheet.setValue(11,3,"Note: ");
// picture fill의 src 속성에 Column Sparkline 수식 바인딩
rect.setFormula('style.fill.src', '=COLUMNSPARKLINE(Sheet1!B3:B9,0)');
다음 예제 코드는 이미지 도형(picture shape)에 Pie Sparkline을 바인딩하고, 단색 배경을 설정하는 방법을 보여줍니다:
// picture shape 추가
var pic = sheet.shapes.addPictureShape("pic", '', 400, 300, 142, 162);
// src 속성에 Pie Sparkline 수식 바인딩
pic.setFormula('src', '=PIESPARKLINE(Sheet1!B3:B8,"#919F81","#D7913E","CEA722","#B58091","#8974A9","#728BAD")');
// 단색 배경 설정
var style = pic.style();
style.fill = { color: '#4F80BC' };
pic.style(style);