수식에서 다음과 같이 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>
import Vue from "vue";
import GC from '@mescius/spread-sheets';
import '@mescius/spread-sheets-resources-ko';
import '@mescius/spread-sheets-vue'
GC.Spread.Common.CultureManager.culture("ko-kr");
import './styles.css';
let App = Vue.extend({
name: "app",
data: function() {
return {
spread: null
};
},
methods:{
initHorizontalSparkline(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();
},
initVerticalSparkline(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();
},
initSpread(spread) {
this.spread = spread;
this.initHorizontalSparkline(spread.sheets[0], "Horizontal");
this.initVerticalSparkline(spread.sheets[1], "Vertical");
}
}
});
new Vue({ render: h => h(App) }).$mount('#app');
</script>
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/vue/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<!-- SystemJS -->
<script src="$DEMOROOT$/ko/vue/node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
System.import('./src/app.vue');
System.import('$DEMOROOT$/ko/lib/vue/license.js');
</script>
</head>
<body>
<div id="app" style="height: 100%;"></div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.sample-spreadsheets {
height: 100%;
}
(function (global) {
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' },
'*.vue': { loader: 'vue-loader' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@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',
'@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js',
'jszip': 'npm:jszip/dist/jszip.js',
'css': 'npm:systemjs-plugin-css/css.js',
'vue': 'npm:vue/dist/vue.min.js',
'vue-loader': 'npm:systemjs-vue-browser/index.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'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
}
}
});
})(this);
