스파크라인을 만들려면 setSparkline 메서드를 사용하여 셀의 스파크라인을 설정합니다. getSparkline 메서드를 사용하여 스파크라인을 가져올 수 있습니다. 예를 들어 다음과 같습니다.
스파크라인에는 세 가지 유형이 있습니다. SparklineType 열거는 스파크라인 유형을 나타냅니다.
line
column
winloss
Excel에서 위의 세 가지 스파크라인을 모두 사용할 수 있습니다. 그러나 호환 가능 스파크라인과 같은 다른 스파크라인은, 해당 지원을 제공하는 추가 기능 확장을 가져오지 않는 한 Excel에서 지원되지 않습니다.
스파크라인을 제거하려면 removeSparkline 메서드를 사용하여 지정된 셀에 대한 스파크라인을 제거합니다. 예를 들어 다음과 같습니다.
수식을 사용하여 스파크라인을 만들 수도 있습니다. 자세한 내용은 호환 가능을 참조하십시오.
스파크라인 데이터 및 dateAxis도 사용자 정의 이름을 지원합니다. 예를 들어 다음과 같습니다.
<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet :allowCellOverflow="true">
</gc-worksheet>
</gc-spread-sheets>
<div class="options-container">
<div class="option-group">
<label><b>Add SparkLine:</b></label>
</div>
<hr />
<div class="option-group">
<label>1. Select the data range in the sheet</label>
</div>
<div class="option-group">
<label for="line_position">2. Enter destination cell (row,column index)</label>
<input v-model="rowColRef" id="line_position" v-on:change="setPosition" />
</div>
<div class="option-group">
<label for="line_position">3. Change the type and orientation</label>
</div>
<div class="option-group">
<label for="line_type" style="width: auto;">Type:</label>
<select id="line_type" class="position" v-model="typeRef" v-on:change="setType">
<option value="0">line</option>
<option value="1">column</option>
<option value="2">winloss</option>
</select>
</div>
<div class="option-group">
<label for="line_orientation">Orientation:</label>
<select id="line_orientation" class="position" v-model="orientationRef" v-on:change="setOrientation">
<option value="0">Vertical</option>
<option value="1">Horizontal</option>
</select>
</div>
<div class="option-group">
<label for="line_position">4. Click "Add Sparkline" button</label>
</div>
<div class="option-group">
<input type="button" value="Add Sparkline" id="btnAddSparkline" v-on:click="addSprikline">
</div>
<br />
<div>
<label><b>Remove SparkLine:</b></label>
</div>
<hr />
<div class="option-group">
<label>1. Select Sparkline</label>
</div>
<div class="option-group">
<label for="line_position">2. Click "Clear Sparkline" button</label>
</div>
<div class="option-group">
<input type="button" value="Clear Sparkline" id="btnClearSparkline" v-on:click="clearSprikline">
</div>
</div>
</div>
</template>
<script setup>
import '@mescius/spread-sheets-vue'
import { ref } from "vue";
import GC from "@mescius/spread-sheets";
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
const spreadRef = ref(null);
const rowRef = ref(0);
const colRef = ref(0);
const rowColRef = ref('0,0');
const typeRef = ref(0);
const orientationRef = ref(0);
let clearSprikline = function () {
let sheet = spreadRef.value.getActiveSheet();
let range = getActualCellRange(sheet.getSelections()[0], sheet.getRowCount(), sheet.getColumnCount());
for (let r = 0; r < range.rowCount; r++) {
for (let c = 0; c < range.colCount; c++) {
sheet.removeSparkline(r + range.row, c + range.col);
}
}
}
let addSprikline = function () {
let sheet = spreadRef.value.getActiveSheet();
let range = getActualCellRange(sheet.getSelections()[0], sheet.getRowCount(), sheet.getColumnCount());
let r = rowRef.value;
let c = colRef.value;
let orientation = orientationRef.value;
let type = typeRef.value;
//sparkline settings
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.lineWeight = 3;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
if (!isNaN(r) && !isNaN(c)) {
sheet.setSparkline(r, c, range, orientation, type, setting);
}
}
let setOrientation = function (e) {
orientationRef.value = parseInt(e.target.value);
}
let setType = function (e) {
typeRef.value = parseInt(e.target.value);
}
let setPosition = function (e) {
let value = e.target.value, arr = value.split(','),
row = parseInt(arr[0]), col = parseInt(arr[1]);
rowRef.value = row;
colRef.value = col;
rowColRef.value = row + ',' + col;
}
let _selectOption = function (select, value) {
if (select === 'line_type') {
typeRef.value = value;
} else {
orientationRef.value = value;
}
}
let getActualCellRange = function (cellRange, rowCount, columnCount) {
if (cellRange.row == -1 && cellRange.col == -1) {
return new GC.Spread.Sheets.Range(0, 0, rowCount, columnCount);
}
else if (cellRange.row == -1) {
return new GC.Spread.Sheets.Range(0, cellRange.col, rowCount, cellRange.colCount);
}
else if (cellRange.col == -1) {
return new GC.Spread.Sheets.Range(cellRange.row, 0, cellRange.rowCount, columnCount);
}
return cellRange;
}
let initSpread = function (spread) {
spreadRef.value = spread;
let sheet = spreadRef.value.getSheet(0);
sheet.suspendPaint();
sheet.options.allowCellOverflow = true;
let data = [1, -2, -1, 6, 4, -4, 3, 8];
let dateAxis = [new Date(2011, 0, 5), new Date(2011, 0, 1), new Date(2011, 1, 11), new Date(2011, 2, 1),
new Date(2011, 1, 1), new Date(2011, 1, 3), new Date(2011, 2, 6), new Date(2011, 1, 19)];
sheet.setValue(0, 0, "Series 1");
sheet.setValue(0, 1, "Series 2");
for (let i = 0; i < 8; i++) {
sheet.setValue(i + 1, 0, data[i]);
sheet.getCell(i + 1, 1).value(dateAxis[i]).formatter("yyyy-mm-dd");
}
sheet.setColumnWidth(1, 100);
sheet.setValue(11, 0, "*Data Range is A2-A9");
sheet.setValue(12, 0, "*Date axis range is B2-B9");
var dataRange = new GC.Spread.Sheets.Range(1, 0, 8, 1);
var dateAxisRange = new GC.Spread.Sheets.Range(1, 1, 8, 1);
sheet.getCell(0, 5).text("Sparkline without dateAxis:");
sheet.getCell(1, 5).text("(1) Line");
sheet.getCell(1, 8).text("(2) Column");
sheet.getCell(1, 11).text("(3) Winloss");
sheet.getCell(7, 5).text("Sparkline with dateAxis:");
sheet.getCell(8, 5).text("(1) Line");
sheet.getCell(8, 8).text("(2) Column");
sheet.getCell(8, 11).text("(3) Winloss");
//sparkline settings
var setting = new GC.Spread.Sheets.Sparklines.SparklineSetting();
setting.options.showMarkers = true;
setting.options.lineWeight = 3;
setting.options.displayXAxis = true;
setting.options.showFirst = true;
setting.options.showLast = true;
setting.options.showLow = true;
setting.options.showHigh = true;
setting.options.showNegative = true;
//line
sheet.addSpan(2, 5, 4, 3);
sheet.setSparkline(2, 5, dataRange
, GC.Spread.Sheets.Sparklines.DataOrientation.vertical
, GC.Spread.Sheets.Sparklines.SparklineType.line
, setting
);
sheet.addSpan(9, 5, 4, 3);
sheet.setSparkline(9, 5, dataRange
, GC.Spread.Sheets.Sparklines.DataOrientation.vertical
, GC.Spread.Sheets.Sparklines.SparklineType.line
, setting
, dateAxisRange
, GC.Spread.Sheets.Sparklines.DataOrientation.vertical
);
//column
sheet.addSpan(2, 8, 4, 3);
sheet.setSparkline(2, 8, dataRange
, GC.Spread.Sheets.Sparklines.DataOrientation.vertical
, GC.Spread.Sheets.Sparklines.SparklineType.column
, setting
);
sheet.addSpan(9, 8, 4, 3);
sheet.setSparkline(9, 8, dataRange
, GC.Spread.Sheets.Sparklines.DataOrientation.vertical
, GC.Spread.Sheets.Sparklines.SparklineType.column
, setting
, dateAxisRange
, GC.Spread.Sheets.Sparklines.DataOrientation.vertical
);
//winloss
sheet.addSpan(2, 11, 4, 3);
sheet.setSparkline(2, 11, dataRange
, GC.Spread.Sheets.Sparklines.DataOrientation.vertical
, GC.Spread.Sheets.Sparklines.SparklineType.winloss
, setting
);
sheet.addSpan(9, 11, 4, 3);
sheet.setSparkline(9, 11, dataRange
, GC.Spread.Sheets.Sparklines.DataOrientation.vertical
, GC.Spread.Sheets.Sparklines.SparklineType.winloss
, setting
, dateAxisRange
, GC.Spread.Sheets.Sparklines.DataOrientation.vertical
);
sheet.bind(GC.Spread.Sheets.Events.SelectionChanged, selectionChangedCallback);
sheet.resumePaint();
function selectionChangedCallback() {
let sheet = spread.getActiveSheet();
let sparkline = sheet.getSparkline(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex());
if (sparkline) {
updateSetting(sparkline);
} else {
initSetting();
}
}
function updateSetting(sparkline) {
let type = sparkline.sparklineType(),
orientation = sparkline.dataOrientation(),
row = sparkline.row,
col = sparkline.column;
rowRef.value = row;
colRef.value = col;
rowColRef.value = row + ',' + col;
_selectOption('line_type', type);
_selectOption('line_orientation', orientation);
}
function initSetting() {
let row = 0,
col = 0;
rowRef.value = row;
colRef.value = col;
rowColRef.value = row + ',' + col;
_selectOption('line_type', 0);
_selectOption('line_orientation', 0);
}
}
</script>
<style scoped>
#app {
height: 100%;
}
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
p {
padding: 2px 10px;
background-color: #F4F8EB;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-group {
margin-bottom: 8px;
}
input,
select {
margin-top: 6px;
padding: 4px 4px;
width: 100%;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
</style>
<!DOCTYPE html>
<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>
#app {
height: 100%;
}
.sample {
position: relative;
height: 100%;
overflow: auto;
}
.sample::after {
display: block;
content: "";
clear: both;
}
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
p {
padding: 2px 10px;
background-color: #F4F8EB;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
.option-group {
margin-bottom: 8px;
}
input,
select {
margin-top: 6px;
padding: 4px 4px;
width: 100%;
box-sizing: border-box;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
(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);
