콤보 차트

열과 행으로 배열된 데이터는 콤보 차트에 그려질 수 있습니다. 콤보 차트는 두 개 이상의 차트 유형을 결합하여 데이터를 읽고 이해하기 쉽게 만듭니다.

계열 추가를 통해 콤보 차트를 만드는 데는 다음 두 단계가 있습니다: 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; }