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

도형 스파크라인

스파크라인은 일반적으로 작고 단순하며 데이터 중심의 그래픽으로 정보를 시각적으로 매력적인 방식으로 전달하는 데 사용됩니다. 그러나 SpreadJS에서는 스파크라인을 도형 또는 이미지로 창의적으로 렌더링할 수 있어 다양한 상황에서 시각적 디자인을 향상시키거나 의미를 전달할 수 있습니다. 이러한 스파크라인은 이동, 확대/축소, 회전할 수 있으며, 프레젠테이션에서 정보를 간결하고 이해하기 쉽게 전달하거나, 사용자 인터페이스에서 작업 진행 상황을 보여주는 데 사용할 수 있습니다.

sparkline-shapepic

스파크라인을 이미지로 렌더링하려면, 그림 채우기 속성의 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);