[]
        
(Showing Draft Content)

막대사탕 변동 스파크라인

막대사탕 변동 스파크라인은 데이터셋에서 절대 및 상대적인 차이를 시각적으로 표현할 수 있는 강력한 시각화 기법입니다. SpreadJS에서는 LOLLIPOPVARISPARKLINE 메서드를 사용하여 Lollipop Variance 스파크라인을 생성할 수 있습니다.


막대사탕 변동 스파크라인은 막대 차트와 동일한 정보를 전달하지만, 사각형을 선으로 바꿔 표시 공간을 줄이며, 데이터 포인트를 강조하여 보다 간결한 표시를 제공합니다. 따라서 대량의 데이터를 다룰 때 Lollipop 차트는 더 미려한 방식으로 표현됩니다.


image


위 이미지는 막대사탕 변동 스파크라인과 그 구성 요소를 보여줍니다:

요소

설명

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

스파크라인을 세로로 표시할지 여부를 지정합니다

막대사탕 변동 스파크라인 수식의 형식은 다음과 같습니다:

=LOLLIPOPVARISPARKLINE(plannedValue,actualValue,index,absolute,reference,mini,maxi,tickunit,legend,colorPositive,colorNegative,lollipopHeaderColor,vertical);

사용 사례

조직에서 다양한 지역의 계획 수익 대비 실제 수익의 차이를 백분율로 분석하여 현실과 기대 사이의 차이를 반영한 경제 데이터 보고서를 작성하려는 시나리오를 생각해볼 수 있습니다.

막대사탕 변동 스파크라인은 값이 최대값보다 크거나 최소값보다 작을 경우, 데이터를 초과하는 경우 차트에 화살표로 표시됩니다.

image

     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) 버튼을 선택하여 설정할 수 있습니다.


image


막대사탕 분산 스파크라인(Lollipop Variance Sparkline) 설정 대화 상자를 통해 함수 매개변수를 편집할 수 있습니다.


image