콤보 차트 | 기능별 학습

계열 추가를 통해 콤보 차트를 만드는 데는 다음 두 단계가 있습니다: 1. 다음과 같이 세로 막대형 차트를 만듭니다: 2. 계열을 추가하고 차트 유형을 설정합니다. 예를 들어, 꺾은선형 차트를 추가할 수 있습니다: 현재 다음과 같은 차트 유형 조합이 지원됩니다. 묶은 세로 막대형 차트 누적 세로 막대형 차트 100% 누적 세로 막대형 차트 묶은 가로 막대형 차트 누적 가로 막대형 차트 100% 누적 가로 막대형 차트 꺾은선형 차트 누적 꺾은선형 차트 100% 누적 꺾은선형 차트 표식이 있는 꺽은선형 차트 표식이 있는 누적 꺾은선형 차트 표식이 있는 100% 누적 꺾은선형 차트 영역형 차트 누적 영역형 차트 100% 누적 영역형 차트 원형 차트 도넛형 차트 분산형 차트 곡선이 있는 분산형 차트 곡선 및 표식이 있는 분산형 차트 직선이 있는 분산형 차트 직선 및 표식이 있는 분산형 차트

<template>
<div class="sample-tutorial">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread">
<gc-worksheet />
<gc-worksheet />
</gc-spread-sheets>
</div>
</template>
<script>
import Vue from "vue";
import "@mescius/spread-sheets-vue";
import GC from "@mescius/spread-sheets";
import "@mescius/spread-sheets-charts";
import "@mescius/spread-sheets-shapes";
import '@mescius/spread-sheets-resources-ko';
GC.Spread.Common.CultureManager.culture("ko-kr");
import "./styles.css";
let App = Vue.extend({
name: "app",
data: function () {
return {
spread: null
};
},
methods: {
initSpread(spread) {
let self = this;
let sheets = spread.sheets;
spread.suspendPaint();
let sheet1 = sheets[0];
let sheet2 = sheets[1];
self.initSheet1(sheet1);
self.initSheet2(sheet2);
self.addFormControl(sheet2);
let chart1 = self.initChart1(sheet1, GC.Spread.Sheets.Charts.ChartType.columnClusterd); //add chart
chart1.title({
text: "Monthly Registration Number and Distribution of Men and Women"
});
self.addSeriesLine(chart1, GC.Spread.Sheets.Charts.ChartType.lineMarkers);
self.changColumnChartDataLabels(chart1);
let chart2 = self.initChart2(sheet2, GC.Spread.Sheets.Charts.ChartType.doughnut); //add chart
chart2.title({
text: "Gauge Chart"
});
self.adjustDoughnutSeries(chart2);
self.addDoughnutSeries(chart2);
self.addPieSeries(chart2)
spread.resumePaint();
},
initSheet1(sheet) {
//prepare data for chart
let dataArray = [
["", "JAN", "FEB", "MAR", "APR", "MAY", "JUN", "JUL", "AUG", "SEP", "OCT", "NOV", "DEC"],
["MAN", 327, 1776, 507, 1200, 800, 482, 204, 1390, 1001, 951, 381, 220],
["WOMEN", 709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208, 3372, 2484, 4078],
["TOTAL", 1036, 3693, 2962, 3810, 2519, 1915, 1748, 4675, 6209, 4323, 2865, 4298]
];
sheet.setArray(0, 0, dataArray);
sheet.name("Normal Combo Chart");
},
initSheet2(sheet) {
let dataArray1 = [
['Performance Label', 'Value'],
["Poor", 20],
["Average", 50],
["Good", 20],
["Excellent", 10],
["Total", 100],
];
sheet.setArray(0, 0, dataArray1);
sheet.tables.add('table1', 0, 0, 6, 2, GC.Spread.Sheets.Tables.TableThemes.light1);
let dataArray2 = [
["Labels", "Values"],
[10, 10],
[20, 10],
[30, 10],
[40, 10],
[50, 10],
[60, 10],
[70, 10],
[80, 10],
[90, 10],
[100, 10],
["Total", 100],
];
sheet.setArray(0, 3, dataArray2);
sheet.tables.add('table2', 0, 3, 11, 2, GC.Spread.Sheets.Tables.TableThemes.light1);
let dataArray3 = [
["Labels", "Values"],
["Pointer", 45],
["Thickness", 2],
["Rest", 154],
];
sheet.setArray(0, 6, dataArray3);
sheet.tables.add('table3', 0, 6, 4, 2, GC.Spread.Sheets.Tables.TableThemes.medium7);
sheet.setFormula(3, 7, "=200-H2-H3");
sheet.name("Gauge Chart");
},
initChart1(sheet, type) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart2'), type, 30, 120, 900, 300, "A1:M3", GC.Spread.Sheets.Charts.RowCol.rows);
},
initChart2(sheet, type) {
//add chart
return sheet.charts.add((sheet.name() + 'Chart1'), type, 0, 250, 800, 450, "A1:B6", GC.Spread.Sheets.Charts.RowCol.column);
},
//add a line type to create combo chart
addSeriesLine(chart, type) {
let seriesItem = {};
seriesItem.chartType = type;
seriesItem.border = {
width: 3
};
seriesItem.name = 'A4';
seriesItem.xValues = 'B1:M1';
seriesItem.yValues = 'B4:M4';
chart.series().add(seriesItem);
},
//show dataLabels
changColumnChartDataLabels(chart) {
let dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
let dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.above;
chart.dataLabels(dataLabels);
},
//add a form control
addFormControl(sheet) {
let spinButton = sheet.shapes.addFormControl("spin button", GC.Spread.Sheets.Shapes.FormControlType.spinButton, 650, 300, 100, 60);
let options = spinButton.options();
options.minValue = 0;
options.maxValue = 100;
options.step = 1;
options.cellLink = "H2";
spinButton.options(options);
spinButton.value(25);
},
//add a form control
adjustDoughnutSeries(chart) {
let doughnutSeries1 = chart.series().get(0);
doughnutSeries1.startAngle = 270;
let dataLabels = doughnutSeries1.dataLabels || {};
dataLabels.showCategoryName = true
let dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.outsideEnd;
doughnutSeries1.dataPoints[0] = {
backColor: "rgb(192,0,0)"
}
doughnutSeries1.dataPoints[1] = {
backColor: "rgb(255,255,0)"
}
doughnutSeries1.dataPoints[2] = {
backColor: "rgb(68,144,96)"
}
doughnutSeries1.dataPoints[3] = {
backColor: "rgb(112,173,71)"
}
doughnutSeries1.dataPoints[4] = {
backColor: ""
}
chart.series().set(0, doughnutSeries1);
let legend = chart.legend();
legend.visible = false;
chart.legend(legend);
},
addDoughnutSeries(chart) {
let doughnutSeries2 = {};
doughnutSeries2.chartType = GC.Spread.Sheets.Charts.ChartType.doughnut;
doughnutSeries2.name = 'D1';
doughnutSeries2.yValues = 'E2:E12';
doughnutSeries2.startAngle = 270;
doughnutSeries2.doughnutHoleSize = 0.5;
doughnutSeries2.dataPoints = {
0: {
backColor: "rgb(231,230,230)",
},
1: {
backColor: "rgb(231,230,230)",
},
2: {
backColor: "rgb(231,230,230)",
},
3: {
backColor: "rgb(231,230,230)",
},
4: {
backColor: "rgb(231,230,230)",
},
5: {
backColor: "rgb(231,230,230)",
},
6: {
backColor: "rgb(231,230,230)",
},
7: {
backColor: "rgb(231,230,230)",
},
8: {
backColor: "rgb(231,230,230)",
},
9: {
backColor: "rgb(231,230,230)",
},
10: {
backColor: "",
},
}
chart.series().add(doughnutSeries2);
},
addPieSeries(chart) {
let pieSeries = {};
pieSeries.chartType = GC.Spread.Sheets.Charts.ChartType.pie;
pieSeries.name = 'G1';
pieSeries.xValues = 'G2:G4';
pieSeries.yValues = 'H2:H4';
pieSeries.axisGroup = GC.Spread.Sheets.Charts.AxisGroup.secondary;
pieSeries.startAngle = 270;
pieSeries.dataPoints = {
0: {
backColor: "",
},
1: {
backColor: "red",
},
2: {
backColor: "",
},
}
chart.series().add(pieSeries);
}
}
});
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"></div>
</body>
</html>

.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;
}
#app {
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-shapes': 'npm:@mescius/spread-sheets-shapes/index.js',
'@mescius/spread-sheets-charts': 'npm:@mescius/spread-sheets-charts/index.js',
'@mescius/spread-sheets-shapes': 'npm:@mescius/spread-sheets-shapes/index.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',
'@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);