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

히스토그램 스파크라인

히스토그램은 데이터 집합의 도수 분포를 나타내는 데 사용됩니다. SpreadJS에서는 히스토그램 스파크라인 함수를 사용하여 히스토그램 스파크라인을 생성할 수 있습니다.




위 이미지는 히스토그램 스파크라인과 그 구성 요소를 보여줍니다:

  • Bin: 지정된 값 범위의 데이터를 포함하는 데이터 컨테이너입니다.

  • Bar: UI를 구성하는 그리기 블록입니다. paintLabel 옵션이 true일 경우 막대의 높이는 다음 식으로 결정됩니다:

    (cellRowHeight - labelFontSize - 6px)

    그렇지 않으면 다음 식으로 결정됩니다:

    (cellRowHeight - 6px)

  • Edge: 막대의 테두리입니다.

    • 폰트 크기가 해당 식보다 클 경우, 식보다 작거나 같은 최대 정수가 폰트 크기로 사용됩니다.

    • 셀 높이가 cellRowHeight보다 작을 경우, 폰트 크기는 12px입니다.

  • Data Label: 스파크라인에 표시되는 데이터 범위입니다. 데이터 레이블의 폰트 크기는 다음 식으로 결정됩니다:

    Math.floor(cellRowHeight/3)

    • 폰트 크기가 해당 식보다 클 경우, 식보다 작거나 같은 최대 정수가 사용됩니다.

    • 셀 높이가 cellRowHeight보다 작을 경우, 폰트 크기는 12px입니다.


히스토그램 스파크라인 유형

히스토그램 스파크라인은 이산형(Discrete) 또는 연속형(Continuous)으로 표시할 수 있습니다:




이산형 히스토그램은 연속적인 구간 없이 기존 값을 기준으로 데이터를 표시합니다. 예: 20, 34, 38. 값은 오름차순으로 그려집니다.


연속형 히스토그램은 연속적인 값 범위를 사용하여 데이터를 표시합니다. 첫 번째 bin은 왼쪽-닫힘, 오른쪽-닫힘 구간이며, 나머지 bin은 왼쪽-열림, 오른쪽-닫힘 구간입니다.

  • 하한값은 다음 식으로 계산됩니다:


    Math.floor(minValue/scale)*scale


    상한값은 다음 식으로 계산됩니다:


    Math.ceil(maxValue/scale)*scale

  • 기본적으로 bin의 너비는 1입니다.

  • scale 값이 0보다 작을 경우, 스파크라인은 1로 설정됩니다.


히스토그램 유형은 HistogramSparkline 수식의 continuous 옵션으로 지정할 수 있습니다. 히스토그램 스파크라인 수식에는 다음과 같은 옵션이 있으며, dataRange만 필수입니다:

옵션

설명

dataRange

데이터 소스 범위를 지정합니다. 범위, 계산 배열, 계산 참조를 지원합니다.

continuous

true일 경우 연속형 히스토그램입니다.


false일 경우 이산형 히스토그램입니다.

기본값은 true입니다.

paintLabel

true일 경우 데이터 레이블을 표시합니다.


기본값은 false입니다.

scale

bin 너비를 지정합니다. 이 값은 연속형 히스토그램에서 유용합니다.


기본값은 false입니다.

barWidth

막대 너비를 지정합니다.


기본값은 1입니다.

막대 너비 = 자동 계산된 너비 × barWidth

값 범위는 0 < 값 ≤ 1입니다.

barColor

막대의 색상을 지정합니다.


기본값은 #5B9BD5입니다.

CSS color 속성을 지원합니다.

labelFontStyle

데이터 레이블 폰트 스타일을 지정합니다.


기본값은 9pt Calibri입니다.

CSS font 속성을 지원하며, font-style, font-weight, font-size, font-family를 지원합니다.

labelColor

데이터 레이블 폰트의 색상을 지정합니다.


