수식에서 다음과 같이 SpreadSparkline 함수를 사용하여 확산 스파크라인을 만들 수 있습니다. =SPREADSPARKLINE(points, showAverage?, scaleStart?, scaleEnd?, style?, colorScheme?, vertical?).
이 함수에는 다음과 같은 매개 변수가 있습니다.
points: 값이 포함된 셀 범위를 나타내는 참조입니다(예: "A1:A10").
showAverage\: (선택 사항) 평균을 표시할지 여부를 나타내는 부울입니다. 기본값은 false입니다.
scaleStart\: (선택 사항) 스파크라인의 최소 경계를 나타내는 숫자 또는 참조입니다. 기본값은 모든 값의 최소값입니다.
scaleEnd\: (선택 사항) 스파크라인의 최대 경계를 나타내는 숫자 또는 참조입니다. 기본값은 모든 값의 최대값입니다.
style\: (선택 사항) Spread 스파크라인의 스타일에 대한 번호 참조입니다. 다음 중 하나입니다.
1: 누적 - 가운데에서 양옆으로 선
2: 스프레드 - 가운데에서 양옆으로 점
3: 지터 - 임의 위치의 점
4: (기본값) 막대 - 한쪽에서 다른 쪽으로 선
5: StackedDots - 한쪽에서 다른 쪽으로 점
6: 줄무늬 - 길이가 같은 선
colorScheme\: (선택 사항) 스파크라인의 상자 색을 나타내는 문자열입니다. 기본값은 "#646464"입니다.
vertical\: (선택 사항) 스파크라인을 세로로 표시할지 여부를 나타내는 부울입니다. 기본값은 false입니다.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread" :newTabVisible=false>
<gc-worksheet>
</gc-worksheet>
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
</div>
</template>
<script setup>
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
import '@mescius/spread-sheets-vue';
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
let initHorizontalSparkline = function (sheet, name) {
var c, r;
var spreadNS = GC.Spread.Sheets;
sheet.suspendPaint();
sheet.name(name);
sheet.getCell(0, 0).value("USA State-Wide Weather Averages").font("20px Arial").vAlign(spreadNS.VerticalAlign.center);
sheet.setArray(1, 0, [["State", "Temperature", "Precipitation", "Snow (days)", "Sun (clear days)", "Morning Humidity", "Afternoon Humidity"]]);
for (c = 0; c <= 6; c++) {
sheet.setColumnWidth(c, 130);
}
sheet.setRowHeight(0, 40);
sheet.setRowHeight(3, 40);
sheet.setArray(2, 1, [["Style: Stacked (1)", "Style: Spread (2)", "Style: Jitter (3)",
"Style: Poles (4)", "Style: StackedDots (5)", "Style: Stripe (6)"]]);
sheet.setArray(4, 0, [
["Alabama", 62.8, 58.3, 0.8, 99, 0.84, 0.52], ["Alaska", 26.6, 22.5, 48.0, 61, 0.77, 0.64],
["Arizona", 60.3, 13.6, 0.3, 193, 0.53, 0.25], ["Arkansas", 60.5, 50.6, 3.8, 123, 0.85, 0.49],
["California", 59.4, 22.2, 0.0, 146, 0.76, 0.62], ["Colorado", 45.2, 15.9, 19.1, 136, 0.60, 0.35],
["Connecticut", 49.1, 50.3, 20.1, 82, 0.79, 0.52], ["Delaware", 55.3, 45.7, 11.8, 97, 0.79, 0.54],
["Florida", 70.8, 54.5, 0.0, 101, 0.87, 0.57], ["Georgia", 63.6, 50.7, 0.7, 112, 0.86, 0.50],
["Hawaii", 70.0, 63.7, 0.0, 90, 0.71, 0.56], ["Idaho", 44.4, 18.9, 19.4, 120, 0.68, 0.41],
["Illinois", 51.8, 39.2, 19.9, 95, 0.83, 0.58], ["Indiana", 51.7, 41.7, 23.5, 88, 0.83, 0.58],
["Iowa", 47.8, 34.0, 26.2, 105, 0.78, 0.56], ["Kansas", 54.3, 28.9, 10.0, 128, 0.80, 0.50],
["Kentucky", 55.6, 48.9, 11.8, 93, 0.79, 0.55], ["Louisiana", 66.4, 60.1, 0.1, 101, 0.87, 0.61],
["Maine", 41.0, 42.2, 27.8, 101, 0.82, 0.61], ["Maryland", 54.2, 44.5, 9.6, 105, 0.77, 0.52],
["Massachusetts", 47.9, 47.7, 22.4, 98, 0.75, 0.59], ["Michigan", 44.5, 32.8, 44.7, 71, 0.84, 0.61],
["Minnesota", 41.2, 27.3, 37.3, 95, 0.78, 0.55], ["Mississippi", 63.4, 59.0, 0.6, 111, 0.91, 0.54],
["Missouri", 54.5, 42.2, 11.5, 115, 0.82, 0.53], ["Montana", 42.7, 15.3, 32.9, 82, 0.71, 0.45],
["Nebraska", 48.8, 23.6, 18.3, 117, 0.82, 0.53], ["Nevada", 49.9, 9.5, 16.3, 158, 0.71, 0.32],
["New Hampshire", 43.8, 43.4, 29.8, 90, 0.84, 0.53], ["New Jersey", 52.7, 47.1, 8.7, 94, 0.83, 0.59],
["New Mexico", 53.4, 14.6, 9.5, 167, 0.60, 0.29], ["New York", 45.4, 41.8, 66.4, 63, 0.82, 0.61],
["North Carolina", 59.1, 50.3, 3.9, 109, 0.83, 0.52], ["North Dakota", 40.5, 17.8, 45.2, 93, 0.80, 0.51],
["Ohio", 50.8, 39.1, 30.4, 72, 0.80, 0.57], ["Oklahoma", 59.6, 36.5, 5.6, 139, 0.79, 0.48],
["Oregon", 48.4, 27.4, 2.2, 68, 0.85, 0.59], ["Pennsylvania", 48.8, 42.9, 19.4, 87, 0.77, 0.54],
["Rhode Island", 50.1, 47.9, 18.7, 98, 0.78, 0.57], ["South Carolina", 62.5, 49.8, 0.3, 115, 0.86, 0.49],
["South Dakota", 45.2, 20.1, 30.1, 104, 0.83, 0.53], ["Tennessee", 57.7, 54.2, 6.2, 102, 0.84, 0.53],
["Texas", 64.9, 28.9, 1.3, 135, 0.82, 0.49], ["Utah", 48.6, 12.2, 34.8, 125, 0.67, 0.43],
["Vermont", 42.9, 42.7, 54.4, 58, 0.77, 0.58], ["Virginia", 55.2, 44.3, 6.1, 100, 0.84, 0.52],
["Washington", 48.3, 38.4, 3.0, 58, 0.83, 0.62], ["West Virginia", 51.8, 45.2, 37.7, 60, 0.83, 0.59],
["Wisconsin", 43.2, 32.6, 38.7, 89, 0.84, 0.58], ["Wyoming", 42.0, 12.9, 36.7, 114, 0.63, 0.43]
]);
for (c = 1; c <= 6; c++) {
var columnChar = String.fromCharCode(65 + c);
var styleType = c;
sheet.setFormula(3, c, "=SPREADSPARKLINE(" + columnChar + "5:" + columnChar + "54,TRUE,,," + styleType + ",\"#82BC00\")");
}
sheet.getRange(4, 1, 50, 1).formatter("0 °F");
sheet.getRange(4, 2, 50, 1).formatter("0 in");
sheet.getRange(4, 5, 50, 1).formatter("0 %");
sheet.getRange(4, 6, 50, 1).formatter("0 %");
sheet.addColumns(6, 1);
sheet.addColumns(5, 1);
sheet.addColumns(4, 1);
sheet.addColumns(3, 1);
sheet.addColumns(2, 1);
sheet.addColumns(1, 1);
sheet.addSpan(0, 0, 1, 13);
sheet.getRange(1, 0, 1, 13).foreColor("white").backColor("#999999").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
for (c = 1; c < 13; c += 2) {
sheet.setColumnWidth(c, 15);
}
sheet.resumePaint();
}
let initVerticalSparkline = function (sheet, name) {
sheet.suspendPaint();
sheet.name(name);
var spreadNS = GC.Spread.Sheets;
var c, r;
sheet.getCell(0, 0).value("USA State-Wide Weather Averages").font("20px Arial").vAlign(spreadNS.VerticalAlign.center);
for (c = 0; c <= 5; c++) {
sheet.setColumnWidth(c, 130);
}
sheet.setRowHeight(0, 40);
sheet.setRowHeight(3, 100);
sheet.setArray(1, 0, [["Temperature", "Precipitation", "Snow (days)", "Sun (clear days)", "Morning Humidity", "Afternoon Humidity"],
["Style: Stacked (1)", "Style: Spread (2)", "Style: Jitter (3)",
"Style: Poles (4)", "Style: StackedDots (5)", "Style: Stripe (6)"]]);
sheet.setFormula(3, 0, '=SPREADSPARKLINE(Horizontal!C5:C54,TRUE,,,1,"#82BC00",TRUE)');
sheet.setFormula(3, 1, '=SPREADSPARKLINE(Horizontal!E5:E54,TRUE,,,2,"#82BC00",TRUE)');
sheet.setFormula(3, 2, '=SPREADSPARKLINE(Horizontal!G5:G54,TRUE,,,3,"#82BC00",TRUE)');
sheet.setFormula(3, 3, '=SPREADSPARKLINE(Horizontal!I5:I54,TRUE,,,4,"#82BC00",TRUE)');
sheet.setFormula(3, 4, '=SPREADSPARKLINE(Horizontal!K5:K54,TRUE,,,5,"#82BC00",TRUE)');
sheet.setFormula(3, 5, '=SPREADSPARKLINE(Horizontal!M5:M54,TRUE,,,6,"#82BC00",TRUE)');
sheet.addColumns(5, 1);
sheet.addColumns(4, 1);
sheet.addColumns(3, 1);
sheet.addColumns(2, 1);
sheet.addColumns(1, 1);
for (c = 1; c < 11; c += 2) {
sheet.setColumnWidth(c, 15);
}
sheet.addSpan(0, 0, 1, 11);
sheet.getRange(1, 0, 1, 11).foreColor("white").backColor("#999999").hAlign(spreadNS.HorizontalAlign.center).vAlign(spreadNS.VerticalAlign.center);
sheet.resumePaint();
}
let initSpread = function (spread) {
initHorizontalSparkline(spread.sheets[0], "Horizontal");
initVerticalSparkline(spread.sheets[1], "Vertical");
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>SpreadJS VUE</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="$DEMOROOT$/ko/vue3/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/ko/vue3/node_modules/systemjs/dist/system.src.js"></script>
<script src="./systemjs.config.js"></script>
<script src="./compiler.js" type="module"></script>
<script>
var System = SystemJS;
System.import("./src/app.js");
System.import('$DEMOROOT$/ko/lib/vue3/license.js');
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>
(function (global) {
SystemJS.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
packageConfigPaths: [
'./node_modules/*/package.json',
"./node_modules/@mescius/*/package.json",
"./node_modules/@babel/*/package.json",
"./node_modules/@vue/*/package.json"
],
map: {
'vue': "npm:vue/dist/vue.esm-browser.js",
'tiny-emitter': 'npm:tiny-emitter/index.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
"systemjs-babel-build": "npm:systemjs-plugin-babel/systemjs-babel-browser.js",
'@mescius/spread-sheets': 'npm:@mescius/spread-sheets/index.js',
'@mescius/spread-sheets-resources-ko': 'npm:@mescius/spread-sheets-resources-ko/index.js',
'@mescius/spread-sheets-vue': 'npm:@mescius/spread-sheets-vue/index.js'
},
meta: {
'*.css': { loader: 'systemjs-plugin-css' },
'*.vue': { loader: "../plugin-vue/index.js" }
}
});
})(this);
