계열 추가를 통해 콤보 차트를 만드는 데는 다음 두 단계가 있습니다:
1. 다음과 같이 세로 막대형 차트를 만듭니다:
2. 계열을 추가하고 차트 유형을 설정합니다. 예를 들어, 꺾은선형 차트를 추가할 수 있습니다:
현재 다음과 같은 차트 유형 조합이 지원됩니다.
묶은 세로 막대형 차트
누적 세로 막대형 차트
100% 누적 세로 막대형 차트
묶은 가로 막대형 차트
누적 가로 막대형 차트
100% 누적 가로 막대형 차트
꺾은선형 차트
누적 꺾은선형 차트
100% 누적 꺾은선형 차트
표식이 있는 꺽은선형 차트
표식이 있는 누적 꺾은선형 차트
표식이 있는 100% 누적 꺾은선형 차트
영역형 차트
누적 영역형 차트
100% 누적 영역형 차트
원형 차트
도넛형 차트
분산형 차트
곡선이 있는 분산형 차트
곡선 및 표식이 있는 분산형 차트
직선이 있는 분산형 차트
직선 및 표식이 있는 분산형 차트
var spread;
window.onload = function () {
spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {
sheetCount: 2
});
initSpread(spread);
};
function initSpread(spread) {
var sheets = spread.sheets;
spread.suspendPaint();
var sheet1 = sheets[0];
var sheet2 = sheets[1];
initSheet1(sheet1);
initSheet2(sheet2);
addFormControl(sheet2);
var chart1 = initChart1(sheet1, GC.Spread.Sheets.Charts.ChartType.columnClusterd); //add chart
chart1.title({
text: "Monthly Registration Number and Distribution of Men and Women"
});
addSeriesLine(chart1, GC.Spread.Sheets.Charts.ChartType.lineMarkers);
changColumnChartDataLabels(chart1);
var chart2 = initChart2(sheet2, GC.Spread.Sheets.Charts.ChartType.doughnut); //add chart
chart2.title({
text: "Gauge Chart"
});
adjustDoughnutSeries(chart2);
addDoughnutSeries(chart2);
addPieSeries(chart2)
spread.resumePaint();
}
function initSheet1(sheet) {
//prepare data for chart
var 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");
}
function initSheet2(sheet) {
var 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);
var 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);
var 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");
}
function 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);
}
function 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
function addSeriesLine(chart, type) {
var 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
function changColumnChartDataLabels(chart) {
var dataLabels = chart.dataLabels();
dataLabels.showValue = true;
dataLabels.showSeriesName = false;
dataLabels.showCategoryName = false;
var dataLabelPosition = GC.Spread.Sheets.Charts.DataLabelPosition;
dataLabels.position = dataLabelPosition.above;
chart.dataLabels(dataLabels);
}
//add a form control
function addFormControl(sheet) {
var spinButton = sheet.shapes.addFormControl("spin button", GC.Spread.Sheets.Shapes.FormControlType.spinButton, 650, 300, 100, 60);
var 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
function adjustDoughnutSeries(chart) {
let doughnutSeries1 = chart.series().get(0);
doughnutSeries1.startAngle = 270;
var dataLabels = doughnutSeries1.dataLabels || {};
dataLabels.showCategoryName = true
var 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);
var legend = chart.legend();
legend.visible = false;
chart.legend(legend);
}
function addDoughnutSeries(chart) {
var 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);
}
function addPieSeries(chart) {
var 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);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<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-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-charts/dist/gc.spread.sheets.charts.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="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-tutorial"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
