[]
막대사탕 변동 스파크라인은 데이터셋에서 절대 및 상대적인 차이를 시각적으로 표현할 수 있는 강력한 시각화 기법입니다. 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 | [선택] 불리언 |
| Lollipop 미니 그래프가 절대값 차이를 표시할지 여부를 지정합니다.
|
reference | [선택] 숫자 또는 참조 |
| 기준선의 위치를 지정합니다. |
mini | [선택] 숫자 또는 참조 |
| 스파크라인의 최소값을 지정합니다. |
maxi | [선택] 숫자 또는 참조 |
| 스파크라인의 최대값을 지정합니다. |
tickunit | [선택] 숫자 또는 참조 |
| 눈금 단위를 지정합니다. |
legend | [선택] 불리언 |
| 데이터 레이블을 표시할지 여부를 지정합니다. |
colorPositive | [선택] 문자열 |
| 차이값이 기준값보다 클 때 사용될 색상입니다. |
colorNegative | [선택] 문자열 |
| 차이값이 기준값보다 작을 때 사용될 색상입니다. |
lollipopHeaderColor | [선택] 문자열 |
| Lollipop 헤더의 채우기 색상입니다. |
vertical | [선택] 불리언 |
| 스파크라인을 세로로 표시할지 여부를 지정합니다 |
막대사탕 변동 스파크라인 수식의 형식은 다음과 같습니다:
=LOLLIPOPVARISPARKLINE(plannedValue,actualValue,index,absolute,reference,mini,maxi,tickunit,legend,colorPositive,colorNegative,lollipopHeaderColor,vertical);
조직에서 다양한 지역의 계획 수익 대비 실제 수익의 차이를 백분율로 분석하여 현실과 기대 사이의 차이를 반영한 경제 데이터 보고서를 작성하려는 시나리오를 생각해볼 수 있습니다.
막대사탕 변동 스파크라인은 값이 최대값보다 크거나 최소값보다 작을 경우, 데이터를 초과하는 경우 차트에 화살표로 표시됩니다.
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();
막대사탕 변동 스파크라인은 Spread 디자이너의 삽입(INSERT) > 스파크라인(Sparklines) 탭 그룹 내에 있는 막대사탕 분산 스파크라인(Lollipop Variance Sparkline) 버튼을 선택하여 설정할 수 있습니다.
막대사탕 분산 스파크라인(Lollipop Variance Sparkline) 설정 대화 상자를 통해 함수 매개변수를 편집할 수 있습니다.