다음과 같이 HistogramSparkline 함수를 사용하여 히스토그램 스파크라인을 만들 수 있습니다. =HISTOGRAMSPARKLINE(dataRange,continuous?,paintLabel?,scale?,barWidth?,barColor?,labelColor?,edgeColor?).
이 함수에는 다음과 같은 매개 변수가 있습니다.
dataRange: 범위 또는 계산 배열입니다. 예: "A1:C6" 또는 "{1,2,2,3,3}". 셀 값이 유효한 숫자가 아니면 무시됩니다.
continuous: (선택 사항) true이면 히스토그램이 연속합니다. false이면 히스토그램이 분리됩니다.
paintLabel: (선택 사항) 데이터 레이블을 표시할지 여부를 나타내는 부울입니다.
scale: (선택 사항) 히스토그램이 연속할 때 데이터 빈 생성 너비를 나타내는 숫자입니다. (값 > 0)
barWidth: (선택 사항) 평균 막대 너비에 따라 막대 너비의 비율을 나타내는 숫자입니다. (값 > 0 && 값 <= 1)
barColor: (선택 사항) 막대 색을 나타내는 문자열입니다.
labelFontStyle: (선택 사항) 데이터 레이블 글꼴 스타일을 나타내는 문자열입니다. 이 매개 변수는 사용자 정의 글꼴 스타일, 글꼴 두께, 글꼴 패밀리, 글꼴 크기를 지원합니다.
labelColor: (선택 사항) 데이터 레이블 글꼴 색을 나타내는 문자열로, CSS 색을 지원합니다.
edgeColor: (선택 사항) 막대 가장자리의 색을 나타내는 문자열입니다.
window.onload = () => {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
initSpread(spread);
}
function initSpread(spread) {
spread.fromJSON(data);
var sheet = spread.getSheet(0);
spread.suspendPaint();
for(var i=0; i<7;i++){
var column = String.fromCharCode(65 + i);
sheet.setFormula(3, i, 'HISTOGRAMSPARKLINE('+column+'4:'+column+
'50,TRUE,TRUE,10,1,"#DDDDDD","normal normal 8pt Calibri", "#000000", "#C0C0C0")');
i++;
}
spread.resumePaint();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="spreadjs culture" content="ko-kr"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/histogramSparkline.js"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" style="width:100%;height:100%"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
