# 막대사탕 변동 스파크라인
## Content
**막대사탕 변동 스파크라인**은 데이터셋에서 절대 및 상대적인 차이를 시각적으로 표현할 수 있는 강력한 시각화 기법입니다. SpreadJS에서는 `LOLLIPOPVARISPARKLINE` 메서드를 사용하여 Lollipop Variance 스파크라인을 생성할 수 있습니다.
**막대사탕 변동 스파크라인**은 막대 차트와 동일한 정보를 전달하지만, 사각형을 선으로 바꿔 표시 공간을 줄이며, 데이터 포인트를 강조하여 보다 간결한 표시를 제공합니다. 따라서 대량의 데이터를 다룰 때 Lollipop 차트는 더 미려한 방식으로 표현됩니다.
위 이미지는 **막대사탕 변동 스파크라인**과 그 구성 요소를 보여줍니다:
| 요소 | 설명 |
| --- | --- |
| **Reference** | 모든 값은 이 기준 값에 대해 상대적으로 오프셋됩니다. |
| **lollipop** | Lollipop의 길이는 차이(variance)의 크기를 나타냅니다. |
| **mini** | Lollipop 스파크라인이 그릴 수 있는 최소값을 나타냅니다. |
| **maxi** | Lollipop 스파크라인이 그릴 수 있는 최대값을 나타냅니다. |
| **label** | 데이터의 실제 수치를 나타냅니다. |
| **arrow** | 값이 최대값보다 크거나 최소값보다 작을 때만 표시됩니다.
현재 차이값이 양수인지 음수인지, 세로인지 가로인지에 따라 표시 위치가 달라집니다:
**가로 방향**:
\- 양수일 경우: 셀의 오른쪽에 화살표 표시
\- 음수일 경우: 셀의 왼쪽에 화살표 표시
**세로 방향**:
\- 양수일 경우: 셀의 위쪽에 화살표 표시
\- 음수일 경우: 셀의 아래쪽에 화살표 표시 |
| **tick** | 사용자가 설정할 수 있는 기본 단위입니다. |
| **colorPositive** | 차이값이 기준값보다 클 때 Lollipop 막대에 채워질 색상입니다. |
| **colorNegative** | 차이값이 기준값보다 작을 때 Lollipop 막대에 채워질 색상입니다. |
### **막대사탕 변동 스파크라인** 수식에는 다음과 같은 옵션이 있습니다:
| 인수 | 타입 | 기본값 | 설명 |
| --- | --- | --- | --- |
| **plannedValue** | [필수] 숫자 또는 참조 | 없음 | 전체 planned value 범위에 전달할 예상 데이터셋을 지정합니다. |
| **actualValue** | [필수] 숫자 또는 참조 | 없음 | 전체 actual value 범위에 전달할 실제 데이터셋을 지정합니다. |
| **index** | [필수] 숫자 또는 참조 | 없음 | plannedValue 및 actualValue의 데이터 인덱스를 지정합니다.
가로형 그래프일 경우 행 인덱스, 세로형일 경우 열 인덱스를 의미하며 0부터 시작합니다. |
| **absolute** | [선택] 불리언 | `false` | Lollipop 미니 그래프가 절대값 차이를 표시할지 여부를 지정합니다.
`false`: 차이값이 서로 영향을 주지 않음
`true`: 비율에 따라 엄격하게 그려지며, 이 경우 `reference`, `maxi`, `mini` 인수는 무시됩니다. |
| **reference** | [선택] 숫자 또는 참조 | `0` | 기준선의 위치를 지정합니다. |
| **mini** | [선택] 숫자 또는 참조 | `-1` | 스파크라인의 최소값을 지정합니다. |
| **maxi** | [선택] 숫자 또는 참조 | `1` | 스파크라인의 최대값을 지정합니다. |
| **tickunit** | [선택] 숫자 또는 참조 | `0` | 눈금 단위를 지정합니다. |
| **legend** | [선택] 불리언 | `FALSE` | 데이터 레이블을 표시할지 여부를 지정합니다. |
| **colorPositive** | [선택] 문자열 | `"green"` | 차이값이 기준값보다 클 때 사용될 색상입니다. |
| **colorNegative** | [선택] 문자열 | `"red"` | 차이값이 기준값보다 작을 때 사용될 색상입니다. |
| **lollipopHeaderColor** | [선택] 문자열 | `"black"` | Lollipop 헤더의 채우기 색상입니다. |
| **vertical** | [선택] 불리언 | `FALSE` | 스파크라인을 세로로 표시할지 여부를 지정합니다 |
**막대사탕 변동 스파크라인** 수식의 형식은 다음과 같습니다:
```auto
=LOLLIPOPVARISPARKLINE(plannedValue,actualValue,index,absolute,reference,mini,maxi,tickunit,legend,colorPositive,colorNegative,lollipopHeaderColor,vertical);
```
### **사용 사례**
조직에서 다양한 지역의 계획 수익 대비 실제 수익의 차이를 백분율로 분석하여 현실과 기대 사이의 차이를 반영한 경제 데이터 보고서를 작성하려는 시나리오를 생각해볼 수 있습니다.
**막대사탕 변동 스파크라인**은 값이 최대값보다 크거나 최소값보다 작을 경우, 데이터를 초과하는 경우 차트에 화살표로 표시됩니다.
```auto
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
var sheet = spread.getActiveSheet();
sheet.name('Lollipop variance sparkline');
sheet.setRowCount(20);
sheet.setColumnCount(40);
sheet.suspendPaint();
sheet.addSpan(0, 0, 1, 5);
sheet.setValue(0, 0, "Regional Sales Data Analysis Statistics Table");
sheet.getCell(0, 0).backColor("#196a99");
sheet.setArray(1, 0, [
["District", "Sales target", "Actual sales", "Variance", "Variance %"],
["Asia", 4500, 3500],
["Europe", 3758, 3920],
["NorthAmerica", 4525, 5002],
["SouthAmerica", 3200, 3480],
["Oceania", 1540, 1800],
["Africa", 430, 430],
]);
for (let i = 2; i < 8; i++) {
sheet.setFormula(i, 3, '=LOLLIPOPVARISPARKLINE($B$3:$B$8,$C$3:$C$8,' + (i - 2) + ',true,,,,200,true,"#cecece","#cecece","#ffa501")');
sheet.setFormula(i, 4, '=LOLLIPOPVARISPARKLINE($B$3:$B$8,$C$3:$C$8,' + (i - 2) + ',false,0,-0.2,0.2,0.1,true,"green","red","skyblue")');
}
widthList = [100, 100, 100, 300, 300];
for (let i = 0; i < widthList.length; i++) {
sheet.setColumnWidth(i, widthList[i]);
}
heightList = [50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50, 50];
for (let i = 0; i < heightList.length; i++) {
sheet.setRowHeight(i, heightList[i]);
}
sheet.getRange('A1:E13').hAlign(1).vAlign(1);
sheet.getRange('A1:E1').font('bold normal 15px normal');
sheet.getRange('A1:A13').font('bold normal 15px normal');
sheet.getRange(2, 3, 6, 1).setBorder(new GC.Spread.Sheets.LineBorder("#fff", GC.Spread.Sheets.LineStyle.empty), {
inside: true
});
sheet.resumePaint();
```
### **SpreadJS 디자이너 사용**
**막대사탕 변동 스파크라인**은 Spread 디자이너의 **삽입(INSERT) > 스파크라인(Sparklines)** 탭 그룹 내에 있는 **막대사탕 분산 스파크라인(Lollipop Variance Sparkline)** 버튼을 선택하여 설정할 수 있습니다.
**막대사탕 분산 스파크라인(Lollipop Variance Sparkline) 설정** 대화 상자를 통해 함수 매개변수를 편집할 수 있습니다.