기본값은 검정 (#000000)입니다.

CSS color 문자열을 지원합니다.

edgeColor

테두리 색상을 지정합니다.


기본값은 silver (#C0C0C0)입니다.

CSS color 속성을 지원합니다.

히스토그램 스파크라인 수식의 구문은 다음과 같습니다:

=HISTOGRAMSPARKLINE(dataRange,continuous?,paintLabel?,scale?,barWidth?,barColor?,labelFontStyle?,labelColor,edgeColor?)


참고 사항

  • 스파크라인의 기본 padding은 3px입니다.

  • paintLabel 옵션이 true이더라도, 사용자 지정 폰트 크기가 셀 행 높이의 1/3보다 크면 레이블은 표시되지 않습니다.

  • 데이터 레이블의 너비가 막대의 평균 너비보다 클 경우 해당 레이블은 표시되지 않습니다. 평균 막대 너비는 다음 식으로 계산됩니다(셀 너비 / 막대 개수)

    예: 셀 너비가 100px이고 막대가 5개이면, 평균 막대 너비는 20px입니다. 이 경우, 데이터 레이블 중 너비가 20px보다 큰 항목은 표시되지 않습니다.

  • 데이터 범위에서 숫자가 아닌 값은 무시됩니다.


사용 사례

다음은 한 조직이 사용자의 주간 소셜 미디어 소비량을 조사한 시나리오입니다.

히스토그램 스파크라인은 이러한 통계를 시각화하고, 사용자가 다양한 소셜 미디어 플랫폼에서 소비한 시간을 분석하는 데 활용할 수 있습니다.



// Spread 초기화
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
spread.suspendPaint();
// 시트 가져오기
var sheet1 = spread.sheets[0];
// sheetAreaOffset 옵션 설정
sheet1.options.sheetAreaOffset = { left: 1, top: 1 };
// gridlines 숨김
sheet1.options.gridline = { showVerticalGridline: false, showHorizontalGridline: false };
// 열/행 헤더 숨김
sheet1.options.colHeaderVisible = false;
sheet1.options.rowHeaderVisible = false;
// 열 너비 설정
for (var i = 1; i < 5; i++)
    sheet1.setColumnWidth(i, 265);
sheet1.setColumnWidth(0, 140);
// 행 높이 설정
sheet1.setRowHeight(0, 35, GC.Spread.Sheets.SheetArea.dataArea)
sheet1.setRowHeight(1, 35, GC.Spread.Sheets.SheetArea.dataArea)
sheet1.setRowHeight(2, 200, GC.Spread.Sheets.SheetArea.dataArea)
var dataArray =
[
    ["Name", "Facebook", "Instagram", "LinkedIn", "Twitter"]
];
var dataArray1 =
[
    ["John Mathew", 71, 74, 97, 85],
    ["Jim Parker", 76, 58, 88, 84],
    ["Sophia Ran", 97, 80, 74, 80],
    ["Wendi Blake", 55, 97, 84, 60],
    ["Stephan Lai", 81, 83, 94, 90],
    ["Fay Van Damme", 71, 78, 72, 82],
    ["Brevin Dice", 84, 80, 83, 93],
    ["Regina Oleveria", 86, 76, 56, 92],
    ["Georgi Facello", 78, 61, 91, 68],
    ["Bezalel Simmel", 85, 58, 92, 68],
    ["Sachin Tsukuda", 76, 70, 55, 81],
    ["Patricia Breugel", 64, 77, 83, 85],
    ["Zito Baaz", 82, 97, 66, 90],
    ["Navin Argence", 59, 87, 83, 85],
    ["Siamak Salverda", 77, 85, 97, 65],
    ["Khaled Kohling", 87, 67, 77, 97],
    ["Bangqing Kleiser", 49, 97, 78, 75],
    ["Rimli Dusink", 25, 61, 91, 91],
    ["Nathan Ranta", 65, 60, 96, 92],
    ["Gila Lukaszewicz", 27, 91, 62, 93],
    ["Kaijung Rodham", 31, 81, 67, 87],
    ["Mohammed Pleszkun", 20, 98, 67, 82],
    ["Shuichi Piazza", 67, 56, 81, 82],
    ["Katsuo Leuchs", 83, 74, 51, 42],
    ["Masanao Ducloy", 67, 64, 58, 73],
    ["Mihalis Crabtree", 80, 91, 57, 84],
    ["Danny Lenart", 92, 38, 99, 86],
    ["Yongqiao Dalton", 85, 61, 73, 81],
    ["Gaetan Veldwijk", 64, 52, 76, 72],
    ["Leszek Pulkowski", 95, 75, 64, 99],
    ["Weidon Gente", 77, 88, 77, 96],
    ["Krister Stranks", 72, 38, 89, 55],
    ["Ziyad Baaz", 89, 81, 83, 48],
    ["Ymte Perelgut", 67, 70, 97, 94],
    ["Tonia Butner", 99, 71, 87, 76],
    ["Shigeaki Narlikar", 78, 80, 80, 97],
    ["Ayakannu Beerel", 86, 61, 85, 81],
    ["Moni Bale", 60, 72, 71, 86],
    ["Manohar Heemskerk", 97, 60, 75, 78],
    ["Angus Swan", 33, 97, 99, 99],
    ["Christ Murtagh", 91, 76, 73, 80],
    ["Hilary Rodiger", 75, 64, 84, 54],
    ["Maren Baez", 45, 77, 86, 88],
    ["Greger Jahnichen", 98, 89, 81, 63],
    ["Ymte Duclos", 95, 83, 72, 72],
    ["Chenyi Hainaut", 81, 97, 99, 87],
    ["Kasidit Picel", 87, 80, 88, 80],
    ["Elrique Walstra", 96, 54, 38, 54],
    ["Adel Reghbati", 56, 88, 81, 88]
];

// 데이터 설정
sheet1.setArray(1, 0, dataArray);
sheet1.setArray(3, 0, dataArray1);
sheet1.setValue(0, 0, "Social media usage of users (in minutes)", GC.Spread.Sheets.SheetArea.dataArea);
// 정렬 설정
sheet1.getRange(-1, 0, -1, 10).hAlign(GC.Spread.Sheets.HorizontalAlign.center);
sheet1.addSpan(0, 0, 1, 5, GC.Spread.Sheets.SheetArea.dataArea);
            
// HistogramSparkline 수식 설정
sheet1.setFormula(2, 1, 'HISTOGRAMSPARKLINE(Sheet1!B4: B52, true, true, 20, 1, "#DC4463", "bold normal 10pt Calibri", "black")');
sheet1.setFormula(2, 2, 'HISTOGRAMSPARKLINE(Sheet1!C4: C52, true, true, 20, 1, "#FFAE49", "bold normal 10pt Calibri", "black")');
sheet1.setFormula(2, 3, 'HISTOGRAMSPARKLINE(Sheet1!D4: D52, true, true, 20, 1, "#5AB4BD", "bold normal 10pt Calibri", "black")');
sheet1.setFormula(2, 4, 'HISTOGRAMSPARKLINE(Sheet1!E4: E52, true, true, 20, 1, "#C2EDB2", "bold normal 10pt Calibri", "black")');
            
// 0번째 행 스타일
var style1 = new GC.Spread.Sheets.Style();
style1.font = "bold 24px Calibri";
style1.foreColor = "black";
style1.backColor = "#9FD5B7";
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
sheet1.setStyle(0, 0, style1, GC.Spread.Sheets.SheetArea.dataArea);

// 1번째 행 스타일
var style = new GC.Spread.Sheets.Style();
style.font = "bold italic 20px Calibri";
style.foreColor = "black";
style.backColor = "#D3F0E0";
style.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style.vAlign = GC.Spread.Sheets.VerticalAlign.center;
for (var i = 0; i < 5; i++) {
    sheet1.setStyle(1, i, style, GC.Spread.Sheets.SheetArea.dataArea);
}
// 2번째 행 스타일
var style2 = new GC.Spread.Sheets.Style();
style2.backColor = "#EDFDF4";
for (var i = 0; i < 5; i++)
    sheet1.setStyle(2, i, style2, GC.Spread.Sheets.SheetArea.dataArea);

// dataArea 셀 테두리 설정
sheet1.getRange("A4:E52").setBorder(
    new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thick),
    { top: true, bottom: true, left: true, right: true }, GC.Spread.Sheets.SheetArea.dataArea);

spread.resumePaint();